版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LJX_ahut/article/details/77651968
使用JQuery EasyUI时，遇到这样一个需求：数据表格中的行只能单选，而且每行的第一列要有复选框，并且隐藏表头的复选框。
使用EasyUI框架自带的datagrid组件可以设置属性checkbox，这样的话每行包括表头都会在第一列显示复选框，若是要隐藏表头的复选框，需要为datagrid添加时间onLoadSuccess，如下代码所示。
$dgCustomer = $("#dgCustomer").datagrid({
idField:'id',fit:true,
fitColumns:true,
pageSize:20,
border:false,
rownumbers:true,
singleSelect:false,
checkOnSelect:true,
striped:true,
pagination:true,
url:contextPath+'/CRMCustInfo/maintenances/list',
method:'get',
/**
* 查询参数
*/
queryParams:{
custName:$('#custName').val(),
cardNo:$('#cardNoOrIdNo').val(),
orgId:$('#oid').val(),
containSub:$('#containSub').is(':checked')
},
/**
* 设置数据表格行的格式行
* @param index 该行的索引
* @param row 与行索引对应的行记录
* @returns {String} 返回特有的格式设置，如背景色，字体颜色等。
*/
// rowStyler: function(index,row){
// if (row.idNo==null){
// return 'background-color:#6293BB;';
// }
// if (row.cardNo==''){
// return 'background-color:#6293BB;';
// }
// if (row.custNo==''){
// return 'background-color:#6293BB;';
// }
// },
toolbar:'#tbCustomer',
/**
* 设置数据表格格式
*/
columns:[[
{checkbox:true},
{field:'custName',title:'姓名',width:100,sortable:true},
{field:'idNo',title:'身份证号码',width:100,sortable:true,
/**
* 设置列的格式
* @param value 该字段的值
* @param row 该行的数据
* @param index 改行所在的索引
* @returns {String} 返回自定义单元格样式字符串 如 'background-color:#d8dce7;'
*/
styler: function(value,row,index){
if (value ==null ){
return 'background-color:#d8dce7;';//background-color:#ffee00;
}
}
},
{field:'cardNo',title:'银行卡号码',width:100,sortable:true,
styler: function(value,row,index){
if (value ==null ){
return 'background-color:#d8dce7;';//background-color:#ffee00;
}
}
},
{field:'custNo',title:'客户号',width:100,sortable:true,
styler: function(value,row,index){
if (value ==null ){
return 'background-color:#d8dce7;';//background-color:#ffee00;
}
}},
{field:'custLevel',title:'客户等级',width:100,sortable:true,
formatter: formatCustLevel,
styler: function(value,row,index){
if (value < 3){
return 'color:red;';//background-color:#ffee00;
}
else if (value >= 3 && value<6){
return 'color:blue;';
}
else{
return 'color:green';
}
}
},
{field:'realName',title:'维护人',width:100,sortable:true},
{field:'lastUpdatedDate',title:'维护时间',width:100,sortable:true,formatter: formatDate}
]],
onSelect : function(rowIndex, rowData)
{
enableToolbar();
},
onUnselect : function(rowIndex, rowData)
{
enableToolbar();
},
onSelectAll : function(rows)
{
enableToolbar();
},
onUnselectAll : function(rows)
{
enableToolbar();
},
onLoadSuccess: function () { //隐藏表头的checkbox
$("#dgCustomer").parent().find("div .datagrid-header-check").children("input[type=\"checkbox\"]").eq(0).attr("style", "display:none;");
}});