Question

我当前的任务是在用户单击该行中的按钮时在两个Kendo Ui网格之间移动数据行。我有实际工作的代码，但我不明白为什么，并希望有人可以解释它。我也想知道是否有更好的方法或者有意义完成这项任务。环境是Winsows 7，VS2012，MVC4，Kendo UI，jquery 1.8。我不理解的部分是moveTo函数。部分开头 var row = $（elem.currentTarget）.closest（“tr”）; 整个toDS.add（....非常令人困惑。我觉得我正在循环遍历行中的每个单元格并将其添加到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"));
    }

通过行命令按钮在2个Kendo UI网格之间移动行

1 个答案: