<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CheckBox Selection on DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script>
$(function(){
initTableGMAL();
$("#detailcheckbox").unbind();
$("#listcheckbox").unbind();
//全选
$("#detailcheckbox").click(function () {

detailcheckboxClick();

});
$("#listcheckbox").click(function () {
btnClick();
});
});

function initTableGMAL() {
$("#dg_gmal").datagrid({
data:[{MAL_ID:'1',MAL_ZHName:'王红',op1:true,op11:true,op2:true,op22:true},
{MAL_ID:'2',MAL_ZHName:'小名',op1:true,op11:true,op2:true,op22:true}],
idField: 'MAL_ID', fit: false, fitColumns: true, singleSelect: true,
width: 637, height: 280,
rownumbers: true, nowrap: true, pagination: false,
checkOnSelect: false, selectOnCheck: false,
columns: [[

{ field: 'MAL_ZHName', title: '属性', width: 200, align: 'center' }
,
{ field: 'op1', title: ' 明细中显示：', width: 70, align: 'right' },
{
field: 'op11', title: '<input id=\"detailcheckbox\" type=\"checkbox\" name=\"aaa\" >', width: 30,
formatter: function (value, rec, rowIndex) {
return "<input type=\"checkbox\" name=\"PD\" value=\"" + rec.MAL_ID + "\" >";
}
},

{ field: 'op2', title: '列表中显示：', width: 70, align: 'right' },
{
field: 'op22', title: '<input id=\"listcheckbox\" type=\"checkbox\" name=\"bbb\" >', width: 30,
formatter: function (value, rec, rowIndex) {
return "<input type=\"checkbox\" name=\"PL\" value=\"" + rec.MAL_ID + "\" >";
}

}
]],
onLoadSuccess: function () {

}
});
}
function detailcheckboxClick(){

var obj = $('#detailcheckbox');
if ($(obj).attr('checked') == 'checked') {
$("input[name='PD']").attr("checked", 'checked');
} else {
$("input[name='PD']").removeAttr("checked");
}

$("#pdlist").val("");
var items = $("input[name='PD']:checked");
var result = "";
$.each(items, function (index, item) {

result = result + "|" + item.value;

});
$("#pdlist").val(result);

}

function btnClick()
{

var obj = $('#listcheckbox');
if ($(obj).attr('checked') == 'checked') {
$("input[name='PL']").attr("checked", 'checked');
} else {
$("input[name='PL']").removeAttr("checked");
}

$("#pllist").val("");
var items = $("input[name='PL']:checked");
var result = "";
$.each(items, function (index, item) {

result = result + "|" + item.value;

});
$("#pllist").val(result);

}
</script>
</head>
<body>
<div style="padding: 15px; overflow: hidden">
<form id="f_package_general" method="post">

<table class="tableForm" style="width: 100%; margin-left: 2px;">

<tr>
<td style="width: 80px;">显示配置：</td>
<td colspan="3" style="height: 280px;">
<table id="dg_gmal">
</table>
</td>
</tr>
</table>
<input type="hidden" id="pdlist" name="pdlist" value="">
<input type="hidden" id="pllist" name="pllist" value="">

</form>
</div>

</body>
</html>

datagrid多复选框的更多相关文章

  1. easyui datagrid 通过复选框删除新追加的数据问题

    之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返 ...

  2. DataGrid自定义复选框

    <DataGridTemplateColumn Header="选择" Width="Auto" > <!--列头模板--> <D ...

  3. easy ui　datagrid 让某行复选框不能选中

    //百度查找出来的 onLoadSuccess: function(data){//加载完毕后获取所有的checkbox遍历             if (data.rows.length > ...

  4. C# easyui datagrid 复选框填充。

    具体效果如下: 首页

  5. EASYUI DATAGRID 多列复选框CheckBox

    主要实现: 用的 easyui 1.3.2 实现多个复选框列,各列互不影响.能够实现全选.主要部门用红色标记了的. easyui datagrid 初始化: <script> functi ...

  6. easyUI 创建有复选框的table.datagrid

    table : function(data){ pt.v.table.datagrid({ // singleSelect:true, height:295, columns:[[ {field:'x ...

  7. Easyui datagrid 去掉表头的checkbox复选框

    $(".datagrid-header-check").html(""); 在onLoadSuccess中加入此行代码即可实现datagrid去除表头的chec ...

  8. easyui datagrid里的复选框置灰方法

    easyui datagrid里的复选框置灰方法: $('.datagrid input').prop('disabled',true);//复选框置灰

  9. easyui datagrid复选框控制单选

    使用easyui datagrid的时候,由于对数据表格操作太多,并且有单选和多选功能因此采用复选框.但是在单选的状态,使用CheckOnSelect和singleselect时发现,页面有明显延迟, ...

随机推荐

  1. DevExpress TreeList使用教程之绑定多级树

    DevExpress TreeList使用教程之绑定多级树   概述:TreeList控件可以同时显示树结构和其他数据列,即在一个列上建立父子关系展开或收缩,同时还可以显示其他列的内容.在TreeLi ...

  2. Sublimetext 3 经常使用插件

    今天配了一下开发工具,事实上主要是想配置svn插件,可是后来查了下,发现sublimet的插件库还是蛮丰富的.顺手安了一些别的插件进去. 1,Svn插件安装的一些问题 首先ctrl+shift+p,打 ...

  3. linux中mysql主从备份

    在centos中安装mysql详细步骤说明 条件:需要两个虚拟机,一台为主服务器master,一台为从服务器slave 1     在master主服务中,创建用于同步的用户 mysql> gr ...

  4. 算法笔记_081:蓝桥杯练习 算法提高 矩阵乘法（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 有n个矩阵,大小分别为a0*a1, a1*a2, a2*a3, ..., a[n-1]*a[n],现要将它们依次相乘,只能使用结合率,求最 ...

  5. angular 禁止事件冒泡 和 默认行为

    事件冒泡和事件捕捉一直以来都是被讨论的话题,也许大家平时在工作中没有遇到过需要解决事件冒泡的情况举个例子: <body ng-click="fun1()"> <d ...

  6. OpenERP(odoo)开发实例之搜索检索过去3个月的数据

    转自:http://www.chinamaker.net/ OpenERP(odoo)开发实例之搜索过滤:检索过去3个月的数据 解决这个问题的重点在于 relativedelta 的应用 示例代码如下 ...

  7. Machine Learning：PageRank算法

    1. PageRank算法概述 PageRank,即网页排名,又称网页级别.Google左側排名或佩奇排名.         在谷歌主导互联网搜索之前, 多数搜索引擎採用的排序方法, 是以被搜索词语在 ...

  8. shell脚本中执行mysql 语句,去除warning using a password on the command line interface can be insecure信息

    方法二:使用mysql参数的方法 mysql -u$user -p$pass -D $db -e "select host from user;"当然,可以通过将传参的方式来传递 ...

  9. Mac 下安装Ruby环境(转)

    步骤1 - 安装 RVM RVM 是干什么的这里就不解释了,后面你将会慢慢搞明白. $ curl -L https://get.rvm.io | bash -s stable 期间可能会问你sudo管 ...

  10. php引用(&)变量引用，函数引用，对象引用和参数引用用法

    php引用(&)变量引用,函数引用,对象引用和参数引用用法   php的引用(就是在变量或者函数.对象等前面加上&符号) 在PHP 中引用的意思是:不同的名字访问同一个变量内容.与C语 ...