easyUI---datagrid合并单元格代码实现
1、html部分:
<div id="table1"></div>
2、js部分:
$('#table1').datagrid({
data : data,
loadFilter: pagerFilter,
height: $(document).height()*0.87,
striped: true,
selectOnCheck: true,
pagination: true,
pageSize:10,
pageList:[10,20,30,40,50],
onLoadSuccess: function (data) {
if (data.rows.length > 0) {
$('#table1').datagrid("autoMergeCells", ['userid']);
}
},
columns: [
[{
field: 'userid',
title: '列名',
width: '15%',
align: 'center'
},{
field: 'username',
title: '列名',
width: '15%',
align: 'center'
}]
});
autoMergeCells方法扩展了datagrid的方法,实现如下:
/**
* EasyUI DataGrid根据字段动态合并单元格
* 参数 jq 要合并table的id
* 参数 fields 要合并的列,用逗号分隔(例如:"field1,field2,field3,...");
*/
$.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;
}
}
}
});
});
});
}
});
easyUI---datagrid合并单元格代码实现的更多相关文章
- JS实现EasyUI ,Datagrid,合并单元格功能
为了实现datagrid的合并单元格效果,datagrid的数据加载方式肯定是要写在JS文件内部的. 一:在JS内部添加Datagrid数据加载方法如下: $("#id").dat ...
- easyui datagrid 合并单元格
整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...
- easyui datagrid单击单元格选择此列
示例代码实现单击jquery easyui datagrid的单元格时,取消datagrid默认选中高亮此行的样式,改为选中单击的单元格所在的列,高亮此列上的所有单元格.可以配置全局single变量, ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- Silverlight的DataGrid合并单元格
现在也不知道还有没有同学做Silverlight开发了,我是一个Silverlight菜鸟,遇到问题也很难百度查到.就简单的记录一下这两天遇到的问题,并做了一个简单的小Demo,希望能够帮助到其他同学 ...
- WPF DataGrid 合并单元格
在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Heade ...
- EasyUI DataGrid合并单元
<table id="tt"></table> $('#tt').datagrid({ title:'Merge Cells', iconC ...
- DataGrid合并单元格(wpf)
在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Heade ...
- Easyui datagrid 扩展单元格textarea editor
datagrid 扩展单元格textarea editor by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 如下,在没有扩展的情况下,初始化如下 手 ...
随机推荐
- [搬运] C# 这些年来受欢迎的特性
原文地址:http://www.dotnetcurry.com/csharp/1411/csharp-favorite-features 在写这篇文章的时候,C# 已经有了 17 年的历史了,可以肯定 ...
- 【JavaScript的基本语法】
[JavaScript的基本语法 ] 1.javascript输出 JavaScript语句向浏览器发出的命令.语句的作用是告诉浏览器该做什么. <script> documen ...
- Spring(一)Spring的第一滴血
前言 开始工作了,但是一进来公司本来是做爬虫和数据分析的,但是走了一个后端的,导致我必须要去顶替他的工作.因为这个项目使用的是Spring. SpringMVC.Hibernate所以我又要去回忆一下 ...
- BZOJ3916: [Baltic2014]friends
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3916 复习一下hash(然后被傻叉错误卡了半天TAT... 取出一个字串:h[r]-h[l-1 ...
- hdu_1025(LIS Nlog(N)算法)
题意:自己慢慢读吧.大概就是道路两边建路,给出建路需求,要求两条路不能有交叉,问最多可以建多少条路. 题解:一看数据范围500000,应该是dp,再画个图模拟一下,发现实质就是求最长上升子序列,很自然 ...
- Ubuntu搭建Gitlab服务器
想到Gitlab就必定会想到SVN,因为两者都是代码管理系统,作为开发人员来说,用习惯了SVN的图形化界面和SVN代码更新和提交的方式, 可能就会觉得使用git会比较麻烦,其实不然git使用起来非常方 ...
- cesium编程入门(三)开始使用cesium开发
搭建最简的开发环境 这一节来搭建一个最简单的能运行的helloworld,以后的代码也会在这一节的基础上慢慢增加 创建文件夹 mkdir cesium-test cd cesium-test 引入编译 ...
- Dev中GridControl的导出Excel设置
接上篇 Dev中GridControl的GridView 基本样式设置 上图: 导出部分的代码: /// <summary> /// 导出excel /// </summary> ...
- html5只需要<!DOCTYPE HTML>的原因
首先我们先了解两个东西: SGML:标准通用标记语言(以下简称"通用标言"),是一种定义电子文档结构和描述其内容的国际标准语言:[1] 通用标言为语法置标提供了异常强大的工具,同 ...
- 【视频编解码·学习笔记】3. H.264视频编解码工程JM的下载与编解码
一.下载JM工程: JM是H.264标准制定团队所认可的官方参考软件.网址如下 http://iphome.hhi.de/suehring/tml/ 从页面中可找到相应的工程源码,本次选择JM 8.6 ...