河北邢台路桥建设公司网站百图汇免费素材图库

河北邢台路桥建设公司网站,百图汇免费素材图库,中国商检局做备案网站,uo建设网站下面直接给你最实用、最常见的合并单元格#xff08;merge cells#xff09;方法#xff0c;jQuery EasyUI datagrid 官方没有内置合并#xff0c;但通过 onLoadSuccess 事件超级容易实现#xff0c;复制粘贴就能用#xff0c;领导最爱的“同一客户订单合并显示 报表分组…下面直接给你最实用、最常见的合并单元格merge cells方法jQuery EasyUI datagrid 官方没有内置合并但通过onLoadSuccess事件超级容易实现复制粘贴就能用领导最爱的“同一客户订单合并显示 报表分组效果”全都有方法1最简单最常用 - 按指定列合并单元格推荐现在就用这个3秒出效果比如按“客户名称”列合并相同行的单元格。tableiddgclasseasyui-datagridtitle合并单元格示例stylewidth:800px;height:400pxdata-optionsurl:data.json, fitColumns:true, rownumbers:true, pagination:true, singleSelect:true, onLoadSuccess:mergeCellsByFieldtheadtrthdata-optionsfield:customer,width:120客户名称/ththdata-optionsfield:product,width:150商品名称/ththdata-optionsfield:price,width:100,align:right单价/ththdata-optionsfield:quantity,width:80,align:right数量/ththdata-optionsfield:amount,width:120,align:right金额/ththdata-optionsfield:date,width:100订单日期/th/tr/thead/tablescript// 通用的合并函数支持同时合并多列functionmergeCellsByField(){varfields[customer,date];// 要合并的列字段名数组vardg$(#dg);varrowsdg.datagrid(getRows);for(vari0;ifields.length;i){varfieldfields[i];varcoldg.datagrid(getColumnOption,field);col.editorfalse;// 防止编辑时出错varmergeIndex0;// 合并起始行varmergeCount1;// 合并行数for(varj1;jrows.length;j){if(jrows.lengthrows[j][field]rows[j-1][field]){mergeCount;}else{if(mergeCount1){dg.datagrid(mergeCells,{index:mergeIndex,field:field,rowspan:mergeCount});}mergeIndexj;mergeCount1;}}}}/script效果相同客户名称的行会自动合并客户列相同日期的行合并日期列报表感瞬间拉满方法2高级版 - 支持跨列合并 合并后居中显示更专业functionmergeCellsAdvanced(){vardg$(#dg);varrowsdg.datagrid(getRows);// 合并客户列垂直合并mergeByField(customer);// 合并金额列为大标题水平合并整行最后三列dg.datagrid(mergeCells,{index:0,// 从第0行开始可循环处理多组field:price,colspan:3// 合并 price quantity amount 三列});functionmergeByField(field){varmergeIndex0;varmergeCount1;for(vari1;irows.length;i){if(rows[i][field]rows[i-1][field]){mergeCount;}else{if(mergeCount1){dg.datagrid(mergeCells,{index:mergeIndex,field:field,rowspan:mergeCount});// 可选合并后文字垂直水平居中setTimeout(function(){$(div.datagrid-cell[fieldfield]).eq(mergeIndex).css({text-align:center,vertical-align:middle});},100);}mergeIndexi;mergeCount1;}}// 处理最后一段if(mergeCount1){dg.datagrid(mergeCells,{index:mergeIndex,field:field,rowspan:mergeCount});}}}然后在onLoadSuccess: mergeCellsAdvanced方法3分组加载 合并适合大数据分组标题行后台返回数据时加分组标识前端插入标题行并合并onLoadSuccess:function(data){vardg$(this);varrowsdata.rows;varinsertIndex0;for(vari0;irows.length;){vargroupValuerows[i].customer;vargroupRows[];while(irows.lengthrows[i].customergroupValue){groupRows.push(rows[i]);i;}// 插入分组标题行dg.datagrid(insertRow,{index:insertIndex,row:{customer:b stylecolor:blue;【groupValue】共groupRows.length笔订单/b,product:,price:,quantity:,amount:,date:}});// 合并标题行整行dg.datagrid(mergeCells,{index:insertIndex,field:customer,colspan:6// 合并所有列});insertIndexgroupRows.length1;}}你现在直接复制方法1到你的页面刷新一下就能看到完美合并单元格效果了结合之前的复选框 分页 行内编辑 列运算 扩展编辑器你的报表表格已经可以吊打99%的后台系统了。想要我给你一个完整的HTML示例带远程数据 多列合并 分组标题 底部合计或者你告诉我你想怎么合并比如“按省份合并 水平合并合计列”我2分钟发你完整代码复制就能跑快说说你现在的需求比如“要合并多列”或“合并后加背景色”我手把手帮你搞定5分钟内看到超级专业的合并效果