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 复选框 全选都选 ...
随机推荐
- Jrebel 工具学习
Jrebel 可快速实现热部署,节省了大量重启时间,提高了个人开发效率.网上可搜索到破解版. http://baike.baidu.com/link?url=wuzv7Wa7SMUKltJr-dyta ...
- DEDE去掉会员登录及注册验证码的方法
1.登录打开member/index_do.php 删除245-250行,即: if(strtolower($vdcode)!=$svali || $svali=='') { ResetVdValue ...
- MongoDb企业应用实战(一) 写在MongoDB应用介绍之前(ii)
上一篇: MongoDb企业应用实战(一) 写在MongoDB应用介绍之前(i) 有段时间没跟大家去分享和探讨过一些问题,分享过一些经验了(失败过的,痛苦过的才最有看点啊,不知道各位同仁们怎么去看这个 ...
- Delphi中Sender对象的知识
Sender是一个TObject类型的参数,它告诉Delphi哪个控件接收这个事件并调用相应的处理过程.你可以编写一个单一的事件处理句柄,通过Sender参数和IF…THEN…语句或者CASE语句配合 ...
- 第63天：json的两种声明方式
一. json 两种声明方式 1. 对象声明 var json = {width:100,height:100} 2. 数组声明 var man = [ // 数组的 js ...
- windows 2008 iis7 上传大文件限制的真正解决办法
以前做了一个网站 ,当时本机测试时上传文件大小没有问题,上G也应该可以,可是放在服务器后只能上传小于30M以下文件,当时基本需要也基本在30M以下,就没有管,后在网上发现原来是window2008本身 ...
- HDU 3879 Base Station(最大权闭合子图)
将第i个用户和他需要的基站连边,转化成求二分图的最大权闭合子图. 答案=正权点之和-最小割. # include <cstdio> # include <cstring> # ...
- jq的$.each遍历数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- shell运用
在shell脚本一 中,我讨论了shell脚本的语法规范,shell脚本的变量,以及shell脚本的测试语句. 仅仅懂得这些只能写简单的脚本,在简单的脚本中各条语句按顺序执行,从而实现自动化的管理,顺 ...
- What is the bitmap index?
示例执行计划: postgres ; QUERY PLAN ---------------------------------------------------------------------- ...