easyUI 行合并整列更新

作者: 无实践无真知 | 来源:发表于2019-03-21 12:35 被阅读0次

easyUI 行合并整列更新
Excel小技巧——多行（列）合并为一行（列）
美化easyui样式及合并单元格
excel19
1-1.6000
easyui问题（更新）
2018-09-13
EasyUI知识点
2018-10-28 仪表盘制作过程中的问题汇总
Power BI6月更新功能一览

通过我对jQuery几天的学习整合出以下对列合并并对代码的高度封装整体效果出来数据为真实数据暂不方便展出
1.本文版权归作者所有
2.基本类高度封装不需要读者再进行扩展复制粘贴完成读者的业务即可
3.作者不反对复制代码
4.完整读完我的代码请读者也学会封装代码以后易用
5.基本类中的函数经过各种测试基本没有问题
6.随着需求的增加基本类我会及时更新不影响之前的功能
7.如果有疑问请在评论中提交即可
8.列更新直接调用for循环你的数据集list 调用：

// 这样即可全部刷新
list.forEash(item=>{
$("#table").datagrid("refreshRow",i); //i 为行号 从0开始
})

EasyUI 列合并（jQuery 扩展插件）


$.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;
                                    }
                                }
                            }
                        });
                });
        });
    }
});

封装的基本类


function Base() {

    const SUBMIT_STATUS_YES =1;
    const SUBMIT_STATUS_NO = -1;

    this.tableId = 'Mytable';
    this.propertyNames = ['',''];  //要合并的列
    this.ignoreList = [''];
    this.editIndex = -1;
    this.hasEditData = new Array();
    var submitStatus = -1;


    this.init = function(){
        var me = this;
            $('#'+this.tableId).datagrid({
                onClickCell: function(index,field,value){
                    me.editorDatagrid(index,field,value);
                }
            })
        this.InitSubmitStatus();

    }
    this.merge = function(){
        $("#"+this.tableId).datagrid("autoMergeCells",this.propertyNames);
    }
    this.ignore = function(field){
        var arr =  this.propertyNames;
        this.ignoreList.forEach(item=>{arr.push(item);})
        return !arr.includes(field);
    }
    this.editorDatagrid=function(index,field,value){
            if(submitStatus == SUBMIT_STATUS_YES){
                return false;
            }
            if(!this.ignore(field) && this.editIndex == -1){
                return false;
            }
            if(this.editIndex != -1){
                $("#"+this.tableId).datagrid('endEdit', this.editIndex);
                $("#"+this.tableId).datagrid("autoMergeCells", this.propertyNames);
                var row =  $('#'+this.tableId).datagrid('getData').rows[this.editIndex];
                this.hasEditData.push(row);
                if(this.ignore(field)){
                    $("#"+this.tableId).datagrid('beginEdit',index);
                }
                this.editIndex = index;
            }else{
                if(this.ignore(field)){
                    $("#"+this.tableId).datagrid('beginEdit',index);
                }
                this.editIndex = index;
            }
    }
    this.getHasEditDataArray = function(){
        return this.hasEditData;
    }
    this.getValue = function(v){
            if(v){
                return v;
            }
            return '';
    }
    this.getGlobalArray = function(){
        var rows = $("#"+this.tableId).datagrid("getRows");
        var dataList = new Array();
        if(rows &&rows.length>0) {
            for (var i = 0; i < rows.length; i++) {
                dataList.push(rows[i]);
            }
        }
        return dataList;
    }
    this.updateSubmitStatus = function(){
        submitStatus = SUBMIT_STATUS_YES;
    }
    this.InitSubmitStatus = function(){
        submitStatus = SUBMIT_STATUS_NO
    }
    this.submitInfoAbleEdit = function(){
        this.InitSubmitStatus();
    }

    this.submitInfoDisAbleEdit = function(){
        this.updateSubmitStatus();
    }

}

实现基本类覆盖属性


  $(function () {
  var baseE = new Base();
        function PreViewOfPresaleAnnualBussinessPlan() {
            this.tableId = 'table'; //必须
            this.propertyNames = ['carName', 'typeName', 'category'];  //要合并的列  要和并的列不参与编辑 必须
        }

        var preViewOfPresaleAnnualBussinessPlan = new PreViewOfPresaleAnnualBussinessPlan();
        $.extend(baseE, preViewOfPresaleAnnualBussinessPlan);
        baseE.init();

        $("#confirm").on("click", function () {
            var list = baseE.getHasEditDataArray(); //这是调用基本类中的方法
            var list = baseE.getGlobalArray(); //这是获取所有的行的方法

        });
function onLoadSuccess(data) {
        baseE.merge()
    }

实现列合并并且指定列可编辑

 <table id="table"  rownumbers="true"
               data-options="fitColumns: true,
               iconCls: 'icon-edit',
                remoteSort:true,
                url:url,
                pagination:false,
                singleSelect:true,
                onLoadSuccess:onLoadSuccess,
                method: 'get'">
            <thead frozen="true">
            <tr>
                <th data-options="field:'id',width:80,align:'center',hidden:true"></th>
                <th data-options="field:'carName',width:200,align:'center'">名称</th>
                <th data-options="field:'typeName',width:200,align:'center'">类型</th>
                <th data-options="field:'category',width:200,align:'center'">业务类别</th>
            </tr>
            </thead>
            <thead>
            <tr>
                <th data-options="width:400,align:'center'" colspan="2">1</th>
                <th data-options="width:400,align:'center'" colspan="2">2</th>
                <th data-options="width:400,align:'center'" colspan="2">3</th>
                <th data-options="width:400,align:'center'" colspan="2">4</th>
                <th data-options="width:400,align:'center'" colspan="2">5</th>
                <th data-options="width:400,align:'center'" colspan="2">6</th>
                <th data-options="width:400,align:'center'" colspan="2">7</th>
                <th data-options="width:400,align:'center'" colspan="2">8</th>
                <th data-options="width:400,align:'center'" colspan="2">9</th>
                <th data-options="width:400,align:'center'" colspan="2">10</th>
                <th data-options="width:400,align:'center'" colspan="2">11</th>
                <th data-options="width:400,align:'center'" colspan="2">12</th>
                <th data-options="width:400,align:'center'" colspan="2">合计</th>
            </tr>
                  <tr>
                <th data-options="field:'januaryOld',width:400,align:'center' ">第一</th>
                <th data-options="field:'january',width:400,align:'center' ,editor:'text'">第二</th>
                <th data-options="field:'februaryOld',width:400,align:'center'">第一</th>
                <th data-options="field:'february',width:400,align:'center',editor:'text'">第二</th>
                <th data-options="field:'marchOld',width:400,align:'center'">第一</th>
                <th data-options="field:'march',width:400,align:'center',editor:'text'">第二</th>
                <th data-options="field:'aprilOld',width:400,align:'center'">第一</th>
                <th data-options="field:'april',width:400,align:'center',editor:'text'">第二</th>
                <th data-options="field:'mayOld',width:400,align:'center'">第一</th>
                <th data-options="field:'may',width:400,align:'center',editor:'text'">第二</th>
                <th data-options="field:'juneOld',width:400,align:'center'">第一</th>
                <th data-options="field:'june',width:400,align:'center',editor:'text'">第二</th>
                <th data-options="field:'julyOld',width:400,align:'center'">第一</th>
                <th data-options="field:'july',width:400,align:'center',editor:'text'">第二</th>
                <th data-options="field:'augustOld',width:400,align:'center'">第一</th>
                <th data-options="field:'august',width:400,align:'center',editor:'text'">第二</th>
                <th data-options="field:'septemberOld',width:400,align:'center'">第一</th>
                <th data-options="field:'september',width:400,align:'center',editor:'text'">第二</th>
                <th data-options="field:'octoberOld',width:400,align:'center'">第一</th>
                <th data-options="field:'october',width:400,align:'center',editor:'text'">第二</th>
                <th data-options="field:'novemberOld',width:400,align:'center'">第一</th>
                <th data-options="field:'november',width:400,align:'center',editor:'text'">第二</th>
                <th data-options="field:'decemberOld',width:400,align:'center'">第一</th>
                <th data-options="field:'december',width:400,align:'center',editor:'text'">第二</th>
                <th data-options="field:'totalOld',width:400,align:'center'">近12个月累计</th>
                <th data-options="field:'total',width:400,align:'center',editor:'text'">第二</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

效果

1552900193(1).jpg

easyUI 行合并整列更新
通过我对jQuery几天的学习整合出以下对列合并并对代码的高度封装整体效果出来数据为真实数据暂不方便展...
Excel小技巧——多行（列）合并为一行（列）
1、多行文本合并成一行方法一：第1步：选中要合并的文本，调整列宽到足够宽。第2步：依次单击【开始】-【填充】...
美化easyui样式及合并单元格
美化easyui样式（需要修改easyui datagrid部分源码）及合并单元格 1.修改datagrid样式 ...
excel19
题目①②③④⑤⑥⑦⑧⑨⑩ 1.改名 2.①自动调整列宽、行高。-------开始→样式→自动调整列宽/行高 ②将第...
1-1.6000
1.excel可以用干嘛 2.工作表与工作簿的区别 3.如何调整列宽和行高 4.如何快速移动行或列 5.合并和拆分...
easyui问题（更新）
1、easyuieasuiUI中combobox的启用禁用写法： 2、Easyui重置表单 3、combobox ...
2018-09-13
填充整列1.选中整列2.按F23.在第一行输入想要的值4.Ctrl+回车
EasyUI知识点
1.Easyui datagrid 取消选择行： //取消选择行$('#dg_id').datagrid('cle...
2018-10-28 仪表盘制作过程中的问题汇总
1、当取消勾选“更新时自动调整列宽”或是刷新透视表时，条件格式的图标集会消失，恢复成原始数据：问题：不要选中整列...
Power BI6月更新功能一览
PowerBI的6月更新来了，这次的更新发布了多项改进，功能更加强大，以下是更新的完整列表：报告更新了窗格设计...