Ext js 4 全选和反选

来源：互联网发布：excel统计空单元格数据编辑：程序博客网时间：2024/06/05 11:38

Ext版本:4.2

相信经常做Grid的一定遇到全选和反选吧,虽然Ext里有SelectionMode可以直接使用,但是面对较复杂的业务,SelectionMode也力不从心

于是自己定义一个CheckBox来自己添加全选反选功能,注意这里是反选是选择相反的,而不是英文deselect的取消选择的意思

1,先在Grid的columns里定义一个dom的CheckBox,同时给一个ID

ValuePanel = new Ext.grid.GridPanel({            width: 200,            tbar: [{                xtype: 'checkboxgroup',                vertical: true,                width: 100,                id:'CheckAll',                items: [{                    boxLabel: '全选', name: 'rb1', inputValue: '1', handler: function (a, v) {                        if (a.checked == true) {                            SelectAllToFieldList();                            RefeshValue();                        }                                            }                }, {                    boxLabel: '反选', name: 'rb2', inputValue: '2', handler: function (a, v) {                        if (a.checked==true) {                            DeselectAllToFieldList();                            RefeshValue();                        }                                            }                }]            }],            region: "center",            xtype: 'grid',            store: storeFieldList,            columns: [                {                    text: '选择', dataIndex: 'IsChecked', width: 35, renderer: function (v, r, s, i) {                        var html = '<input id="cb_' + r.record.get('Key') + '" onclick="paraCheckBoxClick(this)" type="checkbox" />';                        return html;                    }                },                { text: '键', dataIndex: 'Key', hidden: true },                { text: '参数字段', dataIndex: 'Value', width: 400 }],            listeners: {                itemdblclick: function (a, b, c, d, e) {                    // 双击选择                    Ext.getCmp('CheckAll').setValue({ rb1: false, rb2: false });                    var cb = document.getElementById('cb_' + b.get('Key'));                    cb.checked = !cb.checked;                    if (cb.checked) {                        AddFieldList(b.get('Key'));                    } else {                        DelFieldList(b.get('Key'));                    }                    RefeshValue();                }            } });

2,写相应的方法

Array.prototype.baoremove = function (dx) {    if (isNaN(dx) || dx > this.length) { return false; }    this.splice(dx, 1);}function paraCheckBoxClick(cb) {    // 取得Key    var Key = cb.id.substr(3, cb.id.length - 3);    if (cb.checked) {        AddFieldList(Key);// 添加Key到list列表    } else {        DelFieldList(Key);// 删除Key到list列表    }    RefeshValue();// 刷新数据}// 已经选择的参数字段列表var FieldList = [];// 找到IDfunction FindFieldListIDByKey(Key) {    for (var i = 0; i < FieldList.length; i++) {        if (FieldList[i] == Key) { return i; }    }    return -1;}// 添加已经选择的参数字段列表function AddFieldList(Key) {    if ($.inArray(Key, FieldList) < 0) {        FieldList.push(Key);    }}// 删除已经选择的参数字段列表function DelFieldList(Key) {    FieldList.baoremove(FindFieldListIDByKey(Key));}// 设置选项为选中状态function SetChecked() {    for (var i = 0; i < storeFieldList.data.length; i++) {        // 取得要修改的数据对象的Key        var Key = storeFieldList.getAt(i).get('Key');        for (var j = 0; j < FieldList.length; j++) {            if (FieldList[j].toUpperCase() == Key.toUpperCase()) {                // 设置相关数据的IsChecked为当前选择框的Checked                document.getElementById('cb_' + Key).checked = true;            }        }    }}// 全选function SelectAllToFieldList() {    // 初始化list    //FieldList.length = 0;    // 设置当前页面为全选    for (var i = 0; i < storeFieldList.data.length; i++) {        // 取得要修改的数据对象的Key        var Key = storeFieldList.getAt(i).get('Key');        document.getElementById('cb_' + Key).checked = true;        AddFieldList(Key);    }}// 反选function DeselectAllToFieldList() {    // 设置当前页面为反选    for (var i = 0; i < storeFieldList.data.length; i++) {        // 取得要修改的数据对象的Key        var Key = storeFieldList.getAt(i).get('Key');        var cb = document.getElementById('cb_' + Key);        document.getElementById('cb_' + Key).checked = !cb.checked;        if (cb.checked) {            AddFieldList(Key);        } else {            DelFieldList(Key);        }    }}

0 0