转载来自:http://www.jeasyuicn.com/jquery-easyui-datagrid-the-same-continuous-column-with-extended.html
/**
* author ____′↘夏悸
* create date 2012-11-5
**/
$.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事件里面进行调用,可以实现数据加载完成后,自动合并。也可以手动调用该方法。
onLoadSuccess:function(){
//所有列进行合并操作
//$(this).datagrid("autoMergeCells");
//指定列进行合并操作
$(this).datagrid("autoMergeCells",['itemid','productid']);
}
分享到:
相关推荐
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
easyui并没有合并行的具体方法,在开发过程中有时候会遇到一行带多行的需求,本代码为满足该需求写的easyUI扩展,代码带注释
在实际应用中,Datagrid 还有很多高级功能,如行选择、单击/双击事件、自定义工具栏、分组、合并单元格等,可以根据需求进行配置和扩展。通过熟练掌握 Datagrid 的使用,可以大大提高开发效率,为用户提供更加友好的...
《jQuery EasyUI 1.5 完整源码解析与应用》 jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,如表格、对话框、菜单、按钮等,大大简化了Web应用程序的开发。在"jquery-easyui-1.5完整...
jQuery EasyUI 是一个基于 jQuery 的前端 UI 框架,它提供了一套可扩展的组件,其中 datagrid 组件就是用于展示数据表格的组件。然而,在实际应用中,有时候从服务器查询不到相关数据,这种情况下,我们通常需要在 ...
jQuery EasyUI是一个基于jQuery的前端UI框架,它提供了一系列可扩展的组件和插件,使得开发者能够快速地使用jQuery开发出具有专业外观的用户界面。在给定文件的【部分内容】中,我们可以看到对jQuery EasyUI的一些...
easyUI合并DataGrid单元格 easyUI为datagrid创建自定义视图 easyUI datagrid显示摘要信息在页脚 easyUI 根据一些条件改变DataGrid 行背景颜色 easyUI 创建一个 Property Grid easyUI 展开DataGrid里面的...
- `jquery.easyui.min.js` 是主要的合并文件,包含了所有组件的代码,而 `jquery.easyui.js` 是未压缩的版本,便于阅读和调试。 5. **组件API** - 每个组件都有一系列的API方法,如 `.dialog('open')` 和 `....
3. **自定义模板**:由于EasyUI默认的表格渲染可能无法直接实现相同行的合并,所以可能需要自定义列的模板(`formatter`函数),在模板中判断并合并相同数据。 4. **扩展功能**:可能涉及到EasyUI的扩展插件,例如...
**jQuery EasyUI eDataGrid** 是一个基于jQuery和EasyUI框架的数据网格组件,它扩展了基本的DataGrid功能,提供了更丰富的特性和交互性。EasyUI是一个轻量级的前端开发框架,它使得构建用户界面变得简单快捷。在这个...
首先,EasyUI是一个基于jQuery的前端框架,它提供了大量的UI组件,如datagrid、dialog、menu等,用于构建用户界面。其中,datagrid是一个强大的表格控件,能够处理大量数据,支持分页、排序、过滤等功能。在这个场景...
在分析和学习"Easyui指定列合并"的源码时,我们可以深入理解EasyUI的内部工作原理,以及如何利用它的API和jQuery的灵活性来扩展其功能。这种技能对于前端开发者来说非常宝贵,可以帮助他们在项目中实现更高效、更...
《jQuery EasyUI 1.3.2:打造高效前端界面的实用框架》 jQuery EasyUI 是一款基于 jQuery 的轻量级前端开发框架,它提供了一系列的UI组件,可以帮助开发者快速构建出美观且功能丰富的Web应用界面。这个压缩包...
### jQuery EasyUI 知识点详解 #### 一、概述 **jQuery EasyUI** 是一个基于 jQuery 的前端 UI 框架,它提供了一系列丰富的用户界面插件,可以帮助开发者快速构建复杂的 Web 应用程序。该框架的目标是简化 HTML、...
EasyUI 是一个基于 jQuery 的前端框架,用于构建用户界面,尤其适用于开发管理类网页应用。在1.3.1版本中,动态表格列的实现是一个常见的需求,这涉及到表格的灵活性和可扩展性,使用户可以根据不同的数据或者权限...
合并数据表格单元格 创建自定义视图 创建数据表格页底摘要 条件设置数据表行背景 创建折叠数据表格 折叠数据表格应用 折叠数据表格中套用数据表格 数据表格处理海量数据方法 窗口应用 创建简单...
`jQuery-EasyUI-edt` 可能是指 EasyUI 的编辑器扩展,它可能提供了一些额外的编辑功能或者增强了原有的组件。通常,这种扩展会包括对文本编辑、代码编辑、富文本编辑等场景的支持,使得在网页上进行数据输入更为便捷...
- 通过源码,我们可以学习如何扩展 `datagrid` 的功能,例如添加新的事件处理器、自定义列操作或创建自定义插件。 - 要注意的是,由于 `easyui` 的源码可能存在一些拼写错误,因此在学习和使用时,可能需要仔细...
- `$.fn.extend()` 用于扩展jQuery对象的方法,让它们可以应用于所有jQuery选择器。 - `$.extend()` 则用于合并两个或更多对象的属性,创建一个新的对象。 2. **事件绑定的改变** - 在jQuery 1.7中,`live()`, `...
6. **插件扩展**:EasyUI 允许开发者通过插件扩展其功能,例如日期选择器(datebox)、时间选择器(timespinner)等,了解如何引入和使用这些插件。 7. **主题定制**:学习如何自定义 EasyUI 的主题,改变组件的...