ExtJS 4.2 Grid组件的光元格合并

2.1 运行图

图片 1

 

3. 代码和在线演示

2. 示例

 目录

  1. 原理

2.
差不多排列合并

3.
代码和在线演示

 

目录

1.
介绍

  1. 示例

3.
资源下载

 

2. 大抵列合并

Gird的统一而分为单列合并和多列合并,其中基本上列合并而分为两种植:

率先种:逐个列合并。

亚种植:相同列合并。

2.2 代码

Ext.create('Js.ux.RatingStarField', {
    fieldLabel: '发货速度',
    labelWidth: 60,
    width: 220,
}),
Ext.create('Js.ux.RatingStarField', {
    fieldLabel: '服务态度',
    labelWidth: 60,
    width: 220,
}),
Ext.create('Js.ux.RatingStarField', {
    fieldLabel: '描述相符',
    labelWidth: 60,
    width: 220,
    value:3
})

  

1.2 原理

上一文章是扩展ExtJS自带的Date组件。在这里拿创设一个评分组件。

3.2 在线演示

在线演示:http://www.akmsg.com/ExtJS/index.html#App.Demo.MergeGridTab

 

End

Web开发的路系列文章

食谱加载中…

1.2 Css样式

.x-rating{min-height:25px;}
.x-rating .x-component-outer{position: relative; padding:0.6em;min-height: 40px;}
.x-rating .starContainer, .x-rating .starFakeContainer{position:absolute; top:0px;left:0px; width:100%; height:100%; }
.x-rating .starFakeContainer{z-index:10;}
.x-rating .starContainer{display:-webkit-box; -webkit-box-align:center;-webkit-box-pack:center;}
.x-rating .starContainer .center, .x-rating .starContainer .left, .x-rating .starContainer .right{-webkit-box-flex:1}
.x-rating .star{border:0px !important;padding:0px !important;margin:0px 0px 0px -12.5px !important;position:absolute; left:16.66%; -webkit-mask:url(star.png) left center no-repeat; -webkit-mask-size:25px 25px; background-color:#ff0000; width:25px; height:25px; opacity:.2; -webkit-transform: scale(1,1);}
.x-rating .star2{left:33.33%;}
.x-rating .star3{left:49.99%;}
.x-rating .star4{left:66.66%;}
.x-rating .star5{left:83.33%;}
.x-rating .star.active{-webkit-transform: scale(1,1); opacity:1;}

 

1.1.1 Grid组件

图片 2

1.4 成员

名称 类型 说明
value 属性 初始化时指定星数,数值范围0~5。默认为0。
setValue(value) 方法 设置评分组件的数值,数值范围0~5。
getValue() 方法 获取评分组件的数值。

 

1.1.2 HTML代码

图片 3

由这些代码中好看看,Grid组件可分为grid-header和grid-body
两片区域(若含工具栏和分页栏,它们都见面含有各自的单身区域)。

里面grid-body包含了成百上千tr元素,每一个tr都是表示Grid组件中之一条龙数;每个tr内部还带有了好多td,每个td表示一个单元格。

1.3 图标

图片 4  

 

3.1 代码

/**
* 合并Grid的数据列
* @param grid {Ext.Grid.Panel} 需要合并的Grid
* @param colIndexArray {Array} 需要合并列的Index(序号)数组;从0开始计数,序号也包含。
* @param isAllSome {Boolean} 是否2个tr的colIndexArray必须完成一样才能进行合并。true:完成一样;false:不完全一样
*/
function mergeGrid(grid, colIndexArray, isAllSome) {
    isAllSome = isAllSome == undefined ? true : isAllSome; // 默认为true

    // 1.是否含有数据
    var gridView = document.getElementById(grid.getView().getId() + '-body');
    if (gridView == null) {
        return;
    }

    // 2.获取Grid的所有tr
    var trArray = [];
    if (grid.layout.type == 'table') { // 若是table部署方式,获取的tr方式如下
        trArray = gridView.childNodes;
    } else {
        trArray = gridView.getElementsByTagName('tr');
    }

    // 3.进行合并操作
    if (isAllSome) { // 3.1 全部列合并:只有相邻tr所指定的td都相同才会进行合并
        var lastTr = trArray[0]; // 指向第一行
        // 1)遍历grid的tr,从第二个数据行开始
        for (var i = 1, trLength = trArray.length; i < trLength; i++) {
            var thisTr = trArray[i];
            var isPass = true; // 是否验证通过
            // 2)遍历需要合并的列
            for (var j = 0, colArrayLength = colIndexArray.length; j < colArrayLength; j++) {
                var colIndex = colIndexArray[j];
                // 3)比较2个td的列是否匹配,若不匹配,就把last指向当前列
                if (lastTr.childNodes[colIndex].innerText != thisTr.childNodes[colIndex].innerText) {
                    lastTr = thisTr;
                    isPass = false;
                    break;
                }
            }

            // 4)若colIndexArray验证通过,就把当前行合并到'合并行'
            if (isPass) {
                for (var j = 0, colArrayLength = colIndexArray.length; j < colArrayLength; j++) {
                    var colIndex = colIndexArray[j];
                    // 5)设置合并行的td rowspan属性
                    if (lastTr.childNodes[colIndex].hasAttribute('rowspan')) {
                        var rowspan = lastTr.childNodes[colIndex].getAttribute('rowspan') - 0;
                        rowspan++;
                        lastTr.childNodes[colIndex].setAttribute('rowspan', rowspan);
                    } else {
                        lastTr.childNodes[colIndex].setAttribute('rowspan', '2');
                    }
                    // lastTr.childNodes[colIndex].style['text-align'] = 'center';; // 水平居中
                    lastTr.childNodes[colIndex].style['vertical-align'] = 'middle';; // 纵向居中
                    thisTr.childNodes[colIndex].style.display = 'none';
                }
            }
        }
    } else { // 3.2 逐个列合并:每个列在前面列合并的前提下可分别合并
        // 1)遍历列的序号数组
        for (var i = 0, colArrayLength = colIndexArray.length; i < colArrayLength; i++) {
            var colIndex = colIndexArray[i];
            var lastTr = trArray[0]; // 合并tr,默认为第一行数据
            // 2)遍历grid的tr,从第二个数据行开始
            for (var j = 1, trLength = trArray.length; j < trLength; j++) {
                var thisTr = trArray[j];
                // 3)2个tr的td内容一样
                if (lastTr.childNodes[colIndex].innerText == thisTr.childNodes[colIndex].innerText) {
                    // 4)若前面的td未合并,后面的td都不进行合并操作
                    if (i > 0 && thisTr.childNodes[colIndexArray[i - 1]].style.display != 'none') {
                        lastTr = thisTr;
                        continue;
                    } else {
                        // 5)符合条件合并td
                        if (lastTr.childNodes[colIndex].hasAttribute('rowspan')) {
                            var rowspan = lastTr.childNodes[colIndex].getAttribute('rowspan') - 0;
                            rowspan++;
                            lastTr.childNodes[colIndex].setAttribute('rowspan', rowspan);
                        } else {
                            lastTr.childNodes[colIndex].setAttribute('rowspan', '2');
                        }
                       // lastTr.childNodes[colIndex].style['text-align'] = 'center';; // 水平居中
                        lastTr.childNodes[colIndex].style['vertical-align'] = 'middle';; // 纵向居中
                        thisTr.childNodes[colIndex].style.display = 'none'; // 当前行隐藏
                    }
                } else {
                    // 5)2个tr的td内容不一样
                    lastTr = thisTr;
                }
            }
        }
    }
}

  

3.1 Demo下载

地址:ExtJS4.2_RatingStarDemo.zip

 

1. 原理

3. 资源下载

1.2.2 示例

1)
tr1与tr2比较,两者值相当:设置tr1的rowspan属性的值+1;设置第tr2之td隐藏。

图片 5

2) tr1与tr3比较,两者值当:设置tr1的rowspan属性的值+1;设置第tr3底td隐藏。

图片 6

3)
tr1与tr4比较,两者的td不顶。跳了本次比较,进行下一样不行比:tr4与tr5比较(当前执行和生一行进行比较)。

图片 7

 

1.1 JavaScript代码

/*!
* 评分组件
*/
Ext.define('App.Demo.RatingStarFiledDemoTab', {
    extend: 'Ext.panel.Panel',
    layout: 'fit',
    closable: true,
    reload: function () {
    },
    initComponent: function () {
        var me = this; 

        // panel渲染后
        me.on('afterrender', function () {

        });
        var _container = AkExtJS.extjs.createPanel({
            layout: 'vbox',
            items: [
                Ext.create('Ext.form.Display', {
                    width: '100%',
                    value: '<h1>评分组件</h1>' +
                        '<p>文章地址:<a href="http://www.cnblogs.com/polk6/p/5965570.html" target="_blank">http://www.cnblogs.com/polk6/p/5965570.html</a></p>' +
                        '<p>此处为创建一个新的组件:评分组件</p>'
                }),
                Ext.create('Js.ux.RatingStarField', {
                    name: 'speedScore',
                    fieldLabel: '发货速度',
                    labelWidth: 60,
                    width: 220,
                }),
                Ext.create('Js.ux.RatingStarField', {
                    name: 'serviceScore',
                    fieldLabel: '服务态度',
                    labelWidth: 60,
                    width: 220,
                }),
                Ext.create('Js.ux.RatingStarField', {
                    name: 'desScore',
                    fieldLabel: '描述相符',
                    labelWidth: 60,
                    width: 220,
                    value:3
                }),
                Ext.create('Ext.button.Button', {
                    text: '设置【发货速度】为5星',
                    handler: function (thisControl, event) {
                        _container.down('[name=speedScore]').setValue(5);
                    }
                }),
                Ext.create('Ext.button.Button', {
                    text: '取值',
                    handler: function (thisControl, event) {
                        var txt = '发货速度:' + _container.down('[name=speedScore]').getValue() + '<br/>' +
                                '服务态度:' + _container.down('[name=serviceScore]').getValue() + '<br/>' +
                                '描述相符:' + _container.down('[name=desScore]').getValue() + '<br/>';
                        Ext.Msg.alert('系统提示', txt);
                    }
                }),
            ]
        });

        Ext.applyIf(me, {
            items: [_container]
        });
        me.callParent(arguments);
    }
});

 

ExtJS 4.2 Grid组件本身并不曾提供单元格合并功能,需要自己实现这个作用。

3.2 在线示例

地址:http://www.akmsg.com/ExtJS/index.html#App.Demo.RatingStarFiledDemoTab

 

End

Web开发的路系列文章

菜单加载中…

1.1.3 结构图

图片 8

 

1. 介绍

代码参考的凡 Sencha Touch
2上之一个RatingStar推而广之插件,在此基础及举行了移植到ExtJS
4.2,并扩张了默认值、form表单支持等功效。

2.2 全部列合并

说明:只有附近tr所指定的td都一样才会展开联。

示例

图片 9

 

1.1 HTML代码分析

率先创建一个Grid组件,然后查下之HTML源码。

2.1 逐个列合并

说明:每个列于头里列合并的前提下而个别合并。

示例

图片 10

 

1.2.1 步骤说明

切切实实的操作是本着tr元素,步骤如下:

1)
比较第行tr与第行tr的之一td的价值,若两尽的价当:设置第行tr的td的rowspan属性的值+1;设置第行tr的td隐藏。

2)
比较第行tr与第行tr的某部td的值,若两执行的价值相当:设置第行tr的td的rowspan属性的值+1;设置第行tr的td隐藏。

3)
重复上面的手续,若两行的价值不对等,就超过了本次比较,进行下一致软比:当前执行和生一行进行比较。