EasyUI DataGrid 相同连续列合并
扩展方法:
$.extend($.fn.datagrid.methods, {
autoMergeCells: function(jq, fields) {
return jq.each(function() {
var target = $(this);
if (!fields) {
fields = target.datagrid("getColumnFields");
}
var rows = target.datagrid("getRows");
var i = 0,
j = 0,
temp = {};
for (i; i < rows.length; i++) {
var row = rows[i];
j = 0;
for (j; j < fields.length; j++) {
var field = fields[j];
var tf = temp[field];
if (!tf) {
tf = temp[field] = {};
tf[row[field]] = [i];
} else {
var tfv = tf[row[field]];
if (tfv) {
tfv.push(i);
} else {
tfv = tf[row[field]] = [i];
}
}
}
}
$.each(temp,
function(field, colunm) {
$.each(colunm,
function() {
var group = this;
if (group.length > 1) {
var before, after, megerIndex = group[0];
for (var i = 0; i < group.length; i++) {
before = group[i];
after = group[i + 1];
if (after && (after - before) == 1) {
continue;
}
var rowspan = before - megerIndex + 1;
if (rowspan > 1) {
target.datagrid('mergeCells', {
index: megerIndex,
field: field,
rowspan: rowspan
});
}
if (after && (after - before) != 1) {
megerIndex = after;
}
}
}
});
});
});
}
});
使用方法
在datagrid的onLoadSuccess事件里面进行调用,可以实现数据加载完成后,自动合并。也可以手动调用该方法。
$('#dg').datagrid({
url: 'datagrid_data.json',
onLoadSuccess: function(data) {
//所有列进行合并操作
//$(this).datagrid("autoMergeCells");
//指定列进行合并操作
$(this).datagrid("autoMergeCells", ['groupId', 'commId']);
}
});
EasyUI DataGrid 相同连续列合并的更多相关文章
- 扩展-Easyui Datagrid相同连续列合并扩展(一)
一.autoMergeCellAndCells实现效果 调用方法: function onLoadSuccess(data){ $(this).datagrid("autoMerge ...
- Easyui Datagrid相同连续列合并扩展(二)
JS: //合并相同数据的单元格 function MergeCells(seletor, rows, fields) { if(rows == null || rows.length == 0 || ...
- Easyui Datagrid相同连续列合并扩展(三)
function MergeCells(seletor, rows, fields) { if(rows == null || rows.length == 0 || fields == null | ...
- jQuery Easyui Datagrid相同连续列合并扩展
/** * author ____′↘夏悸 * create date 2012-11-5 **/$.extend($.fn.datagrid.methods, { autoMergeCells : ...
- Easyui Datagrid相同连续列合Demo之三
效果图: html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能
需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...
- (转)扩展jquery easyui datagrid 之动态绑定列和数据
本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...
- easyui datagrid自定义操作列
通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar, 这样我们选择一行 ...
- easyui datagrid自定义按钮列,即最后面的操作列(转)
做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jQuery easyUI 1.3.2 这里我的实现方式是采用HTML形式 ...
随机推荐
- Ubuntu 14 下,命令行终端显示短路径
Ubuntu的终端命令行默认是长路径,即把路径深度全部显示出来,操作起来不是很方便,下面介绍命令行显示短路径的操作: $ vi ~/.bashrc 找到PS1= 的行,将\w(小写)改成\W(大写 ...
- Java二进制指令代码解析
http://www.blogjava.net/DLevin/archive/2011/09/13/358497.html http://blog.csdn.net/sum_rain/article/ ...
- 【spring data jpa】使用jpa进行update更新操作,避免空字段和更新后即时返回给前台的问题
修改操作 如果使用的JPA,应该是 findByUid之后 将新的值对old进行赋值,最后对old值进行flush(),即可完成更新,而不应该去更新新的实体. 示例代码: 以后补充
- Android应用内 代码截屏(获取View快照)和 禁止截屏
1. 应用内的代码截屏(获取View的快照) Android的View类中提供了获取控件绘制缓存的方法,这种截屏的方式仅限于应用内自己的Activity界面,不需要任何权限,严格来说该方法不属于截屏, ...
- MySql中的concat()相关函数
concat 函数的基本应用一: SQL CONCAT函数用于将两个字符串连接起来,形成一个单一的字符串.试试下面的例子: SQL> SELECT CONCAT('FIRST ', 'SECON ...
- 想使用gevent、mysql、sqlalchemy实现python项目协程异步达到并发的效果
如题,但是查看了很多资料,都说python这边的mysql不支持异步并发,只能阻塞进行,心塞30秒,暂时放弃这方面的研究 如果不操作数据库的化,比如请求url.操作文件,还是可以用gevent来异步实 ...
- Unity GPU Query OpenGLES 3.0
https://github.com/google/render-timing-for-unity/blob/master/RenderTimingPlugin/RenderTimingPlugin. ...
- android源代码下载备注
android源代码下载的參考网上比較多,就不贴上来了,主要是备注下下载源代码过程中须要注意的地方. 1. google官方下载步骤地址: http://source.android.com/sour ...
- observer pattern 之我见
所谓模式,更多的是一种想法,完全没必要拘泥于代码细节.观察者模式更多体现了两个独立的类利用接口完成一件本应该很复杂的事情 --------------------------------------- ...
- Ruby中map, collect,each,select,reject,reduce的区别
# map 针对每个element进行变换并返回整个修改后的数组 def map_method arr1 = ["name2", "class2"] arr1. ...