1、table表格合并
tables.dtGridColumns = [ {id: 'schoolName', title: '学校', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'eq',rowspan:'2'}, {id: 'originalNewMoney', title: '正价新签', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'lk', colspan:'4', coltitle:'净收入'}, {id: 'originalRenewalMoney', title: '正价续费', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'lk'}, {id: 'specialMoney', title: '特价', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'lk'}, {id: 'totalMoney', title: '总计', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'lk'}, {id: 'originalNewRegister', title: '正价新签', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'lk', colspan:'3', coltitle:'订单数'}, {id: 'originalRenewalRegister', title: '正价续费', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'lk'}, {id: 'specialRegister', title: '特价', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'lk'}, {id: 'studentCount', title: '在读人数', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'eq',rowspan:'2'}, {id: 'personTimeCount', title: '在读人次', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'eq',rowspan:'2'}, {id: 'originalCarryoverHour', title: '正价已结转', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'lk', colspan:'2', coltitle:'小时数'}, {id: 'specialCarryoverHour', title: '特价已结转', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'lk'}, {id: 'confirmIncome', title: '确认金额', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'lk', colspan:'2', coltitle:'结转金额'}, {id: 'fcMoney', title: '实际结转', type: 'string', columnClass: 'text-center', fastQuery:true, fastQueryType:'lk'} ]; 效果
2、表格结尾增加合计（总计）行
//定义dtGridOption属性中加入totalCountColByIdtables.dtGridOption = { lang: 'zh-cn', ajaxLoad: true, check: false, loadURL: ctx + '', exportFileName: '在册人数以及库存课时统计', columns: tables.dtGridColumns, gridContainer: 'tb_main_body', toolbarContainer: 'tb_main_tool', tools: 'refresh|faseQuery|export[excel,pdf,]|print', totalCountColById:['xx','xx'], // 总计id字段 pageSize: 10, pageSizeLimit: [10, 20, 50, 100, 500] }; 3、全部导出配置
①在初始化参数中配置
grid.diyparameters = { //参数
"exportOfQueryFlag" : "exportClassReadingRepay" // 值为后台给定值 };②在search搜索方法中加入参数
search: function () {
grid.diyparameters = new Object(); grid.diyparameters.exportOfQueryFlag = "exportClassReadingRepay"; //导出全部hash 值 grid.refresh(true); }
4、dtGrid跳转到指定页数
因为没找到有参数传递，然后看到js文件中写死的，所以做一点改变
找到jquery.dtGrid.js文件，在它的load方法中修改，记得给方法加上pageType参数
修改前：dtGridReflectionObj.pager.nowPage = 1;修改后：dtGridReflectionObj.pager.nowPage = pageType ? pageType : 1;
然后在调用load的时候传入参数就行，亲测有效。
5、dtGrid表格左侧固定
增加下列属性到dtGridOption中即可
tables.dtGridOption = { lang:'zh-cn', freezecol: 6, freezerow:''} 6、动态表头与动态内容
有时表头与内容不是指定的，需要另外请求：
//初始化表格数据 initTable: function (datas, columns, tbbody, tbtool, type) { // datas表格数据，columns表头列，tbbody、tbtool表格容器 datas.exhibitDatas.forEach(function (v, i) { var item = v.moneyMap; for (var j in item) { for (var k in item[j]) { // console.log(item[j][k]) v[j+k] = item[j][k]; // 转换 将moneyMap中的数据放入到exhibitDatas中，适应dtGrid表格要求 } } }); console.log(datas) var tables = {}; var that = this; //定义表格列属性 tables.dtGridColumns = columns; //定义表格 tables.dtGridOption = { lang: 'zh-cn', ajaxLoad: false, // 不使用ajaxLoad请求 exportFileName: '房租月摊销金额计算表', datas: datas.exhibitDatas, // 当ajaxLoad为false时有效，表格内容数据 columns: tables.dtGridColumns, // 表头，json数组 gridContainer: tbbody, toolbarContainer: tbtool, tools: 'refresh|faseQuery|export[excel]|print', pageSize: 10, // totalCount: true, // pageSizeLimit: [10, 20, 50], onGridComplete: function () { // 表格加载完成后函数 } }; prcGrid = $.fn.DtGrid.init(tables.dtGridOption); prcGrid.diyparameters = { // 参数 "monthStamp": $("#beginMonth").val().replace(/-/g,''), // 年月 "queryContractType": "prc" // 标识 }; $("#" + tbbody).empty(); // 先清空内容 $("#" + tbtool).empty(); // 先清空内容 prcGrid.load(); }, requestFun: function (data, type) { // 处理数据且渲染表头方法 var that = this; var arr = [{id: '', title: '教学区', type: 'string', columnClass: 'text-center', fastQuery: true, fastQueryType: 'eq', rowspan: '2'}]; // 存放渲染表格表头 var datas = []; // 存放对应字段名 data.forEach(function (v, i) { if (v.typeCode) { // 如果不为空 var list = v.itemList; if (list.length > 1) { // 需合并列大于1 list.forEach(function (val, index) { if (index == 0) { var obj = {id: val.itemCode, title: val.itemName, type: 'string',columnClass: 'text-center', fastQuery: true, fastQueryType: 'lk', colspan: list.length, coltitle: v.typeName}; } else { var obj = {id: val.itemCode, title: val.itemName, type: 'string',columnClass: 'text-center', fastQuery: true, fastQueryType: 'lk'}; } arr.push(obj); datas.push(val.itemCode); }); } else { // var obj = {id: list[0].itemCode, title: list[0].itemName, type: 'string',columnClass: 'text-center', fastQuery: true, fastQueryType: 'eq', rowspan: '2'}; arr.push(obj); datas.push(list[0].itemCode); } } else { // return showAlertInfo("error","返回数据有问题，请稍候联系后台管理员！"); var list = v.itemList; list.forEach(function (val, index) { var obj = {id: val.itemCode, title: val.itemName, type: 'string',columnClass: 'text-center', fastQuery: true, fastQueryType: 'eq', rowspan: '2'}; arr.push(obj); datas.push(val.itemCode); }) } }) // arr.push({id: '', title: '操作', type: 'string', columnClass: 'text-center', fastQuery: true, fastQueryType: 'eq', rowspan: '2'}); // 默认插入操作列 that.headerData = arr; // 存放处理后的表头数据 that.contentData = datas; that.tableHeaderAddFun(datas); // 新增模块表头渲染方法，datas为新增模块内容 },