一个基于Extjs 3的支持单元格合并的面板

这是一个支持单元格合并的Panel，不是基于 GridPanel，而是基于 Ext.Panel 这个类。内部表格实现是基于 html 的 <table> 标签的。支持增删。效果图如下：



代码依赖 Extjs 3 和 JQuery，请自行添加。废话少说，上代码。

js 部分（直接调用 tableTag() 方法就可以显示出效果了）：

Array.prototype.remove=function(dx)
{
if(isNaN(dx) || dx > this.length || dx < 0) return false;

for(var i=0,n=0;i<this.length;i++)
{
if(this[i] != this[dx]) this[n++] = this[i]
}
this.length -= 1
};

Ext.ns('Ext.ns.my.tag');

/**
* 这是一个可以自适应、自动合并的表格面板。此代码依赖 JQuery。
*/
Ext.ns.my.tag.TagTablePanel = Ext.extend(Ext.Panel,
{
/**
* 默认自动显示滚动条
*/
autoScroll : true,
/**
* 列标题。元素是 js 对象。下面是对象各个字段的意义：
*
* header:
* 		必输项；类型：文本。表示列标题
*
* width:
* 		可选项；类型：文本，正整数；单位：px。表示列宽。支持正整数，和'*', 'auto'。默认 '*'。
*
* textHorizontalAlignment:
* 		可选项；类型：文本。表示数据域文本水停靠位置。可选的值为：'left'、'center'、'justify'、
* 		'inherit'和'right'。默认不设定此项。
*
* renderer:
* 		可选项；函数。用于根据数据渲染显示。参数 (oldValue, rowNum, colNum, record)。返回一个
* 		HTML 字符串。默认照常显示数据文本。
*
* hidden:
* 		可选项；类型：布尔值。表示当前列是否隐藏。true 表示隐藏。默认 false（不隐藏）。
*/
colHeaders: [],
/**
* 要合并的列的序号，从 0 开始
*/
mergeCols: [],
/**
* 面板中的数据
*/
records: [],
/**
* 被点击的单元格所在的列号，默认 -1
*/
selectedColNumber: -1,
/**
* 被点击的单元格所在的行号，默认 -1
*/
selectedRowNumber: -1,
initComponent : function()
{
Ext.ns.my.tag.TagTablePanel.superclass.initComponent.call(this); // 调用父类的初始化方法

// 初始化表格和列标题
this.html = '<table id="' + this.id + '-table" class="table-tag-table">' + this.getHeaderHtml(this) + '</table>';
},
/**
* 单元格被点击时，执行的回调函数。
*
* 参数 _this：指 Panel 本身
* 参数 cell ：指单元格所在的 Dom（td）
*/
cellClickCallback : function(_this, cell) { },
/**
* private
* 获取表示列宽的 CSS 文本。
*/
getColWidthStyleText: function(width)
{
var w = 'width: ';
if(width == undefined || width == '*') w += '*;';
else if(width == 'auto') w += 'auto;';
else w += (width + 'px;');

return w;
},
/**
* private
* 获取列标题所在行的 HTML 表示，用于生成列标题。
*
* 参数 _this：指 Panel 本身
*/
getHeaderHtml: function(_this)
{
var html = '<tr>', co = null, width = null;

var width = null; // 表示列宽的 CSS 样式文本

for(var i = 0; i < _this.colHeaders.length; i++)
{
co = _this.colHeaders[i];

if(co.hidden == true) continue; // 如果隐藏，就干脆不渲染。
width = _this.getColWidthStyleText(co.width);

html += ('<th class="table-tag-th" style="' + width + '">' + co.header + "</th>");
}
html += '</tr>';

return html;
},
/**
* 获取被选择的单元格的 ID（td 的 ID）。
* 如果没有选择到单元格，返回 false。
*/
getSelectedCellId: function()
{
return (this.selectedRowNumber < 0 || this.selectedColNumber < 0) ? false
: (this.id + '-row-' + this.selectedRowNumber + '-col-' + this.selectedColNumber);
},
/**
* private
* 一个自动合并单元格的方法。这个合并是根据数据实际值来的，而非渲染结果
*/
merge : function()
{
var mergeCols = this.mergeCols;
var records = this.records;

/**
* 按列合并单元格
*/
for(var t = 0; t < mergeCols.length; t++)
{
var col = mergeCols[t];
var theCell = $('#' + this.id + '-row-0-col-' + col);               // 注意行和列
var theRecord = records[0];
for(var i = 1; i < records.length; ++i)
{
var currCell = $('#' + this.id + '-row-' + i + '-col-' + col);  // 注意行和列
var currRecord = records[i];
if(currRecord[col] == theRecord[col] && currCell.is(":visible") )
{
var rowspan = theCell.attr('rowspan');
if(rowspan == undefined) rowspan = 1;

theCell.attr('rowspan', parseInt(rowspan) + 1);
currCell.hide();    // 注意行和列
}
else
{
theCell = currCell;
theRecord = currRecord;
}
}
}
},
/**
* 设置被选择的单元格中的文本值。
* 如果一个单元格是跨行的，那么意味着，它下面的几行数据相同，但是被隐藏了。这时，会同步更改相邻的相同数据。
*/
getSeletedValue:function()
{
var td = $("#" + (this.id + '-row-' + this.selectedRowNumber + '-col-' + this.selectedColNumber));

return (this.selectedRowNumber < 0 || this.selectedColNumber < 0) ? false : td.text();
},
/**
* 改变被选择的单元格中的文本值。
*
* 参数 value：新的值
*/
setSeletedValue:function(value)
{
// 先更改数据域中的响应数据，再重新进行渲染

var row = this.selectedRowNumber, col = this.selectedColNumber;

if(this.records.length <= 0) return false;

// 往下找相同的数据进行更改
var basev = this.records[row][col];
for(var i = row; i < this.records.length; i++)
{
if(this.records[i][col] == basev) this.records[i][col] = value;
else break;
}

// 往上找相同的数据进行更改
for(var i = row; i >= 0; i--)
{
if(this.records[i][col] == basev) this.records[i][col] = value;
else break;
}

this.selfAdapt(this); // 渲染
},
/**
* private
* 获取排序算法。重写这个方法时，请确保它应该被用于对数据进行分类
*
* 参数 _this：指 Panel 本身
*/
getSortAalgorithm: function(_this)
{
// 记录比较方法
var recordSort = function(a, b)
{
var mergeCols = _this.mergeCols;

for(var i = 0; i < mergeCols.length; i++)
{
var col = mergeCols[i];
if(a[col] > b[col]) return 1;
else if(a[col] < b[col]) return -1;
}

return 0;
};

return recordSort;
},
/**
* private
* 根据列编号获取单元格文本的水平居中值。在方法 selfAdapt 中调用，用于渲染表格数据域。
*/
getTextHorizontalAlignmentByCol: function(col, _this)
{
var t = _this.colHeaders[col].textHorizontalAlignment;
if(t == undefined) return '';
else return "text-align: " + t + ';';
},
/**
* private
* 获取渲染后的文本。
*/
getRenderedText: function(oldValue, row, col, record, _this)
{
var t = _this.colHeaders[col].renderer;
if(t == undefined) return oldValue;
else return t(oldValue, row, col, record);
},
/**
* private
* 判断单元格所在的列要不要隐藏。
*/
isHiddenColumn: function(col, _this)
{
var t = _this.colHeaders[col].hidden;

if(t == undefined || t == false) return false;
else return true;
},
/**
* private
* 自适应，也就是根据数据内容重新渲染。
*
* 参数 me：指 Panel 本身
*/
selfAdapt: function(me)
{
me.records.sort(me.getSortAalgorithm(me)); // 根据要被合并的列进行排序

var tbl = $('#' + me.id + '-table');  // 获取表格

tbl.children().remove(); // 移除表下面的所有行，等待添加。

$(me.getHeaderHtml(me)).appendTo(tbl); // 添加标题

/**
* 重新添加所有行
*/
var row = null;
for(var i = 0; i < me.records.length; ++i)
{
var row = '<tr id="' + (me.id + '-row-' + i) +'" class="table-tag-tr">';

var cel = null; // 表示单元格的 HTML 字符串
var tha = null; // 数据文本的水平停靠方式
var rdt = null; // 被渲染后的文本
var ich = null; // 单元格所在的列是否被隐藏
for(var j = 0; j < me.records[i].length; j++)
{
ich = me.isHiddenColumn(j, me);
if(ich) continue; // 如果隐藏，就直接跳过渲染

tha = me.getTextHorizontalAlignmentByCol(j, me);
rdt = me.getRenderedText(me.records[i][j], i, j, me.records[i], me);

cel = '<td'
+ ' id="' + (me.id + '-row-' + i + '-col-' + j) +'"'
+ ' class="table-tag-td"'
+ ' style="' + tha + '">' + rdt + '</td>';
row += cel;
}
row += '</tr>';
$(row).appendTo(tbl);
}

// 合并单元格
me.merge();

// 添加单元格事件
$(".table-tag-td").click(function()
{
var inf = this.id.split('-');
me.selectedRowNumber = inf[inf.length - 3];
me.selectedColNumber = inf[inf.length - 1];

me.cellClickCallback(me, this); // 单元格单机事件
});
},
/**
* 添加一行。数据应该是数组的形式，注意数据与标题之间的对应。
* 会自动进行基本校验，如果失败，返回false。
*
* 参数 record：要增加的数据，数组形式
*/
addRow : function(record)
{
// 对数据进行校验
if(this.records.length > 0 && this.records[0].length != record.length)
{
return false;
}

this.records.push(record);

this.selfAdapt(this);
},
/**
* 根据行号移除一行。移除失败，就返回 false。
*
* 参数 rowNum：被删除行的行号
*/
removeRow: function(rowNum) // 参数：行号
{
if(isNaN(rowNum) || rowNum < 0 || this.records <= rowNum) return false;

this.records.remove(rowNum); // 移除数据
this.selfAdapt(this);        // 重新渲染
}
});

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function tableTag()
{

var testdata =
[
// 年级，班级，学生，分数，班级平均分
['数学', '拓扑学', '张朝阳', 97, 91],
['数学', '概率论', '刘向阳', 67, 88],
['数学', '分析',   '段明海', 89, 91],
['数学', '概率论', '红太阳', 99, 88],
['数学', '拓扑学', '章北海', 98, 91],
['数学', '概率论', '左明阳', 87, 88],

['化学', '有机化学', '赵钱孙', 85, 91],

['物理学', '力学',   '小透', 91, 85],
['物理学', '热力学', '小兰', 84, 93],
['物理学', '力学',   '小红', 62, 85],
['物理学', '电磁学', '小明', 85, 93],
['物理学', '力学',   '小绿', 93, 85],
['物理学', '电磁学', '大为', 96, 93],

['化学', '有机化学', '周吴郑', 95, 91]
];

var c = 0;

/**
* 一个随机获取数据的方法
*/
var getARecord = function()
{
var cd = testdata[c++];
if(c == testdata.length)
c = 0;

return cd;
};

/**
* 表格所在 panel 的 id。
*
* panel 的 id 给定了，那么
* 表格的 id 也确定了，就是 [id]-table；
* 表格行的 id 也确定了，就是 [id]-row-[row]；
* 单元格的 id 也确定了，就是 [id]-row-[row]-col-[col]
*/
var id = 'table-tag-panel';
var table = new Ext.ns.my.tag.TagTablePanel(
{
id: id,
colHeaders:
[
{
header: '学科', width: 60, textHorizontalAlignment: 'center',
renderer: function(oldValue, rowNum, colNum, record)
{
return '<a href="#"><b>' + oldValue + "</b></a>";
}
},
{ header: '课程' },
{ header: '讲师', textHorizontalAlignment: 'right' },
{ header: '课时', width: 50, hidden: true },
{ header: '平均课时', width: 50, textHorizontalAlignment: 'center' }
],
mergeCols: [0, 1, 4],
title: '<table>标签演示',
region: 'center', // 放在中心区域
tbar:

[{
text: '【增加一行】',
handler: function(a, b)
{
Ext.getCmp(id).addRow(getARecord());
}
},
{
text: '【删除第4行】',
handler: function(a, b)
{
Ext.getCmp(id).removeRow(3);
}
},
{
text: '【取值】',
handler: function(a, b)
{
var val = Ext.getCmp(id).getSeletedValue();
Ext.Msg.alert("数据", val == false ? "尚未选择单元格" : val);
}
},
{
text: '【改值】',
handler: function(a, b)
{
Ext.getCmp(id).setSeletedValue("XXX");
}
}]
});

// 创建一个窗口。
var win = new Ext.Window(
{
title: 		"HTML标签： <table>",
width:		600,
height:		480,
layout:		'border',
resizable:	false,
modal:		true, 		// 设置窗口为模态
bodyStyle: { background : '#FFFFFF' },
items : [ table ],
buttonAlign: 'center',	//居中
buttons :
[{
text : "关闭",
handler : function(){ win.close(); }
}]
});

// 显示窗口
win.show();

}

表格样式 css.

.table-tag-table {
width: 100%; /* 表格宽度自适应 */
}

.table-tag-tr {
border: 1px solid black;
}

.table-tag-th {
background-color: #FF2F2F;
font-weight: bold;
text-align: center;
color: white;
width: *;
padding: 10px;
}

.table-tag-td {
word-break: break-all;
padding: 10px;
background-color: #D8E4F3;
cursor:pointer;
}