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

标签 javascript jquery kendo-ui kendo-grid kendo-datasource

我有一个带有复选框列的剑道网格。当相应的复选框被选中时,我一直试图获取数据项行。单击一个按钮,我只需要在 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);
        }
    }

行获取可以通过dataItem访问,但是如何根据索引获取dataItem。谢谢。

最佳答案

为了只得到选中的框,我使用这个

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

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

关于javascript - 从剑道网格中获取选中的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23583867/

相关文章:

javascript - 在尝试在 Vue.js 中对它们执行任何操作之前,如何确保我想要操作的 DOM 元素已加载?

javascript - Angular - 错误 : Invalid state ref ''

javascript - 如何从来自同一域的 iframe 访问 JSON?

javascript - jQuery在一个公共(public)div中的单独段落中滑动而不滑动整个div

jquery - 当我点击其中的某些内容时,如何关闭 jQuery 对话框?

kendo-ui - Kendo UI编辑器-从编辑器菜单中删除特定工具

javascript - 为什么使用 return 关键字作为方法?

javascript - 使mongoDB用字符串替换单值数组

javascript - kendo-combo-box 与 angularjs

angular - kendo-numerictextbox' 不是已知元素