您的位置:首页 > Web前端 > JavaScript

Ext js 4 全选和反选

2014-01-09 13:56 363 查看
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 = [];

// 找到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 Ext4 全选 反选