コード:
ページアクセスデータの一部
$(function (){ $('#dg').datagrid({ url:'tableController.do?getTable&field=itemid,productid,listprice,unitcost,attr1,status', singleSelect:true, collapsible:true,//收起表格的内容 width: 700, height: 450, loadMsg: '数据加载中...', singleSelect:true, fitColumns:true, rownumbers: true,//显示行数 idField: 'itemid', pagination:true,//显示分页 pageSize:20, pageNumber:1, pageList:[20,40,60,80,100], columns:[[ {field:'',title:'95598账目计算表',colspan:6,align:'center',height:30} ],[ {field:'itemid',title:'部门名称',rowspan:2,align:'center'}, {field:'',title:'统计各部门的账目总和:50亿美元',colspan:5,align:'right'} ],[ {field:'productid',title:'目录',width:100,align:'center'}, {field:'listprice',title:'部门一',width:100,align:'center'}, {field:'unitcost',title:'部门二',width:100,align:'center'}, {field:'attr1',title:'部门三',width:100,align:'center'}, {field:'status',title:'部门四',width:100,align:'center'} ]], onLoadSuccess: function (data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 mergeCellsByField("dg", "itemid"); // 重新载入当前页面数据 setTimeout("$('#dg').datagrid('reload');",5000); } } }); $('#dg').datagrid('getPager').pagination({ beforePageText:'', afterPageText:'/{pages}', displayMsg:'{from}-{to}共 {total}条', showPageList:true, showRefresh:true, onBeforeRefresh:function(pageNumber, pageSize){ $(this).pagination('loading'); $(this).pagination('loaded'); } });
/**
* EasyUI DataGrid はフィールドに基づいてセルを動的に結合します
* パラメーター 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; } } }
で十分です。データをロードした後にセルを結合します。正しく表示できるかテストするためのデータです
*
* テーブルの内容を表示する方法をテストします
* @return
*/
@RequestMapping(params = "getTable") public void getTable(HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid) { List<Map<String, Object>> listResults=new ArrayList<Map<String,Object>>(); String[] str = {"满意数","不满意数","满意率","合计","部门的总共数","部门满意率"}; String[] item = {"满意度","消息","评价","总计"}; int j = 0;int k = 0; try { for (int i = 0; i < 24 ; i++) { Map<String, Object> map = new HashMap<String, Object>(); if(i/6==j){ map.put("itemid", item[j]); map.put("productid", str[k]); map.put("listprice", new Random().nextInt(100)); map.put("unitcost", new Random().nextInt(100)); map.put("attr1", new Random().nextInt(100)); map.put("status", new Random().nextInt(100)); k++; }else{ ++j; k=0; map.put("itemid", item[j]); map.put("productid", str[k]); map.put("listprice", new Random().nextInt(100)); map.put("unitcost", new Random().nextInt(100)); map.put("attr1", new Random().nextInt(100)); map.put("status", new Random().nextInt(100)); k++; } listResults.add(map); } int page = dataGrid.getPage(); int rows = dataGrid.getRows(); List<Map<String, Object>> listResultsEnd=new ArrayList<Map<String,Object>>(); for (int i = (page-1)*rows; i < page*rows; i++) { if(listResults.size()>=(i+1)){ listResultsEnd.add(listResults.get(i)); } } dataGrid.setResults(listResultsEnd); dataGrid.setTotal(listResults.size()); TagUtil.datagrid(response, dataGrid); } catch (Exception e) { e.printStackTrace(); } }
以上がjQuery easyUI で行と列にわたるテーブルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。