1

我当前的任务是当用户单击该行中的按钮时，在 2 个 Kendo Ui 网格之间移动数据行。我有实际工作的代码，但我不明白为什么，希望有人能解释一下。我也想知道是否有更好的方法或一种有意义的方法来完成这项任务。环境为 Winsows 7、VS2012、MVC4、Kendo UI、jquery 1.8。我不明白的部分是 moveTo 函数。以 var row = $(elem.currentTarget).closest("tr"); 开头的部分 整个 toDS.add(..类似于下面注释的内容，但这不起作用。

其他需要注意的事项。我见过http://jsfiddle.net/OnaBai/2qXKy/ 但客户不想在网格中使用选择，他们想要单独的按钮。我还查看了http: //www.kendoui.c​​om/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>
4

1 回答 1

0

我实际上终于想出了如何做到这一点。这是我的解决方案。我意识到我注释掉的代码不起作用，因为它位于 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"));
    }
于 2013-05-01T12:49:35.453 回答