Ext js 4 全选和反选

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') + '" οnclick="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) {// 取得Keyvar Key = cb.id.substr(3, cb.id.length - 3);if (cb.checked) {AddFieldList(Key);// 添加Key到list列表} else {DelFieldList(Key);// 删除Key到list列表}RefeshValue();// 刷新数据
}// 已经选择的参数字段列表
var FieldList = [];// 找到ID
function 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++) {// 取得要修改的数据对象的Keyvar Key = storeFieldList.getAt(i).get('Key');for (var j = 0; j < FieldList.length; j++) {if (FieldList[j].toUpperCase() == Key.toUpperCase()) {// 设置相关数据的IsChecked为当前选择框的Checkeddocument.getElementById('cb_' + Key).checked = true;}}}
}
// 全选
function SelectAllToFieldList() {// 初始化list//FieldList.length = 0;// 设置当前页面为全选for (var i = 0; i < storeFieldList.data.length; i++) {// 取得要修改的数据对象的Keyvar 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++) {// 取得要修改的数据对象的Keyvar 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);}}}

Ext js 4 全选和反选相关推荐

JS实现全选、反选、不选
JS实现全选.反选.不选效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head><meta charset=" ...
js实现全选和反选功能
最近没事做,就用js写了一个复选框选择全选时,下面的按钮也都会选择上,当下面的选框被全选时,全选按钮也会被选中;还实现了一个反选功能,可供大家参考,如果大家有好的建议也可以给我留言,我们一起学习... ...
原生js实现全选和反选的功能 --冯浩的博客
思路:首先我们获取节点遍历每个节点获取到checked的属性然后我们通过改变checked的属性改变选中的状态全选的时候我们让他们都为true 反选的时候我们使用!达到效果本次使用到的知识点有: ...
JS实现全选跟反选
示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
用js实现全选和反选
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
java做全选反选功能_[Java教程]js实现全选反选
[Java教程]js实现全选反选 0 2017-04-04 00:00:12 在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码快递 ...
html复选框全选怎么实现,js html css实现复选框全选与反选
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 html+css+js实现复选框全选与反选 table,tr,td { border:1px solid red; } fu ...
纯js实现复选框的全选、反选与获取选中复选框的值
实现效果如下: 全选状态: 取消全选: 获取选中的复选框的值: 下面开始上代码! html <div><h2>爱好</h2><hr><form a ...

Ext js 4 全选和反选

Ext js 4 全选和反选相关推荐

最新文章

热门文章