Question

如何在Kendo UI网格中将复选框限制为5。

我正在使用带有复选框的Kendo UI网格。我想将复选框选择限制为5

请找到随附的代码

$(function () {
    $("#grid").kendoGrid({
        dataSource: {
            pageSize: 10,
            transport: {
                read: {
                    url: "url",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: {
                            type: "string"
                        },
                        Title: {
                            type: "string"
                        },                            
                        OrderDate: {
                            type: "date",
                            defaultValue: null
                        }                            
                    }
                }
            }
        },
        pageable: true,            
        persistSelection: true,                       
        change: onChange,         


        columns: [
            { selectable: true, width: "50px" },
            { field: "Title", title: "Title" },
            { field: "OrderDate", title: "Order Date", format: "{0:MM/dd/yyyy}", encoded: true }                
        ]
    });



});
function onChange(arg) {        
    //console.log("The selected product ids are: [" + this.selectedKeyNames().join(", ") + "]");
}

预先感谢

Answer 1

这是根据您的要求测试的代码，唯一的不同是使用模板创建的复选框列。

参考链接：https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/grid-selection-checkbox

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>
<button id="showSelection">Show selected IDs</button>
<script>
$(document).ready(function () {
    //DataSource definition
    var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/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
        dataBound: onDataBound,
        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("click", ".checkbox" , selectRow);

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

        alert(checked);
    });
});

var checkedIds = {};

//on click of the checkbox:
function selectRow() {

 //// *********Prevent to select more than 5 record*************************

  if(Object.keys(checkedIds).length>=5)
  {
        this.checked=false;
  }

  /// **********************************
    var checked = this.checked,
    row = $(this).closest("tr"),
    grid = $("#grid").data("kendoGrid"),
    dataItem = grid.dataItem(row);

    checkedIds[dataItem.id] = checked;
    if (checked) {
        //-select the row
        row.addClass("k-state-selected");
        } else {
        //-remove selection
        row.removeClass("k-state-selected");
    }
}

//on dataBound event restore previous selected rows:
function onDataBound(e) {
    var view = this.dataSource.view();
    for(var i = 0; i < view.length;i++){
        if(checkedIds[view[i].id]){
            this.tbody.find("tr[data-uid='" + view[i].uid + "']")
            .addClass("k-state-selected")
            .find(".checkbox")
            .attr("checked","checked");
        }
    }
}
</script>
 </body>
 </html>

如果您有任何疑问或疑虑，请告诉我。

如何在Kendo UI网格中将复选框限制为5

1 个答案: