在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. 转 PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)

    PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)   通过curl_setopt()函数可以方便快捷的抓取网页(采集很方便),curl_setopt 是php的一个 ...

  2. java-实用的sql语句

    一.在数据库创建表格的SQL语句 1,创建一个link表格,包含属性:lid  主键,title 标题,  imgpath 图片地址 , url  网址  , info 说明,  isshow 显示1 ...

  3. 如何设计好的RESTful API之安全性

    保证RESTful API的安全性,主要包括三大方面: a) 对客户端做身份认证 b) 对敏感的数据做加密,并且防止篡改 c) 身份认证之后的授权 1.对客户端做身份认证,有几种常见的做法: 1)在请 ...

  4. 使用Gulp实现网页自动刷新：gulp-connect

    入门指南 1. 全局安装 gulp: npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: npm install --save-dev ...

  5. Luogu3936 Coloring（模拟退火）

    裸退火,每次交换两个格子即可.依旧不会调参,稍微抄了点参数并且把随机种子设成了一个神奇的数字终于过掉了. #include<iostream> #include<cstdio> ...

  6. Vika and Segments - CF610D

    Vika has an infinite sheet of squared paper. Initially all squares are white. She introduced a two-d ...

  7. [JLOI2014]松鼠的新家 树上差分

    差分 一开始竟然想分情况讨论来差分,然后发现各自情况要分析, 就是为了解决中间节点重复计算的问题, 结果 最后一想,中间重复计算了一次,那我最后减掉不就好了么,,, 那这就是一道差分裸题了(这是唯一不 ...

  8. BZOJ4517 & 洛谷4071：[SDOI2016]排列计数——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4517 https://www.luogu.org/problemnew/show/P4071 求有 ...

  9. BZOJ2724：[Violet 6]蒲公英——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2724 输入格式 第一行两个整数n,m,表示有n株蒲公英,m次询问. 接下来一行 n 个空格分隔的整数 ...

  10. BZOJ3223：文艺平衡树——超详细题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=3223 题面复制于洛谷. 题目背景 这是一道经典的Splay模板题——文艺平衡树. 题目描述 您需要写 ...