通過行命令按鈕在兩個Kendo UI網格之間移動行

Question

我當前的任務是在用戶單擊該行中的一個按鈕時，在兩個Kendo UI網格之間移動數據行。我有一些實際可行的代碼，但我不明白爲什麼，希望有人能解釋它。我也想知道是否有更好的方法或完成這項任務是有意義的。環境是Winsows 7，VS2012，MVC4，Kendo UI，jquery 1.8。 我不明白的部分是moveTo函數。以 開頭的部分var row = $（elem.currentTarget）.closest（「tr」）;我想我是通過遍歷行中的每個單元格，並將其添加到toDs，但爲什麼所有的字段？似乎我應該是

其他需要注意的事項我已經看到http://jsfiddle.net/OnaBai/2qXKy/ 但客戶不想在網格中使用選擇，他們想要有單獨的按鈕。？我也看着http://www.kendoui.com/forums/ui/grid/get-row-id-from-grid-when-custom-command-button-is-clicked.aspx這是我得到的代碼的註釋部分的想法 我可以做這個變得更容易謝謝

這裏是視圖：

@model IEnumerable<AmWins.AL.GB.Web.ViewModels.BillingGroupPersonViewModel> 

<h2>Add People</h2> 
<div id="plan-entry" class="batchEntryContainer"> 
<div id="availableBillingGroupPeopleGrid"></div> 
<div class="clear" /> 
<br /> 
<div id="addBillingGroupPeopleGrid"></div> 
<div class="clear" /> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    var $availableBillingGroupPeopleGrid = $('#availableBillingGroupPeopleGrid').kendoGrid({ 
     columns: [ 
      // Match field names to AmWins.AL.GB.Web.ViewModels.BillingGroupPersonViewModel properties 
      { command: { text: "push me", click: copySelectedToAddBillingGroupPeopleGrid, class: "action-column" }, title: " ", headerTemplate: '<button type="button" id="moveAllDown">Click Me!</button>', width: 50 }, 
      { field: "LastNameFirst", title: "Name" }, 
      { field: "EffectiveDate" }, 
      { field: "Status" }, 
      { field: "PersonId", title: "Person ID" }, 
      { field: "RelationshipType", title: "Type" }, 
      { field: "SSN" }, 
      { field: "StreetAddress", title: "Address" }, 
      { field: "City" }, 
      { field: "State" }, 
      { field: "Zip" } 
     ], 
     editable: false, 
     scrollable: false, 
     dataSource: {} 
    }); 

    @foreach (var person in Model) { 
     <text> 
    var $getGrid = $("#availableBillingGroupPeopleGrid").data("kendoGrid"); 
    $getGrid.dataSource.add({ 
     LastNameFirst: '@person.LastNameFirst', 
     EffectiveDate: '@person.EffectiveDate', 
     Status: '@person.Status', 
     PersonId: '@person.PersonId', 
     RelationshipType: '@person.RelationshipType', 
     SSN: '@person.SSN', 
     StreetAddress: '@person.StreetAddress', 
     City: '@person.City', 
     State: '@person.State', 
     Zip: '@person.Zip' 
    }); 
    </text> 
    } 

    var $addBillingGroupPeopleGrid = $('#addBillingGroupPeopleGrid').kendoGrid({ 
     columns: [ 
      // Match field names to AmWins.AL.GB.Web.ViewModels.BillingGroupPersonViewModel properties 
      { command: { text: "push me", click: copySelectedToAvailableBillingGroupPeopleGrid, class: "action-column" }, title: " ", headerTemplate: '<button type="button" id="moveAllUp">Click Me!</button>', width: 50 }, 
      { field: "LastNameFirst", title: "Name" }, 
      { field: "EffectiveDate" }, 
      { field: "Status" }, 
      { field: "PersonId", title: "Person ID" }, 
      { field: "RelationshipType", title: "Type" }, 
      { field: "SSN" }, 
      { field: "StreetAddress", title: "Address" }, 
      { field: "City" }, 
      { field: "State" }, 
      { field: "Zip" } 
     ], 
     editable: false, 
     scrollable: false, 
     dataSource: {}, 
     loadeddata: onloadeddata 
    }); 

    function copySelectedToAddBillingGroupPeopleGrid(elem) 
    { 
     moveTo("down", elem); 
    } 

    function copySelectedToAvailableBillingGroupPeopleGrid(elem) 
    { 
     moveTo("up", elem); 
    } 

    function moveTo(direction, elem) 
    { 
     var fromGrid; 
     var fromDS; 
     var toDS; 

     if(direction == "down") 
     { 
      fromGrid = $("#availableBillingGroupPeopleGrid").data("kendoGrid"); 
      fromDS = $("#availableBillingGroupPeopleGrid").data("kendoGrid").dataSource; 
      toDS = $("#addBillingGroupPeopleGrid").data("kendoGrid").dataSource; 
     } 
     else 
     { 
      fromGrid = $("#addBillingGroupPeopleGrid").data("kendoGrid"); 
      fromDS = $("#addBillingGroupPeopleGrid").data("kendoGrid").dataSource; 
      toDS = $("#availableBillingGroupPeopleGrid").data("kendoGrid").dataSource; 
     } 
     var row = $(elem.currentTarget).closest("tr"); 
     row.each(function() { 
      var dataItem = fromGrid.dataItem($(this)); 
      toDS.add(
      { 
       LastNameFirst: dataItem.LastNameFirst, 
       EffectiveDate: dataItem.EffectiveDate, 
       Status: dataItem.Status, 
       PersonId: dataItem.PersonId, 
       RelationshipType: dataItem.RelationshipType, 
       SSN: dataItem.SSN, 
       StreetAddress: dataItem.StreetAddress, 
       City: dataItem.City, 
       State: dataItem.State, 
       Zip: dataItem.Zip 
      }); 
     }); 
     fromGrid.removeRow($(elem.currentTarget).closest("tr")); 

     // This code only adds the pushbutton in the first column, not the entire row contents. 
     //var uid = $(this).parent().parent().attr('data-uid'); 
     //var dataRow = fromDS.getByUid(uid); 
     //var dataItem = fromGrid.dataItem($(dataRow)); 
     //toDS.add(dataItem); 
    } 
    function onloadeddata() 
    { 
     $("#move-all-up").click(moveAllUp); 
     $("#move-all-down").click(moveAllDown); 
    } 
    function moveAllUp() 
    { 

    } 
    function moveAllDown() 
    { 
     copySelectedToAddBillingGroupPeopleGrid($(this)); 
    } 

}); 
</script> 

Answer 1

我真的終於想出瞭如何做到這一點。這是我的解決方案。我意識到我註釋掉的代碼沒有工作，因爲它低於removeRow調用，所以表中不再有任何數據。我也意識到有一個額外的陳述是不需要的，並沒有將任何數據放入數據源。

function copySelectedToAddBillingGroupPeopleGrid(elem) 
    { 
     moveTo(elem, $("#availableBillingGroupPeopleGrid").data("kendoGrid"), $("#addBillingGroupPeopleGrid").data("kendoGrid")); 
    } 
function copySelectedToAvailableBillingGroupPeopleGrid(elem) 
    { 
     moveTo(elem, $("#addBillingGroupPeopleGrid").data("kendoGrid"), $("#availableBillingGroupPeopleGrid").data("kendoGrid")); 
    } 
function moveTo(elem, fromGrid, toGrid) 
    { 
     toGrid.dataSource.add(fromGrid.dataSource.getByUid($(elem.currentTarget).closest("tr").attr('data-uid'))); 
     fromGrid.removeRow($(elem.currentTarget).closest("tr")); 
    }