Telerik Kendo --Grid之CheckBox 多选 toolbar监听编辑（ASP.NET MVC）

来源：互联网发布：手机麻将软件制作编辑：程序博客网时间：2024/04/27 23:43

备注：主要介绍的是其中一种思路，代码可能有部分不全或者失误

CHTML:

<span style="color:#009900;"><!-- list--></span>    <div id="myGrid"></div>

<span style="color:#006600;"><!--toolBar--></span><script id='cust_toolbar' type='text/x-kendo-template'>            <div class="col-md-10 clear-padding">            <a class="k-button k-button-icontext k-grid-add k-cust-add" data-resx="text:addNewSchedule">                <span class="k-icon k-add"></span>Add New Schedule            </a>        </div>              <div class="col-md-2 clear-padding">            <a class="k-button k-button-icontext k-grid-delete k-cust-delete">                <span class="k-icon k-delete"></span>Remove            </a>            <a class="k-button k-button-icontext k-grid-update k-cust-edit">                <span class="k-icon k-edit"></span>Clone            </a>        </div>           </script>

JS:

初始化kendo grid 表：

//initial Telerik Grid control                    var gridDataSource = new kendo.data.DataSource({                        data: someDateObject,                        pageSize: 15                    });                    var $myGrid = $("#myGrid");                    $myGrid.kendoGrid({                        toolbar: [                             { template: kendo.template($("#cust_toolbar").html()) }                        ],                        dataSource: gridDataSource,                        height: 500,                        groupable: true,                        sortable: true,                        filterable: {                            extra: false                        },                        pageable: {                            refresh: true,                            pageSizes: true,                            buttonCount: 5                        },                        columns: [                        {                            field: "ProductName",                            title: "Name",                            width: 300,                            filterable: true,                            template: '<a href="/Schedule/Edit/#= ID #">#= ProductName #</a>'                        }, {                            field: "Location",                            title: "Location",                            width: 400,                            filterable: true,                        }, {                            field: "EffectiveDate",                            title: "Date",                            width: 200,                            filterable: true,                        }, {                            title: " ",  //checkbox                            width: 150,                            template: "<input class='check_row' value='#= ID #' type='checkbox' />",                            filterable: false                        }],                    });

checkbox 监听:（监听checkbox的选定状态disable和enable两个按钮（.k-cust-edit, .k-cust-delete））

$(".check_row").change(function () {                        app.schedule.selRows = $(".check_row:checked");                        if (app.schedule.selRows.length === 0) {                            $(".k-cust-edit").addClass("not-active");                            $(".k-cust-delete").addClass("not-active");                        } else {                            if ($(".k-cust-edit").hasClass("not-active")) {                                $(".k-cust-edit").removeClass("not-active");                            }                            if ($(".k-cust-delete").hasClass("not-active")) {                                $(".k-cust-delete").removeClass("not-active");                            }                        }                    });

css: not-active

.not-active {   pointer-events: none;   cursor: default;}

toolbar 按钮监听：

//Reomve the selected records        $(".k-cust-delete", grid.element).off('click').on("click", function (ev) {            selRows = $(".check_row:checked");           //do something..            }        });        $(".k-cust-edit").addClass("not-active");        //Clone the selected records        $(".k-cust-edit", grid.element).off('click').on("click", function (ev) {            app.schedule.selRows = $(".check_row:checked");            //do something..            }        });

0 0