JS实现EasyUI ,Datagrid,合并单元格功能

为了实现datagrid的合并单元格效果，datagrid的数据加载方式肯定是要写在JS文件内部的。

一：在JS内部添加Datagrid数据加载方法如下：

$("#id").datagrid({ //id时文档中datagrid的id
　　url:url, //URL是获取数据的途径，可以是静态json文件，也可以是后台接口
　　queryParams:{ //queryParams是请求的参数，多用于条件查询，可有可无
　　stanNum : $("#stanNum").textbox("getValue"),
　　}

});

此方法可以实现自动分页效果。

没使用合并之前的样子：

效果实现之后的表格：

二：在Datagrid,合并单元格功能如下：

　　实现合并单元格，只需要调用datagrid的onLoadSuccess方法，在onLoadSuccess方法内进行合并单元格操作

$("#stanList").datagrid({
　　url:window.backendContextPath+"/stanInfoManage/bffzStan.do",
　　queryParams:{
　　stanNum : $("#stanNum").textbox("getValue"),
　　},
　　onLoadSuccess: function(data){ //data是默认的表格加载数据，包括rows和Total
　　　　var mark=1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
　　　　for (var i=1; i <data.rows.length; i++) { //这里循环表格当前的数据
　　　　　　if (data.rows[i]['stanNum'] == data.rows[i-1]['stanNum']) { //后一行的值与前一行的值做比较，相同就需要合并
　　　　　　　　mark += 1;
　　　　　　　　$(this).datagrid('mergeCells',{
　　　　　　　　　　index: i+1-mark, //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
　　　　　　　　　　field: 'stanNum', //合并单元格的区域，就是clomun中的filed对应的列
　　　　　　　　　　rowspan:mark //纵向合并的格数，如果想要横向合并，就使用colspan：mark
　　　　　　　　});
　　　　　　}else{
　　　　　　　　mark=1; //一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
　　　　　　}
　　　　}
　　}

});

这里就涉及到一个简单的计算了。红色部分是调用datagrid的onLoadSuccess方法，红色中间的绿色部分就是单元格合并的方法。

最后附上一张红包码，学习赚钱两不误，支付宝扫一扫就能领取红包啦

巴特西

JS实现EasyUI ,Datagrid,合并单元格功能

最新文章

热门文章