JQuery EasyUI DataGrid 동적 병합 셀
20497 단어 jquery easyui
/**
* EasyUI DataGrid
* @param fldList table id
* @param fldList , ( :"name,department,office");
*/
function MergeCells(tableID, fldList) {
var Arr = fldList.split(",");
var dg = $('#' + tableID);
var fldName;
var RowCount = dg.datagrid("getRows").length;
var span;
var PerValue = "";
var CurValue = "";
var length = Arr.length - 1;
for (i = length; i >= 0; i--) {
fldName = Arr[i];
PerValue = "";
span = 1;
for (row = 0; row <= RowCount; row++) {
if (row == RowCount) {
CurValue = "";
}
else {
CurValue = dg.datagrid("getRows")[row][fldName];
}
if (PerValue == CurValue) {
span += 1;
}
else {
var index = row - span;
dg.datagrid('mergeCells', {
index: index,
field: fldName,
rowspan: span,
colspan: null
});
span = 1;
PerValue = CurValue;
}
}
}
}
호출 코드
html
<table id="DataGrid" class="easyui-datagrid" fit="true" border="false" toolbar="#TBar" pagination="true"
data-options="autoRowHeight:false,pageSize:50,pageList: [10, 20, 30, 40, 50,100,5000],idField:'zhbid',sortName:'zhbbh', queryParams: { 'action': 'query'}
,onLoadSuccess:function(data){ MergeCells('DataGrid','mkmch,zhbmch');},onDblClickRow: onClickRow"
rownumbers="true" singleSelect="true" url="../Source/Data/zhbdata.ashx?mxbs=MON">
<thead>
<tr>
<th field="zhbid" hidden="true" sortable="true" width="100" rowspan="2"> ID</th>
<th field="zhbbs" hidden="true" sortable="true" width="100" rowspan="2"> ID</th>
<th field="mxid" hidden="true" sortable="true" width="100" rowspan="2"> ID</th>
<th field="dwid" hidden="true" sortable="true" width="100" rowspan="2"> ID</th>
<th field="rq" hidden="true" sortable="true" width="100" rowspan="2"> </th>
<th field="mkmch" sortable="true" width="80" data-options="headalign:'center',align:'center'" rowspan="2"> </th>
<th field="zhbmch" sortable="true" width="150" data-options="headalign:'center'" rowspan="2"> </th>
<th field="dw" sortable="true" width="80" data-options="headalign:'center'" rowspan="2"> </th>
<th field="shn_ljzh" sortable="true" width="80" data-options="headalign:'center',editor:{type:'numberbox',options:{precision:3}}" rowspan="2"> <br /> <br /> </th>
<th field="bn_jh" sortable="true" width="80" data-options="headalign:'center'" rowspan="2"> <br /> </th>
<th colspan="4"> </th>
<th field="mxmch" sortable="true" width="250" data-options="headalign:'center'" rowspan="2"> </th>
<th field="mxzh" sortable="true" width="80" data-options="headalign:'center',editor:{type:'numberbox',options:{precision:3}}" rowspan="2"> <br />( )</th>
<th field="beizhu" sortable="true" width="350" data-options="headalign:'center'" rowspan="2"> </th>
</tr>
<tr>
<th field="bq_zh" sortable="true" width="90" data-options="headalign:'center'"> </th>
<th field="bn_ljzh" sortable="true" width="90" data-options="headalign:'center'"> </th>
<th field="bn_ljtb" sortable="true" width="80" data-options="headalign:'center'"> </th>
<th field="bn_tb" sortable="true" width="80" data-options="headalign:'center'"> </th>
</tr>
</thead>
</table>
js
//
$('#List').datagrid({ pagination: true,
onLoadSuccess: function (data) {
if (data.rows.length > 0) {
// mergeCellsByField()
mergeCellsByField("tbList", "No");
}
}
});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JQuery EasyUI DataGrid 동적 병합 셀js 호출 코드 html js...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.