easyui-datagrid自动合并行
1.目标
1.1表格初始化完成后,已经自动合并好需要合并的行;
1.2当点击字段排序后,重新进行合并;
2.实现
2.1 引入插件
- /**
- * 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;
- }
- }
- }
- });
- });
- });
- }
- });
2.2html代码
- <table id="simpleDgId" style="height: 300px" />
2.3js代码
- var sortFlag = false;
- $('#simpleDgId').datagrid({
- url:"testController.do?datagrid",
- fitColumns:true,
- singleSelect:true,
- remoteSort: false,
- columns:[[
- {field:"age",title:"年龄",width:25,align:'center',sortable:true},
- {field:"userName",title:"名称",width:25,align:'center',sortable:true},
- {field:"mobilePhone",title:"手机",width:25,align:'center',sortable:true}
- ]],
- onSortColumn:function(sort, order){
- sortFlag = true;
- if("userName"==sort){
- $(this).datagrid("autoMergeCells",[sort]);
- }else{
- $(this).datagrid("autoMergeCells");
- }
- },
- onLoadSuccess: function(data){
- if(!sortFlag) $(this).datagrid("autoMergeCells");
- }
- });
easyui-datagrid自动合并行的更多相关文章
- easyui生成合并行,合计计算价格
easyui生成合并行,合计计算价格 注:本文来源: 原创 一:图样你效果图 二:代码实现 1:datagrid 列展示: window.dataGrid = $("#dataGrid&qu ...
- 反射实体自动生成EasyUi DataGrid模板 第二版--附项目源码
之前写过一篇文章,地址 http://www.cnblogs.com/Bond/p/3469798.html 大概说了下怎么通过反射来自动生成对应EasyUi datagrid的模板,然后贴了很多 ...
- DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)
如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...
- easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题
在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...
- 反射实体自动生成EasyUi DataGrid模板
用EasyUi Datagrid展示数据的时候总是要一下这样一段代码 <table id="dt" class="easyui-datagrid"> ...
- easyUI datagrid editor扩展dialog
easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...
- EasyUI datagrid优化
easyui datagrid 在IE上加载速度慢, 150行数据就无法忍受了. firefox加载速度还可以. jquery easyui datagrid使用参考 http://www.cnblo ...
- 初识 easyui datagrid
首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jqu ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
随机推荐
- js模版引擎handlebars.js实用教程——循环中使用索引
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- 实践基于Task的异步模式
Await 返回该系列目录<基于Task的异步模式--全面介绍> 在API级别,实现没有阻塞的等待的方法是提供callback(回调函数).对于Tasks来说,这是通过像ContinueW ...
- IOS UIView 03- 自定义 Collection View 布局
注:本人是翻译过来,并且加上本人的一点见解. 前言 UICollectionView 在 iOS6 中第一次被引入,也是 UIKit 视图类中的一颗新星.它和 UITableView 共享一套 API ...
- python面向对象随笔
传送门:http://www.runoob.com/python/python-object.html
- OutputCache属性详解(二)一 Location
目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...
- 【JMS】JMS之ActiveMQ的使用
这篇文章主要是简单介绍一下JMS和ActiveMQ,以及使用ActiveMQ来写两个demo. 1. JMS是啥 百度百科的解释: JMS即Java消息服务(Java Message Service) ...
- Android SDK 百度云盘分享链接
SDK百度云盘地址: 链接: http://pan.baidu.com/s/1skSCplF 密码: drq4 使用说明: 这是Android开发所需的sdk,下载并解压后,将解压出的整个文件夹复制或 ...
- jS事件之网站常用效果汇总
下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> < ...
- SQLSERVER中的ALLOCATION SCAN和RANGE SCAN
SQLSERVER中的ALLOCATION SCAN和RANGE SCAN 写这篇文章的开始,我还不知道ALLOCATION SCAN的工作原理是怎样的,网上资料少得可怜 求助了园子里的某位大侠,他看 ...