<!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. [Android Pro] Android中全局Application的onCreate多次调用问题

    一般来说Application的onCreate方法只会执行一次, 如果应用中采用多进程方式,oncreate方法会执行多次,根据不同的进程名字进行不同的初始化, 就是在application中多添加 ...

  2. minic 类型声明与变量定义句型处理

    #include "token_define.h" //这个文件是用来处理句型的,对于算术表达式都是放在前面的那个头文件中来处理 typedef struct _handle_tr ...

  3. Win7如何关闭操作中心的图标

    运行gpedit.msc,打开组策略编辑器   双击"删除操作中心图标",将其启用即可(重启可见)  

  4. centos下安装pyspider

    环境: * CentOS release 6.4 (Final) * Python 2.6.6 pip install pyspider   ,发现lxml没有安装好 直接sudo yum insta ...

  5. Entity Framework底层操作封装V2版本号（1）

    由于同志们一直给我提建议说.曾经发的版本号有问题.所以经过了我这一年多的使用和扩展,如今方法基本稳定了. 如今贴出来给大家使用: 首先上场的是数据库操作层: using System; using S ...

  6. Java中Object转化为int类型

    转自:http://blog.sina.com.cn/s/blog_5f8421fb010162kb.html Java中由Object类型转化为int类型时,不能直接转化,先是将Object类型转化 ...

  7. Spring bean注入方式

    版权声明:本文为博主原创文章,如需转载请标注转载地址. 博客地址:http://www.cnblogs.com/caoyc/p/5619525.html  Spring bean提供了3中注入方式:属 ...

  8. T-sql isnull函数介绍

    今天在给同事调取数据的时候,同事反馈说数据偏少,我仔细检查,发现sql语句条件都正确,逻辑没哪里不对,最后经过仔细排查,才发现问题出在null字段上 表中有一列是允许为null值,比如查询名字不为测试 ...

  9. 键盘enter按钮出发登陆事件

    $("#nameInput").focus();$(".txtUserName").keydown(function (event) { if (event.k ...

  10. Android中Context的总结及其用法

    在android中我们经常遇到这样的情况,在创建一个对象的时候往往需要传递一个this参数,比如:语句 MyView mView = new MyView(this),要求传递一个this参数,这个t ...