此篇文章主要记录在使用datagrid中常见的修改样式方式以及样式效果配图！！！！
一丶存在选中框的时候标题栏合并显示序号字段。
代码展示：
onLoadSuccess: function (data) {
//调整 按钮div与datagrid之间的3px间距
$('#j_contentButton').css('height', '43px');
//修改全选按钮
$(".datagrid-header-check").html("序号");
$(".datagrid-header-check").parent().prev().html("");
$(".datagrid-header-check").attr("style", "width:79px !important;font-weight: 700;height: 40px; line-height: 40px;font-size: 15px;")
},
效果图展示：
二丶不存在选中框的时候标题栏合并显示序号字段。
代码展示：
onLoadSuccess: function (data) {
//修改全选按钮
$(".datagrid-header-rownumber").html("序号");
$(".datagrid-header-rownumber").parent().next().html("");
},
效果图展示：
三丶左右布局时去除间隔空隙注意第5行 他才是关键其余只是为了展示效果
代码展示：
j_dgReceive = $("#j_dgReceive").datagrid({
iconCls: 'icon-save',
fit: true, // 自动适应父容器大小
fitColumns: false, //自动收缩列的大小
scrollbarSize: ,
rownumbers: true, //显示列号
nowrap: true, //如果为true，则在同一行中显示数据
animate: false,
border: false, //有边框
singleSelect: true,//多选
idField: 'id', //标识字段
pagination: true,//数据表格控件底部显示分页工具栏
pageSize: ,
pageList: [, , , , , , , ],
url: '/FeeManage_Areas/FeeStatistics/GetBJbyCondition',
queryParams: {
childId: childId,
},
效果图展示：
四丶实现单元格可编辑效果
代码展示：
{
title: '退费金额', field: 'refundMoney', align: 'center', width: , sortable: true,
editor: {
type: 'validatebox',
options: {
validType: 'checkDecN',
onBeforeValidate: function () {
$(this).attr('maxlength', );
$(this).on("keyup", function (event) {
var ary = this.value.match(/(\d+(\.\d{,})?)/);
this.value = ary == null ? '' : ary[];
});
}
}
},
},
效果图展示：
五丶合并单元格跨行款列标题布局
代码展示：
//活动列
columns: [[
{ title: '园区名称', field: 'parkName', rowspan: , align: 'center', width: , sortable: true, },
{ title: '姓名', field: 'childName', rowspan: , align: 'center', width: , sortable: true },
{ title: '年级', field: 'gradeNo', rowspan: , align: 'center', width: , sortable: true, },
{ title: '班级', field: 'classNo', rowspan: , align: 'center', width: , sortable: true, },
{ title: '保教费', colspan: , align: 'center', },
{ title: '学平险', colspan: , align: 'center', },
{ title: '餐费', colspan: , align: 'center', },
{ title: '休园管理费', colspan: , align: 'center', },
{ title: '押金', colspan: , align: 'center', },
{ title: '自定义费用', colspan: , align: 'center', },
{ title: '幼儿缴费总额', field: 'childTotalReceive', rowspan: , align: 'center', width: , sortable: true, },
{ title: '幼儿退费总额', field: 'childTotalRefund', rowspan: , align: 'center', width: , sortable: true, },
], [
//保教费
{ title: '缴费总额', field: 'bjfTotalReceive', align: 'center', width: , sortable: true, },
{ title: '退费总额', field: 'bjfTotalRefund', align: 'center', width: , sortable: true, },
//学平险
{ title: '缴费总额', field: 'xpxTotalReceive', align: 'center', width: , sortable: true, },
{ title: '退费总额', field: 'xpxTotalRefund', align: 'center', width: , sortable: true, },
//餐费
{ title: '缴费总额', field: 'cfTotalReceive', align: 'center', width: , sortable: true, },
{ title: '退费总额', field: 'cfTotalRefund', align: 'center', width: , sortable: true, },
//休园管理费
{ title: '缴费总额', field: 'xyglfTotalReceive', align: 'center', width: , sortable: true, },
{ title: '退费总额', field: 'xyglfTotalRefund', align: 'center', width: , sortable: true, },
//押金
{ title: '缴费总额', field: 'yjTotalReceive', align: 'center', width: , sortable: true, },
{ title: '退费总额', field: 'yjTotalRefund', align: 'center', width: , sortable: true, },
//自定义
{ title: '缴费总额', field: 'zdyTotalReceive', align: 'center', width: , sortable: true, },
{ title: '退费总额', field: 'zdyTotalRefund', align: 'center', width: , sortable: true, }, ]],
效果图展示：
六丶修改选中框样式
代码展示：
//冻结列
frozenColumns: [[
{
title: '', field: 'printFlag', align: 'center', sortable: true, width: ,
formatter: function (value, row, index) {
if (value == ) {
return "<span class='item-selected' onclick='specificUtil.CheckOrUnCheck(" + index + ",\"" + row.id + "\")'></span>";
} else {
return "<span class='item-unselected' onclick='specificUtil.CheckOrUnCheck(" + index + ",\"" + row.id + "\")'></span>";
}
},
},
{ title: '主键', field: 'id', sortable: true, align: 'center', width: , hidden: true, },
]], //3.选中或取消选中
CheckOrUnCheck: function (index, rowId) {
var rows = $("#j_dgExamine").datagrid("getRows");
if (initClick != undefined) {
var row = rows[index];
//提交数据
$.ajax({
type: 'POST',
url: '/Welfare_Areas/WelfareExamine/AccMark',
data: {
accId: rowId
},
dataType: 'json',
cache: false,
success: function (jsonData) {
myUitls.procAjaxMsg(jsonData, function () {
row.printFlag = row.printFlag == "" ? "" : "";
if (row.printFlag == "") {
$("#j_dgExamine").datagrid("updateRow", {
index: index,
row: row
})
$("#j_dgExamine").datagrid('beginEdit', index);
}
else {
$("#j_dgExamine").datagrid('endEdit', index);
$("#j_dgExamine").datagrid('cancelEdit', index);
} $(".datagrid-editable-input").attr("maxlength", )
}, function () {
myUitls.alertMsg(jsonData.Msg, '提示', null);
//取消确定按钮聚焦效果
myUitls.cancleFocus();
return;
});
}
});
}
},
样式代码：
/*有叉号样式*/
.item-selected {
width: 18px;
height: 18px;
float: right;
text-align: center;
background-image: url(../../../../images/area/Common/select_sel2.png);
cursor: pointer;
} /*无叉号样式*/
.item-unselected {
width: 18px;
height: 18px;
float: right;
text-align: center;
background-image: url(../../../../images/area/Common/select_nor2.png);
cursor: pointer;
}
onLoadSuccess: function (data) {
$(".datagrid-header-rownumber").html("序号");
$(".datagrid-header-rownumber").parent().next().css("display","none");
$(".datagrid-header-rownumber").attr("style", "width:65px !important;height:40px;line-height:40px;font-weight: 700;font-size: 14px;")
},
效果展示：
