kndo grid：通过checkbox 实现多选和全选
在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 实现多选和全选的更多相关文章
- CheckBox复选框全选以及获取值
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- 关于在repeater中的checkbox实行多选和全选
今天项目中用到这一块,是一个b2b商城,业务是别人给客户留言后,客户从会员中心的留言管理中查看,用checkbox实行多选和全选后进行批量审核 首先在checkbox后加个hidden,作用见代码: ...
- 表格中的checkbox复选框 全选非全选 公共方法 及提交选中结果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 使用JQuery获取被选中的checkbox的value值 以及全选、反选
以下为使用JQuery获取input checkbox被选中的值代码: <html> <head> <meta charset="gbk"> & ...
- html checkbox 实现全选/取消全选
html checkbox 实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...
- checkbox全选/取消全选
//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...
- 【转载】checkbox实现全选/取消全选
比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
随机推荐
- IIS安装出现“安装程序无法复制文件CONVLOG.EX_”的解决办法
重新安装了一次IIS,结果就在重新安装的时候,出现安装程序无法复制文件CONVLOG.EX_,上网找了找资料,是因为secedit.sdb 数据库的问题,既然是因为这个文件的问题,那么我们就可以使用w ...
- 查询MySQL某字段相同值得重复数据
1.先查询重复的id: SELECT book_id,COUNT(*) AS COUNT FROM xs_book_source WHERE site_id=5 GROUP BY book_id HA ...
- 在临床医学里面，bid、tid、qid和q3w是什么意思啊？？这些缩写的全称是怎么写呢？？
{ value: 'QD', name: 'QD 每日一次' }, { value: 'BID', name: 'BID 每日两次' }, { value: 'TID', name: 'TID 每日三 ...
- 第30天：DOM对象操作
JS包括三部分:ECMAscript.DOM(文档对象).BOM(浏览器对象) 一.DOM(文档对象)DOM树节点(元素.属性.标签.标记等都是节点) 二.访问节点 documment.getElem ...
- 能选择日期范围js控件
html页面中使用日期控件是常有的事,好控件能使用开发变的快捷,下面是在开发过程中发现的几款日期控件,比较不错,收藏 1.基于bootstrap的jQuery日期范围选择插件 2.jQuery多功能日 ...
- 在Ubuntu系统下编译arcsim仿真器
首先,用tar zxvf arcsim-0.2.1.tar.gz 将软件包解压 然后,打开里面的INSTALL文件,按照里面的步骤一步一步安装库.Ubuntu13.04下 1.BLAS sudo ap ...
- Keil MDK中Image~~RW_IRAM1~~ZI~~Limit（~表示$）
ARM程序的组成 此处所说的“ARM程序”是指在ARM系统中正在执行的程序,而非保存在ROM中的bin映像(image)文件,这一点清注意区别. 一个ARM程序包含3部分:RO, ...
- 2011 Multi-University Training Contest 6 - Host by JLU
打了4hours,做出一道题...太菜了.rank:45/107 开场看B,题目看不懂...3hours半才发现i<=N-1,不是i<=x-1.然而还是不会. 看到J有人过了,发现是个简单 ...
- CF484E Sign on Fence && [国家集训队]middle
CF484E Sign on Fence #include<bits/stdc++.h> #define RG register #define IL inline #define _ 1 ...
- BZOJ2668：[CQOI2012]交换棋子——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=2668 https://www.luogu.org/problemnew/show/P3159#sub ...