在kendo grid 里要想通过checkbox 实现多选和权限，我们就要通过templeate 和input 标签对kendo grid 进行自定义

1. 在column 里面加入一列checkbox

{ title: " <input id='checkAll' type='checkbox' id='chkSelectAll' onclick='selectAllRow(this)' /> ", template: "<input type='checkbox' onclick='selectRow()' class='grid_checkbox' />", width: 60, filterable: false, sortable: false },

然后实现全选方法

function selectAllRow(ele) {

   var state = $(ele).is(':checked');

    if(state)

    {

        //selectRow();

        $('tr').find('[type=checkbox]').prop('checked', true);

        $('tr').removeClass("k-state-selected");

        $('tr').addClass("k-state-selected");

    }

    else

    {

         $('tr').find('[type=checkbox]').prop('checked', false);

          $('tr').removeClass("k-state-selected");

    }

as follow image:

code:

<!DOCTYPE html>

<html>

<head>

    <base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">

    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

    <title></title>

    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common-material.min.css" />

    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.min.css" />

    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.3.1028/js/jquery.min.js"></script>

    <script src="//kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>

</head>

<body>

        <div id="example">

            <div id="grid"></div>

          <script id="template" type="text/x-kendo-template">

                    <a class="k-button" href="javascript:void(0)" onclick="Editbtn()">EDIT</a>

          <a class="k-button" href="javascript:void(0)" onclick="Deletebtn()">DELETE</a>

                    </script>

            <script>

                $(document).ready(function () {

                    var crudServiceBaseUrl = "//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").kendoGrid({

                        dataSource: dataSource,

                        pageable: true,

                        height: 550,

                        toolbar: ["create", { template: kendo.template($("#template").html()) }],

                        columns: [

                          { title: " <input id='checkAll' type='checkbox' id='chkSelectAll' onclick='selectAllRow(this)' /> ", template: "<input type='checkbox' onclick='selectRow()' class='grid_checkbox' />", width: 60, filterable: false, sortable: false },

                            { field:"ProductName", title: "Product Name" },

                            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },

                            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },

                            { field: "Discontinued", width: "120px" },

                            ],

                        editable: "popup",

                       selectable: "multiple row",

                    });

                });

              function Editbtn(){

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

     var selectrow= cust_grid.items().index(cust_grid.select())+1;

     cust_grid.editRow($("#grid tr:eq("+selectrow+")"));

}

              function Deletebtn(){

                   if (confirm("Are you sure you want to delete these records?")) {

                   var cust_grid= $("#grid").data("kendoGrid")

                             var selectedrows = cust_grid.select();

                   cust_grid.dataSource.remove(cust_grid.dataItem(selectedrows));

                        }

              }

              function selectAllRow(ele) {

   var state = $(ele).is(':checked');

    if(state)

    {

        //selectRow();

        $('tr').find('[type=checkbox]').prop('checked', true);

        $('tr').removeClass("k-state-selected");

        $('tr').addClass("k-state-selected");

    }

    else

    {

         $('tr').find('[type=checkbox]').prop('checked', false);

          $('tr').removeClass("k-state-selected");

    } 

 }

            </script>

        </div>

</body>

</html>

demo: http://dojo.telerik.com/OPola

kndo grid：通过checkbox 实现多选和全选的更多相关文章

  1. CheckBox复选框全选以及获取值

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  3. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  4. 关于在repeater中的checkbox实行多选和全选

    今天项目中用到这一块,是一个b2b商城,业务是别人给客户留言后,客户从会员中心的留言管理中查看,用checkbox实行多选和全选后进行批量审核 首先在checkbox后加个hidden,作用见代码: ...

  5. 表格中的checkbox复选框 全选非全选 公共方法 及提交选中结果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. 使用JQuery获取被选中的checkbox的value值 以及全选、反选

    以下为使用JQuery获取input checkbox被选中的值代码: <html> <head> <meta charset="gbk"> & ...

  7. html checkbox 实现全选/取消全选

    html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...

  8. checkbox全选/取消全选

    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...

  9. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  10. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

随机推荐

  1. loadrunner如何监控windows系统的资源

    1.测试客户端与服务器之间的网络,保证通信畅通 2.开启服务器端Windows中的如下两个服务,可见系统服务中查找,cmd输入:services.msc 如下图: Remote Registry需改为 ...

  2. IE BHO的IObjectWithSite接口

    Internet Explorer的BHO的对象必须实现IObjectWithSite接口.该接口是IE用来对插件进行管理和通讯的一个接口,其有SetSite和GetSite两个方法,当IE加载和卸载 ...

  3. P3808 【模板】AC自动机（简单版）

    题目背景 这是一道简单的AC自动机模板题. 用于检测正确性以及算法常数. 为了防止卡OJ,在保证正确的基础上只有两组数据,请不要恶意提交. 管理员提示:本题数据内有重复的单词,且重复单词应该计算多次, ...

  4. Socket网络编程实例2

    两个程序通过“网络”交互数据就使用socket,它只负责两件事:建立连接,传递数据. 所有的数据传输接收,必须都使用byte格式 1.简单实例: #客户端 import socket client=s ...

  5. 虚拟机如何设置U盘启动项

    开始配置虚拟机时选"自定义"不要选"典型",在“SCSI设配器”选LSI logic ,(不是默认的那个):然后其他正常默认创建,虚拟机建好后,再添加U盘为虚拟 ...

  6. PKUWC2019 酱油记

    目录 PKUWC2019 酱油记 day0 Day1 Day2 Day3 Day4 PKUWC2019 酱油记 day0 早上从镇中出发到栎社机场,然后才了解到原来充电宝电脑是必须随身(原以为必须托运 ...

  7. [洛谷P3878][TJOI2010]分金币

    题目大意:把$n(n\leqslant30)$个数分成两组,两组个数最多相差$1$,求出两组元素差的绝对值最小使多少 题解:模拟退火 卡点:$\exp$中的两个数相减写反,导致$\exp(x)$中的$ ...

  8. [NOIP2017]宝藏 子集DP

    题面:[NOIP2017]宝藏 题面: 首先我们观察到,如果直接DP,因为每次转移的代价受上一个状态到底选了哪些边的影响,因此无法直接转移. 所以我们考虑分层DP,即每次强制现在加入的点的距离为k(可 ...

  9. BZOJ3864 & HDU4899：Hero meet devil——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3864 http://acm.hdu.edu.cn/showproblem.php?pid=4899 ...

  10. HDOJ(HDU).1035 Robot Motion (DFS)

    HDOJ(HDU).1035 Robot Motion [从零开始DFS(4)] 点我挑战题目 从零开始DFS HDOJ.1342 Lotto [从零开始DFS(0)] - DFS思想与框架/双重DF ...