javascript - 从剑道网格中获取检查的行

Question

我有一个带有复选框列的剑道网格。当相应的复选框被选中时，我一直在尝试获取数据项行。单击按钮时，我只需要在 JSon 中获取选中的行。这是一个 JSfiddle 我一直在玩。它只获取 Id 而不是行数据。我一直在尝试修改，以便它可以返回整个行数据。

http://jsfiddle.net/Xg56P/31/

        var crudServiceBaseUrl = "http://demos.kendoui.com/service",
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: crudServiceBaseUrl + "/Products",
                        dataType: "jsonp"
                    },
                    update: {
                        url: crudServiceBaseUrl + "/Products/Update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: crudServiceBaseUrl + "/Products/Destroy",
                        dataType: "jsonp"
                    },
                    create: {
                        url: crudServiceBaseUrl + "/Products/Create",
                        dataType: "jsonp"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return {
                                models: kendo.stringify(options.models)
                            };
                        }
                    }
                },
                batch: true,
                pageSize: 20,
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: {
                                editable: false,
                                nullable: true
                            },
                            ProductName: {
                                validation: {
                                    required: true
                                }
                            },
                            UnitPrice: {
                                type: "number",
                                validation: {
                                    required: true,
                                    min: 1
                                }
                            },
                            Discontinued: {
                                type: "boolean"
                            },
                            UnitsInStock: {
                                type: "number",
                                validation: {
                                    min: 0,
                                    required: true
                                }
                            }
                        }
                    }
                }
            });

        //Grid definition
        var grid = $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 430,
            //define dataBound event handler

            toolbar: ["create"],
            columns: [
                //define template column with checkbox and attach click event handler
                { template: "<input type='checkbox' class='checkbox' />" },
                "ProductName", {
                    field: "UnitPrice",
                    title: "Unit Price",
                    format: "{0:c}",
                    width: "100px"
                }, {
                    field: "UnitsInStock",
                    title: "Units In Stock",
                    width: "100px"
                }, {
                    field: "Discontinued",
                    width: "100px"
                }, {
                    command: ["edit", "destroy"],
                    title: "&nbsp;",
                    width: "172px"
                }
            ],
            editable: "inline"
        }).data("kendoGrid");

        //bind click event to the checkbox
        grid.table.on("change", ".checkbox" , selectRow);

        $("#showSelection").bind("click", function () {
            var items = [];
            for(var i in checkedrows){
                if(checkedrows[i]){
                    items.push([i]);
                }
            }

            alert(JSON.stringify(itemss));
        });
    });

    var checkedrows = {};
    var itemss =[];
    //on click of the checkbox:
    function selectRow() {
        var checked = this.checked,
            row = $(this).closest("tr"),
            grid = $("#grid").data("kendoGrid"),
            dItem = grid.dataItem(row);

        checkedrows[dItem.id] = checked;
        if (checked) {
            itemss.push(dItem)
            //-select the row


        } 
        else
        {
            itemss.pop(dataItem);
        }
    }

数据项可以访问行获取，但是如何根据索引获取数据项。谢谢。

Answer 1

为了得到复选框，我用这个

var grid = $("#Grid").data("kendoGrid");

        grid.tbody.find("input:checked").closest("tr").each(function (index) {
            whatever you need done.
        });

Answer 2

2014 年接受的答案是正确的，但现在 api 已经改进。您可以使用以下代码段来获取数据项。请注意，选中的行也将被选中，因此会从 grid.select() 调用中返回。

//get the grid
var grid = $("#grid").data("kendoGrid");

// array to store the dataItems
var selected = [];

//get all selected rows (those which have the checkbox checked)  
grid.select().each(function(){

    //push the dataItem into the array
    selected.push(grid.dataItem(this));

});

Answer 3

您可以通过 存储所选项目uid，然后在需要时从数据源中获取它们。

选择处理程序：

function selectRow() {
    var checked = this.checked,
        row = $(this).closest("tr"),
        grid = $("#grid").data("kendoGrid"),
        dataItem = grid.dataItem(row);

    checkedrows[dataItem.uid] = checked;
}

要获取项目的序列化数组：

function getSerializedSelectedRows() {
    var items = [],
        item,
        grid = $("#grid").data("kendoGrid");

    for (var uid in checkedrows) {
        if (checkedrows.hasOwnProperty(uid)) {
            if (checkedrows[uid]) {
                item = grid.dataSource.getByUid(uid);
                items.push(item);
            }
        }
    }

    return JSON.stringify(items);
}

（演示）

Answer 4

你可以检查这个

var gridData2 = $("#CustomerAccountManagerKendoGrid2").data("kendoGrid").dataSource.data();  

var gEmpID2 = GetSelectedEmpID(gridData2); 


function GetSelectedEmpID(gridData) {  
     for (var i = 0; i < gridData.length; i++) {  
       if (gridData[i].SelectStatus == true) {  
         return gridData[i].GEmployeeGenInfoID;  
       }  
     }  
   }  

你也可以看到这个