此篇文章主要記錄在使用datagrid中常見的修改樣式方式以及樣式效果配圖！！！！
一丶存在選中框的時候标題欄合并顯示序号字段。
代碼展示：
1 onLoadSuccess: function (data) {
2 //調整 按鈕div與datagrid之間的3px間距
3 $('#j_contentButton').css('height', '43px');
4 //修改全選按鈕
5 $(".datagrid-header-check").html("序号");
6 $(".datagrid-header-check").parent().prev().html("");
7 $(".datagrid-header-check").attr("style", "width:79px !important;font-weight: 700;height: 40px; line-height: 40px;font-size: 15px;")
8 }, 效果圖展示：
二丶不存在選中框的時候标題欄合并顯示序号字段。
onLoadSuccess: function (data) {
//修改全選按鈕
$(".datagrid-header-rownumber").html("序号");
$(".datagrid-header-rownumber").parent().next().html("");
}, 
三丶左右布局時去除間隔空隙注意第5行 他才是關鍵其餘隻是為了展示效果
代碼展示：
1 j_dgReceive = $("#j_dgReceive").datagrid({
2 iconCls: 'icon-save',
3 fit: true, // 自動适應父容器大小
4 fitColumns: false, //自動收縮列的大小
5 scrollbarSize: 0,
6 rownumbers: true, //顯示列号
7 nowrap: true, //如果為true，則在同一行中顯示資料
8 animate: false,
9 border: false, //有邊框
10 singleSelect: true,//多選
11 idField: 'id', //辨別字段
12 pagination: true,//資料表格控件底部顯示分頁工具欄
13 pageSize: 15,
14 pageList: [5, 10, 15, 20, 25, 30, 50, 100],
15 url: '/FeeManage_Areas/FeeStatistics/GetBJbyCondition',
16 queryParams: {
17 childId: childId,
18 }, 四丶實作單元格可編輯效果
代碼展示：
1 {
2 title: '退費金額', field: 'refundMoney', align: 'center', width: 150, sortable: true,
3 editor: {
4 type: 'validatebox',
5 options: {
6 validType: 'checkDecN',
7 onBeforeValidate: function () {
8 $(this).attr('maxlength', 10);
9 $(this).on("keyup", function (event) {
10 var ary = this.value.match(/(\d+(\.\d{0,2})?)/);
11 this.value = ary == null ? '' : ary[0];
12 });
13 }
14
15 }
16 },
17 }, 五丶合并單元格跨行款列标題布局
1 //活動列
2 columns: [[
3 { title: '園區名稱', field: 'parkName', rowspan: 2, align: 'center', width: 150, sortable: true, },
4 { title: '姓名', field: 'childName', rowspan: 2, align: 'center', width: 150, sortable: true },
5 { title: '年級', field: 'gradeNo', rowspan: 2, align: 'center', width: 150, sortable: true, },
6 { title: '班級', field: 'classNo', rowspan: 2, align: 'center', width: 150, sortable: true, },
7 { title: '保教費', colspan: 2, align: 'center', },
8 { title: '學平險', colspan: 2, align: 'center', },
9 { title: '餐費', colspan: 2, align: 'center', },
10 { title: '休園管理費', colspan: 2, align: 'center', },
11 { title: '押金', colspan: 2, align: 'center', },
12 { title: '自定義費用', colspan: 2, align: 'center', },
13 { title: '幼兒繳費總額', field: 'childTotalReceive', rowspan: 2, align: 'center', width: 150, sortable: true, },
14 { title: '幼兒退費總額', field: 'childTotalRefund', rowspan: 2, align: 'center', width: 150, sortable: true, },
15 ], [
16 //保教費
17 { title: '繳費總額', field: 'bjfTotalReceive', align: 'center', width: 150, sortable: true, },
18 { title: '退費總額', field: 'bjfTotalRefund', align: 'center', width: 150, sortable: true, },
19 //學平險
20 { title: '繳費總額', field: 'xpxTotalReceive', align: 'center', width: 150, sortable: true, },
21 { title: '退費總額', field: 'xpxTotalRefund', align: 'center', width: 150, sortable: true, },
22 //餐費
23 { title: '繳費總額', field: 'cfTotalReceive', align: 'center', width: 150, sortable: true, },
24 { title: '退費總額', field: 'cfTotalRefund', align: 'center', width: 150, sortable: true, },
25 //休園管理費
26 { title: '繳費總額', field: 'xyglfTotalReceive', align: 'center', width: 150, sortable: true, },
27 { title: '退費總額', field: 'xyglfTotalRefund', align: 'center', width: 150, sortable: true, },
28 //押金
29 { title: '繳費總額', field: 'yjTotalReceive', align: 'center', width: 150, sortable: true, },
30 { title: '退費總額', field: 'yjTotalRefund', align: 'center', width: 150, sortable: true, },
31 //自定義
32 { title: '繳費總額', field: 'zdyTotalReceive', align: 'center', width: 150, sortable: true, },
33 { title: '退費總額', field: 'zdyTotalRefund', align: 'center', width: 150, sortable: true, },
34
35 ]], 六丶修改選中框樣式
代碼展示：
//當機列
frozenColumns: [[
{
title: '', field: 'printFlag', align: 'center', sortable: true, width: 35,
formatter: function (value, row, index) {
if (value == 1) {
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: 50, 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 == "0" ? "1" : "0";
if (row.printFlag == "1") {
$("#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", 50)
}, function () {
myUitls.alertMsg(jsonData.Msg, '提示', null);
//取消确定按鈕聚焦效果
myUitls.cancleFocus();
return;
});
}
});
}
}, View Code
樣式代碼：
/*有叉号樣式*/
.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;")
}, 效果展示：
作者：
YanBigFeg——
顔秉鋒出處：
http://www.cnblogs.com/yanbigfeg本文版權歸作者和部落格園共有，歡迎轉載，轉載請标明出處。如果您覺得本篇博文對您有所收獲，覺得小弟還算用心，請點選右下角的 [推薦]，謝謝！