【專案實戰】---EasyUI DataGrid單元格合併
前言:
怎樣讓表格內容清楚明白,不冗餘繁雜,這就要對於datagrid單元格進行合併。整個的表格效果更清楚,做過了再回頭看看還是很有必要的。
核心程式碼:
$('#VehicleLoadingGrid').datagrid({
fitColumns: true,
rownumbers: true,
dataType: 'json',
method: 'post',
pagination: true,
pageSize: 10,
pageList: [10, 20, 30],
loadMsg: "正在載入資料,請稍候...",
url: '/VehicleLoading/GetVehicleLoadingInfoByPage',
queryParams: {
"strPlateNumber": strPlateNumber,
"strOrderNumber": strOrderNumber,
"InvoiceNumber": InvoiceNumber,
"strLoadTime": strLoadTime,
},
columns: [[
{ field: 'PlateNumber', title: '**', width: 50, align: 'left', halign: 'center' },
{ field: 'OrderNumber', title: '**', width: 50, align: 'left', halign: 'center' },
{ field: 'InvoiceNumber', title: '**', width: 50, align: 'left', halign: 'center' },
{ field: 'AirType', title: '**', width: 30, align: 'left', halign: 'center' },
{ field: 'Quantity_Send', title: '**', width: 30, align: 'left', halign: 'center' },
{ field: 'DriverName', title: '**', width: 30, align: 'left', halign: 'center' },
{ field: 'DeliverUserName', title: '**', width: 30, align: 'left', halign: 'center' },
{ field: 'LoadingTime', title: '**', width: 50, align: 'left', halign: 'center' }
]],
//核心:
onLoadSuccess: function (data) {
if (data.rows.length > 0) {
//呼叫mergeCellsByField()合併單元格
mergeCellsByField("VehicleLoadingGrid", "PlateNumber,InvoiceNumber");
}
}
/*
tableID:表格的ID
colList:需要合併的列,如果有多個,可以以,分開
*/
function mergeCellsByField(tableID, colList) {
var ColArray = colList.split(",");
var tTable = $("#" + tableID);
var TableRowCnts = tTable.datagrid("getRows").length;
var tmpA;
var tmpB;
var PerTxt = "";
var CurTxt = "";
var alertStr = "";
for (j = ColArray.length - 1; j >= 0; j--) {
PerTxt = "";
tmpA = 1;
tmpB = 0;
for (i = 0; i <= TableRowCnts; i++) {
if (i == TableRowCnts) {
CurTxt = "";
}
else {
CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
}
if (PerTxt == CurTxt) {
tmpA += 1;
}
else {
tmpB += tmpA;
tTable.datagrid("mergeCells", {
index: i - tmpA,
field: ColArray[j], //合併欄位
rowspan: tmpA,
colspan: null
});
tTable.datagrid("mergeCells", { //根據ColArray[j]進行合併
index: i - tmpA,
field: "Ideparture",
rowspan: tmpA,
colspan: null
});
tmpA = 1;
}
PerTxt = CurTxt;
}
}
}
效果:
總結:
第二段的程式碼具用通用性,只要把對應的表格id和要合併列的field傳入到方法中即可,這個方法是站在“度娘”的肩膀上實現的,很是感謝,同時如果大家有更簡便的方法還望多多分享哈。
相關文章
- EasyUI DataGrid 單元格編輯 註釋版UI
- 關於Easyui的datagrid的可編輯單元格和合並單元格UI
- Html合併單元格HTML
- Datagrid擴充套件方法onClickCell{easyui-datagrid-擴充-支援單元格編輯}套件UI
- vue表格合併單元格Vue
- EasyExcel-合併單元格Excel
- js 表格合併單元格JS
- Html Table 合併單元格HTML
- GridView合併單元格View
- [轉帖]DataGrid顯示雙層表頭,即可實現合併單元格問題
- easyui datagrid動態設定行、列、單元格不允許編輯UI
- js實現table合併相同列單元格JS
- 【專案實戰】---EasyUI資料表格的行風格UI
- PowerBuilder---合併相同單元格UI
- 自定義的單元格合併
- element中表格合併單元格
- Element-plus 合併單元格
- Bootstrap-table 合併相同單元格boot
- excel合併的單元格重新填充Excel
- WPF DataGrid實現單擊單元格直接編輯
- Java Servlet 實現合併多單元格匯出ExcelJavaServletExcel
- postgresql高階應用之合併單元格SQL
- td單元格合併程式碼例項
- Excel合併單元格的兩種簡單方法Excel
- elementui表格動態資料單元格合併UI
- elementui——表格的相同內容單元格合併UI
- table表格單元格合併程式碼例項
- JS動態生成表格後 合併單元格JS
- Excel合併單元格資料的方法教程Excel
- el-table自定義合併單元格後,單元格錯亂的問題
- 效率爆表!EasyExcel合併單元格這樣實現才是yydsExcel
- table表格單元格橫向和屬性合併
- springboot-實現excle檔案匯出的單元格相同內容合併Spring Boot
- NPOI擴充套件--判斷指定單元格是否為合併單元格和輸出該單元格的行列跨度(維度)套件
- JavaScript合併表格中的內容相同的單元格JavaScript
- jQuery EasyUI datagrid實現本地分頁簡單介紹jQueryUI
- excel合併單元格快捷鍵 excel多個表格內容合併到一起Excel
- 關於HTML表格合併單元格的靈魂拷問HTML