1

私の現在の割り当ては、ユーザーがその行のボタンをクリックしたときに、2 つの Kendo Ui グリッド間でデータの行を移動することです。実際に機能するコードがありますが、その理由がわかりません。誰かが説明してくれることを望んでいました。また、このタスクを達成するためのより良いアプローチまたは理にかなったアプローチがあるかどうかも疑問に思っています。環境はWinsows7、VS2012、MVC4、剣道UI、jquery1.8です。私が理解していない部分は、moveTo 関数です。var row = $(elem.currentTarget).closest("tr"); で始まる部分 toDS.add(....全体は非常に紛らわしいです。行の各セルをループしてtoDに追加しているように思えますが、なぜすべてのフィールドですか？その下にコメントアウトされているもののようなものですが、それは機能しません。

その他の注意事項。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