Ext js 4 全选和反选
2014-01-09 13:56
363 查看
Ext版本:4.2
相信经常做Grid的一定遇到全选和反选吧,虽然Ext里有SelectionMode可以直接使用,但是面对较复杂的业务,SelectionMode也力不从心
于是自己定义一个CheckBox来自己添加全选反选功能,注意这里是反选是选择相反的,而不是英文deselect的取消选择的意思
1,先在Grid的columns里定义一个dom的CheckBox,同时给一个ID
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 = []; // 找到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++) { // 取得要修改的数据对象的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); } } }
相关文章推荐
- ext监听事件方法[初级篇]
- extjs grid取到数据而不显示的解决
- ext读取两种结构的xml的代码
- jquery一句话全选/取消全选
- ExtJS下grid的一些属性说明
- EXT富客户端后台管理系统 初步代码第1/2页
- ext实现完整的登录代码
- Ext第一周 史上最强学习笔记---GridPanel(基础篇)
- ext 列表页面关于多行查询的办法
- 用tip解决Ext列宽度不够的问题
- Ext 今日学习总结
- Extjs在exlipse中设置自动提示的方法
- 常用Extjs工具:Extjs.util.Format使用方法
- extjs DataReader、JsonReader、XmlReader的构造方法
- 学习ExtJS(一) 之基础前提
- extjs 为某个事件设置拦截器
- ExtJs 学习笔记基础篇 Ext组件的使用第1/2页
- Extjs列表详细信息窗口新建后自动加载解决方法
- Extjs学习笔记之四 工具栏和菜单
- extjs form textfield的隐藏方法