通过我对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
