|
|
@@ -2,18 +2,99 @@
|
|
|
* @Description:
|
|
|
* @Author: hy
|
|
|
* @Date: 2019-08-12 17:59:33
|
|
|
- * @LastEditTime: 2019-08-15 14:24:07
|
|
|
+ * @LastEditTime: 2019-08-15 14:24:07
|
|
|
*/
|
|
|
Ext.define('uas.view.grid.mergeColumn.MergeColumnGrid', {
|
|
|
extend: 'Ext.grid.Panel',
|
|
|
xtype: 'mergeColumnGrid',
|
|
|
+ cls:'x-merge-grid',
|
|
|
columnLines: true,
|
|
|
+ sortableColumns: false,
|
|
|
+ bufferedRenderer:false,
|
|
|
|
|
|
- store: {
|
|
|
- type: 'companies',
|
|
|
- sorters: {
|
|
|
- property: 'name',
|
|
|
- direction: 'DESC'
|
|
|
+ initComponent: function () {
|
|
|
+ var me = this;
|
|
|
+ Ext.apply(me, {
|
|
|
+ store: Ext.create('uas.store.Companies',{})
|
|
|
+ });
|
|
|
+ me.callParent(arguments);
|
|
|
+ me.store.load(function(records, operation, success) {
|
|
|
+ const grid = me;
|
|
|
+ //1000条数据 100延迟 超过10000条数据 延迟固定为1秒
|
|
|
+ let time = records.length*0.1>1000?1000:records.length*0.1;
|
|
|
+ var myMask = new Ext.LoadMask({
|
|
|
+ msg: "正在合并单元格...",
|
|
|
+ target: grid.ownerCt
|
|
|
+ });
|
|
|
+ myMask.show();
|
|
|
+ setTimeout(() => {
|
|
|
+ grid.mergeCells(grid,[...new Array(grid.columns.length).keys()]);
|
|
|
+ myMask.destroy();
|
|
|
+ }, time);
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /*
|
|
|
+ * 合并列
|
|
|
+ * cols 需要合并的列index
|
|
|
+ */
|
|
|
+ mergeCells:function(grid,cols){
|
|
|
+ var id = grid.getView().getId();
|
|
|
+ //清除所有监听事件 避免一些bug
|
|
|
+ grid.getView().clearListeners();
|
|
|
+ //获取view
|
|
|
+ var gridview = document.getElementById(id);
|
|
|
+ //获取所有的tr[]
|
|
|
+ var trArray = gridview.getElementsByTagName('tr');
|
|
|
+ //只有一行时不合并
|
|
|
+ var length = trArray.length;
|
|
|
+ if (length <= 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //把所有的行都放入第一个table 并把原来的列删除
|
|
|
+ for (var i = 1; i < length; i++) {
|
|
|
+ //指定位置插入对应table行的html文本
|
|
|
+ trArray[i - 1].insertAdjacentHTML("afterEnd", trArray[i].innerHTML);
|
|
|
+ trArray[i + 1].remove();
|
|
|
+ }
|
|
|
+
|
|
|
+ //margin像素 根据该合并grid的每一行的高度而定
|
|
|
+ const pixel = 25;
|
|
|
+
|
|
|
+ //通用方法行合并单元格
|
|
|
+ var length = trArray.length;
|
|
|
+ var html = "<hr style='height:0.1px;border:none;border-bottom:#e9e9e9 1px solid;'>";//分割线
|
|
|
+ for (var i in cols) {
|
|
|
+ var column = cols[i];//列
|
|
|
+ var k = 0;//开始合并的列
|
|
|
+ for (var i = 0; i < length; i++) {
|
|
|
+ var num = 1;//需要合并的列数 默认是一列
|
|
|
+ var data = trArray[i].childNodes[column].innerText;
|
|
|
+ for (var j = i + 1; j < length; j++) {
|
|
|
+ if (data == trArray[j].childNodes[column].innerText) {
|
|
|
+ trArray[j].childNodes[column].style.display = 'none';
|
|
|
+ if (j == length - 1) {
|
|
|
+ k = j;
|
|
|
+ }
|
|
|
+ num++;
|
|
|
+ } else {
|
|
|
+ k = j;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ trArray[i].childNodes[column].setAttribute('rowSpan', num);
|
|
|
+ trArray[i].getElementsByTagName("div")[column].setAttribute("style", "text-align:center");
|
|
|
+ if (num > 1) {
|
|
|
+ trArray[i].getElementsByTagName("div")[column].style.marginTop = "" + pixel * (num - 1) + "px";
|
|
|
+ }
|
|
|
+ trArray[k].childNodes[column].insertAdjacentHTML("afterbegin", html);
|
|
|
+ if (k == length - 1) {//说明此时i是最后一行
|
|
|
+ trArray[k].getElementsByTagName("div")[column].setAttribute("style", "text-align:center");
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ i = k - 1;
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -38,15 +119,13 @@ Ext.define('uas.view.grid.mergeColumn.MergeColumnGrid', {
|
|
|
dataIndex: 'priceChange',
|
|
|
|
|
|
width: 80,
|
|
|
- sortable: true,
|
|
|
- renderer: 'renderChange'
|
|
|
+ sortable: true
|
|
|
}, {
|
|
|
text: '% Change',
|
|
|
dataIndex: 'priceChangePct',
|
|
|
|
|
|
width: 100,
|
|
|
- sortable: true,
|
|
|
- renderer: 'renderPercent'
|
|
|
+ sortable: true
|
|
|
}]
|
|
|
}, {
|
|
|
text: 'Last Updated',
|
zhuth