<!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,
637, height: 280,
rownumbers: true, nowrap: true, pagination: false,
checkOnSelect: false, selectOnCheck: false,
columns: [[
{ field: 'MAL_ZHName', title: '属性', 200, align: 'center' }
,
{ field: 'op1', title: ' 明细中显示：', 70, align: 'right' },
{
field: 'op11', title: '<input id="detailcheckbox" type="checkbox" name="aaa" >', 30,
formatter: function (value, rec, rowIndex) {
return "<input type="checkbox" name="PD" value="" + rec.MAL_ID + "" >";
}
},
{ field: 'op2', title: '列表中显示：', 70, align: 'right' },
{
field: 'op22', title: '<input id="listcheckbox" type="checkbox" name="bbb" >', 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=" 100%; margin-left: 2px;">
<tr>
<td style=" 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>