在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. 【week2】 四则运算改进

    四则运算满足简单加减乘除,以及包含括号的复杂四则运算. 代码描述: 1.采用random随机数产生要参与计算的数字,以及运算符号 2.采用Scanner获取控制台输入的结果,与计算出来的结果进行比对, ...

  2. MySQL加密算法

    1.不可逆加密: PASSWORD(),ENCRYPT(,),MD5(),SHA5(). 2.可逆的加密算法: ENCODE(,)   DECODE(,):加密解密字符串.该函数有两个参数:被加密或解 ...

  3. service(ServletRequest req, ServletResponse res) 通用servlet 可以接受任意类型的请求 用于扩展

    service(ServletRequest req, ServletResponse res)   通用servlet 可以接受任意类型的请求  用于扩展

  4. java 当读取的结果为-1时候说明已经读取结束了

    当读取的结果为-1时候说明已经读取结束了

  5. 【bzoj2091】[Poi2010]The Minima Game dp

    题目描述 给出N个正整数,AB两个人轮流取数,A先取.每次可以取任意多个数,直到N个数都被取走.每次获得的得分为取的数中的最小值,A和B的策略都是尽可能使得自己的得分减去对手的得分更大.在这样的情况下 ...

  6. bzoj 1207: [HNOI2004]打鼹鼠 （dp）

    var n,m,i,j,ans:longint; x,y,time,f:..]of longint; begin readln(n,m); to m do readln(time[i],x[i],y[ ...

  7. bzoj 1797: [Ahoi2009]Mincut 最小割 （网络流）

    太神了直接看了hzwer的题解,有个新认识,一条路径上满流的一定是这条路径上所有边的最小值. type arr=record toward,next,cap,from:longint; end; co ...

  8. 122. Best Time to Buy and Sell Stock II (Array)

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  9. ural1297 求最长回文子串 | 后缀数组

    #include<cstdio> #include<algorithm> #include<cstring> #define N 20005 using names ...

  10. 数据库sharding,横向扩展

    学习资料如下: http://www.cnblogs.com/skyme/p/3459765.html http://my.oschina.net/anthonyyau/blog/307165 htt ...