基于EasyUi的datagrid合并单元格JS写法
$('#dg').datagrid({
width: 'auto',
height: 'auto',
scrollbarSize: ,
queryParams: {},
url: 'kkkk',
columns: [[
{ field: 'bh', title: '编号', width: , sortable: false },
{ field: 'mc', title: '名称', width: , sortable: false },
{ field: 'zf', title: '总分', width: , sortable: false }
]],
nowrap: false,
fitColumns: false,
striped: true,
rownumbers: false, //行号
singleSelect: false, //是否单选
onLoadError: function (e) {
$.messager.alert("提示", "加载失败", "error");
},
onLoadSuccess: function (data) {
var cells = ["kc", "uu"];
mergeCells('dg', data, cells);
});
}
});
//第一种
//dg:datagrid的id;data:onLoadSuccess: function (data){}中的data;cellnames:合并的列,var cells = ["ku", "uu"];
function mergeCells(dg, data, cellnames) {
for (var i = ; i < cellnames.length; i++) {
var cellname = cellnames[i];
var merges = [];
for (var r = ; r < data.rows.length; r++) {
var row = data.rows[r];
var mergeinfo = new Object();
var nr = row[cellname];
var rowspan = ;
for (var r1 = r + ; r1 < data.rows.length; r1++) {
var row1 = data.rows[r1];
var nr1 = row1[cellname];
if (nr1 && nr1 == nr && nr1 != "") {
mergeinfo.index = r;
rowspan++;
mergeinfo.rowspan = rowspan;
}
else {
if (rowspan > ) {
merges.push(mergeinfo);
r = r1 - ;
}
break;
}
if (r1 == data.rows.length - ) {
if (rowspan > ) {
merges.push(mergeinfo);
r = r1 - ;
}
}
}
}
for (var j = ; j < merges.length; j++) {
$('#' + dg).datagrid('mergeCells', {
index: merges[j].index,
field: cellname,
rowspan: merges[j].rowspan
});
}
}
}
//第二种
function mergeCells_table(dg, data, cellnames) {
var table = document.getElementById(dg);
for (var i = ; i < cellnames.length; i++) {
var cellname = cellnames[i];
var merges = [];
for (var r = ; r < data.rows.length; r++) {
var row = data.rows[r];
var mergeinfo = new Object();
var nr = row[cellname];
var rowspan = ;
for (var r1 = r + ; r1 < data.rows.length; r1++) {
var row1 = data.rows[r1];
var nr1 = row1[cellname];
if (nr1 && nr1 == nr && nr1 != "") {
mergeinfo.index = r;
rowspan++;
mergeinfo.rowspan = rowspan;
table.rows[r + ].cells[i].rowSpan = rowspan;
table.rows[r1 + ].cells[i].style.display = "none";
}
else {
if (rowspan > ) {
merges.push(mergeinfo);
r = r1 - ;
}
break;
}
if (r1 == data.rows.length - ) {
if (rowspan > ) {
merges.push(mergeinfo);
r = r1 - ;
}
}
}
}
// for (var j = 0; j < merges.length; j++) {
// $('#' + dg).datagrid('mergeCells', {
// index: merges[j].index,
// field: cellname,
// rowspan: merges[j].rowspan
// });
// }
}
}
$('#dg').datagrid({
width: '100%',
height: '',
queryParams: {},
loadMsg: '正在加载....',
columns: [[
{ field: 'bh', title: '编号', width: , sortable: false },
{ field: 'mc', title: '名称', width: , sortable: false },
{ field: 'zf', title: '总分', width: , sortable: false }
]],
pagination: false, //分页控件
fitColumns: true,
striped: true,
rownumbers: false, //行号
singleSelect: true, //是否单选
onLoadSuccess: function (data) {
var cellcomp = 'bh';
var cells = ['mc', 'zf'];
mergeCells_New('dg', data, cellcomp, cells);
}
});
//dg:datagrid的id;data:onLoadSuccess: function (data){}中的data;cellcomp:列相同;cellnames:合并的列,var cells = ["ku", "uu"];
//cellcomp列相同,cellnames合并
function mergeCells_New(dg, data, cellcomp, cellnames) {
var merges = [];
for (var r = ; r < data.rows.length; r++) {
var row = data.rows[r];
var mergeinfo = new Object();
var nr = row[cellcomp];
var rowspan = ;
for (var r1 = r + ; r1 < data.rows.length; r1++) {
var row1 = data.rows[r1];
var nr1 = row1[cellcomp];
if (nr1 && nr1 == nr && nr1 != "") {
mergeinfo.index = r;
rowspan++;
mergeinfo.rowspan = rowspan;
}
else {
if (rowspan > ) {
merges.push(mergeinfo);
r = r1 - ;
}
break;
}
if (r1 == data.rows.length - ) {
if (rowspan > ) {
merges.push(mergeinfo);
r = r1 - ;
}
}
}
}
for (var i = ; i < cellnames.length; i++) {
var cellname = cellnames[i];
for (var j = ; j < merges.length; j++) {
$('#' + dg).datagrid('mergeCells', {
index: merges[j].index,
field: cellname,
rowspan: merges[j].rowspan
});
}
}
}
基于EasyUi的datagrid合并单元格JS写法的更多相关文章
- JS实现EasyUI ,Datagrid,合并单元格功能
为了实现datagrid的合并单元格效果,datagrid的数据加载方式肯定是要写在JS文件内部的. 一:在JS内部添加Datagrid数据加载方法如下: $("#id").dat ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 合并单元格
jQuery EasyUI 数据网格 - 合并单元格 数据网格(datagrid)经常需要合并一些单元格.本教程将向您展示如何在数据网格(datagrid)中合并单元格. 为了合并数据网格(datag ...
- Silverlight的DataGrid合并单元格
现在也不知道还有没有同学做Silverlight开发了,我是一个Silverlight菜鸟,遇到问题也很难百度查到.就简单的记录一下这两天遇到的问题,并做了一个简单的小Demo,希望能够帮助到其他同学 ...
- easyui datagrid 合并单元格
整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...
- easyui 自动动态合并单元格
.......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 ...
- WPF DataGrid 合并单元格
在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Heade ...
- DataGrid合并单元格(wpf)
在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Heade ...
- C# DataGrid合并单元格
1.栏位枚举 private enum DataGridColumn { ROWNUM = , EMPID, EMPNAME, SEX, SALARY, ADRRESS, PHONE, TEL, PO ...
- easyui的datagrid改变单元格颜色
另一种方法:https://www.cnblogs.com/raitorei/p/10395233.html easyui的datagrid改变整行颜色:https://www.cnblogs.com ...
随机推荐
- codeblocks不支持c++11的有效解决办法
首先cb支持c++11编程开发,但是不支持编译 看了网上好多,说setting里面设置一下就好了,16.01版本我安装了带ide的不带IDE的,安了好多次,但是就是没有那个选项 找不到c++11那个选 ...
- sqlserver 几种datatime的区别
参考文章1 smalldatetime 占4位精确到分钟.时间从1900.1.1到2079.6.6datetime占8位精确到毫秒.时间从1753.1.1到9999.12.31 参考文章2 datet ...
- PHP下ajax跨子域的解决方案之document.domain+iframe
对于主域相同,子域不同,我们可以设置相同的document.domain来欺骗浏览器,达到跨子域的效果. 例如:我们有两个域名:www.a.com 和 img.a.com 在www.a.com下有 ...
- JSP页面中的EL表达式介绍
1.什么是EL? Expression Language(表达式语言) 2.EL的功能 替代JSP页面中数据访问时的复杂编码. 3.EL的特点 自动转换类型 使用简单 4.EL表达式的语法 ${EL ...
- Tomcat设置默认时区
本文讲解如何在tomcat启动时设置JVM默认时区. 环境:JDK1.8.114 web容器:Tomcat 9 tomcat启动脚本 /etc/init.d/tomcat 操作系统ubuntu 16 ...
- (转载)Zab vs. Paxos
原创链接:https://cwiki.apache.org/confluence/display/ZOOKEEPER/Zab+vs.+Paxos Is Zab just a special imple ...
- Directory /usr/local/hadoop/tmp/tmp/hadoop-root/dfs/name is in an inconsistent state: storage directory does not exist or is not accessible
解决方法: <property> <name>hadoop.tmp.dir</name> <value>/usr/local/hadoop/tmp< ...
- 2018.10.22 bzoj4380: [POI2015]Myjnie(区间dp)
传送门 区间dp好题. f[i][j][k]f[i][j][k]f[i][j][k]表示区间[i,j][i,j][i,j]最小值为kkk时的最大贡献. 然后可以枚举端点转移. 当时口胡到这儿就不会了. ...
- 2018.09.29 bzoj3885: Cow Rectangles(悬线法+二分)
传送门 对于第一个问题,直接用悬线法求出最大的子矩阵面积,然后对于每一个能得到最大面积的矩阵,我们用二分法去掉四周的空白部分来更新第二个答案. 代码: #include<bits/stdc++. ...
- flask_模板
由于python中生成html比较繁琐,所以flask自动为你配置好jinjia2模板.下面我们开始学习模板应用吧~ 1.编写microblog模块 注:(1)这里为了渲染模板,我们从Flask导入了 ...