此篇文章主要記錄在使用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; }); } }); } },
樣式代碼：
/*有叉號樣式*/ .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;")
},
效果展示：
