jQuery easyUI中表格的跨行跨列
来源:互联网 发布:oracle sql 去掉重复 编辑:程序博客网 时间:2024/06/11 14:36
代码:
页面访问数据的部分
$(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 要合并table的id
* 参数 colList 要合并的列,用逗号分隔(例如:”name,department,office”);
*/
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; } }}
后端模拟的数据,只要前台能够收到数据,将最基本的表格显示出来,调用mergeCellsByField(tableID, colList)
即可,他是将数据加载完成之后在进行单元格合并的。数据只是为了测试是否能够正确显示
/**
*
* 测试显示表格内容的方法
* @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();} }
阅读全文
0 0
- jQuery easyUI中表格的跨行跨列
- jQuery easyUI中表格的跨行跨列
- jQuery EasyUI中对表格进行编辑的实现代码
- jQuery EasyUI中对表格进行编辑的实现代码
- jQuery EasyUI中对表格进行编辑的实现代码
- jquery-easyui中表格的行编辑功能
- 另一个不错的表格:jquery-easyui dataGrid
- jquery EasyUI数据表格datagrid中load,reload,loadData方法的区别
- jQuery EasyUI详解-EasyUI表格datagrid
- jQuery EasyUI DataGrid 数据表格
- jQuery EasyUI DataGrid 数据表格
- jQuery EasyUI数据表格之一
- jQuery-EasyUI-DataGrid 数据表格
- jquery-easyui 中将表格变为可编辑的
- Jquery easyUi 数据表格(DataGrid)的特性
- jQuery-easyUI的使用:datagrid实现可编辑表格
- 使用jQuery EasyUI的 detailview创建分组表格
- jQuery easyUI树形表格(TreeGrid)的实现
- java面试题(8)
- Apply与call理解与用法
- 【正一专栏】喜迎十九大——朝鲜会放烟花不?
- Leetcode题目汇总-Java实现
- java面试题(9)
- jQuery easyUI中表格的跨行跨列
- PKI系统介绍
- response详解
- java面试题(10)
- 独立游戏开发者---孤独前行的梦想家
- SVN项目管理软件使用说明
- 单纯形法MATALAB实现
- 一行代码搞定Android弧形卫星动画菜单(附Demo)
- 讯飞 SDK集成记录