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;
                            }
                        }
                    }
                });
            });
        });
    }
});
时间: 2024-08-05 11:17:53

easyUI---datagrid合并单元格代码实现的相关文章

easyui datagrid 合并单元格

整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获取计算ID var CountID = getUrlParam("CountID"); $.ajax({ type: "POST", url: "../Ashx/GetGasInventoryListInfo.ashx?type=getParamReport&

DataGrid合并单元格(wpf)

在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Header也放一个DataGrid,但是合并的这一个连续列中只支持一列的拖动,效果如下,上图 代码如下 首先定义两个模板,一个用于合并的Header显示 <DataTemplate x:Key="MergeHeader">             <DataGrid Horizo

WPF DataGrid 合并单元格

在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Header也放一个DataGrid,但是合并的这一个连续列中只支持一列的拖动,效果如下,上图 代码如下 首先定义两个模板,一个用于合并的Header显示 <DataTemplate x:Key="MergeHeader">             <DataGrid Horizo

EasyUI DataGrid 编辑单元格

之前文章 EasyUI DataGrid可编辑单元格实现可编辑单元格,如果有多列都需要可编辑 当点击一个单元格 则此整行都会进行编辑 如下图: 现改为单击某个单元格只对此单元格进行可编辑 <TABLE>标记添加 onClickCell <table id="dg" class="easyui-datagrid" data-options="onClickCell: onClickCell"> 需要进行编辑的列上添加 edi

VBA学习笔记之合并单元格

Range.Merge 注意合并区域左上单元格 1 Sub 太复杂不过也行() 2 num = Application.CountA([a:a]) 3 For i = 2 To num 4 If Cells(i, 1) = Cells(i + 1, 1) Then 5 n = n + 1 6 Else 7 Range(Cells(i - n, 1), Cells(i, 1)).Merge 8 n = 0 9 End If 10 Next 11 End Sub 1 Sub 改进版() 2 Appl

GridView合并单元格万能版(包括模板列)

今天修改旧的项目,发现之前用到的gridview合并单元格代码不适用于模板列.做了修改之后记录下来.两种方法,第一种适用于所有情况,第二种适用于合并依据列非模板列.两种方法如下:方法一: /// <summary> /// 合并GridView中某列相同信息的行(单元格) 包含模板列 根据ID=rowspanid 的hiddenfield控件的值来合并.需要合并的 单元格需加上这个控件.根据控件值合并.可以将控件放在某一列,也可以放在每一列.取值的时候分开就行.此方法适合任意列,特别是模板列

EasyUI DataGrid根据字段动态合并单元格

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fn" uri=&

JQuery EasyUI DataGrid动态合并单元格

/**        * EasyUI DataGrid根据字段动态合并单元格        * @param fldList 要合并table的id        * @param fldList 要合并的列,用逗号分隔(例如:"name,department,office");        */        function MergeCells(tableID, fldList) {            var Arr = fldList.split(",&quo

[easyui][datagrid]EasyUI DataGrid根据字段动态合并单元格

1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office"); */ function mergeCellsByField(tableID, colList) { var ColArray = colList.split(","); var tTable = $("#" +