Extjs 点击复选框在表格中增加相关信息行

功能效果:点击复选框在表格中自动增加相关信息行,复选框取消则表格中内容自动删除

Extjs将gird中指定行的复选框勾选

在Extjs中,可以通过 selType添加复选框

Ext.define('ConnGrid', {
      title:'关联',
         extend: 'Ext.grid.Panel',
         xtype: 'checkbox-selection',
         store: connStore,
         selType: 'checkboxmodel',    //复选框
   ....此处省略...
   }
)
var connGrid = Ext.create('ConnGrid');

如果想要在表格加载数据时自动指定符合某个条件的数据自动勾选怎么做呢?

可以在该表格的store的load属性中添加callback,这样将会在store加载完数据后执行,然后通过select方法勾选。

 

connStore.load({
 callback: function(records, options, success){ 
      //该数组存放将要勾选的行的record
   var arr = [];
   for (var i = 0; i < records.length; i++) {
    arr.push(records[i]);
   }
   connGrid.getSelectionModel().select(arr);//选中指定行 
 } 
});

我是上面这样写的,但最好是在定义store时写在store的定义里,这样就只写一次可以了,而不必每次调用store.load()方法时都这样写

 

 

http://www.bkjia.com/Javascript/1071299.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1071299.htmlTechArticleExtjs将gird中指定行的复选框勾选
在Extjs中,可以通过 selType添加复选框 Ext.define(ConnGrid, { title:关联,
extend: Ext.grid.Panel, xtype: checkbox-selection,…

mgm娱乐场 1

初始效果大概是这样~

// 定义初始 存放表格数据
var gridItems = [];
//省份复选框
var $provinceCheckbox01 = new Ext.form.CheckboxGroup({
xtype: 'checkboxgroup',
fieldLabel: '省份选择',
labelWidth: 60,
columns: 9,
vertical: true,
margin: '10 0 0 15',
defaults: {
labelWidth: 80,
width: 60,
labelAlign: "left"
},
items: provinceItems, //provinceItems是从其他渠道获取的数据
listeners: {
change: OnChange // 复选框改变事件
}
});
//表格初始数据模型
var gridPanelStore = new Ext.data.Store({
fields: ['discount', 'provinceId', 'provinceName'],
data: {'items': ''},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
// grid
var $grid = new Ext.grid.Panel({
store: gridPanelStore,
selType: 'rowmodel',
singleSelect: true,
margin: '20 0 0 0',
columns: [{
xtype: 'rownumberer',
header: '序号',
width: 70,
align: 'center'
}, {
header: '省份',
width: 150,
sortable: true,
menuDisabled: true,
align: 'center',
dataIndex: 'provinceName'
}, {
header: '折扣',
width: 100,
menuDisabled: true,
sortable: true,
align: 'center',
dataIndex: 'discount',
editor: {
allowBlank: false
}
}],
dockedItems: [{
xtype: "pagingtoolbar",
dock: "bottom",
displayInfo: true
}],
plugins: [cellEditing]
});
//事件监听
function OnChange(newValue, oldValue, eOpts) {
// 清空数据
gridItems = [];
//选中省份ID
var checkedId = this.getValue().xxx;
//判断选中数量
if(checkedId==undefined){
gridItems = [];
} else if (checkedId.length == undefined) {
for (var i = 0; i < provinceItems.length; i++) {
if (provinceItems[i].inputValue == checkedId) {
gridItems[0] = {
"provinceId": checkedId,
"provinceName": provinceItems[i].boxLabel,
"discount": "1"
};
}
}
}else if(checkedId.length !== undefined){
for(var j = 0;j<checkedId.length;j++){
for (var o = 0; o < provinceItems.length; o++) {
if (provinceItems[o].inputValue == checkedId[j]) {
gridItems[j] = {
"provinceId": checkedId[j],
"provinceName": provinceItems[o].boxLabel,
"discount": "1"
};
}
}
}
}
//console.log($gridItems);
$grid.store.loadData($gridItems, false);
}

类似的这种功能实际用到的可能不是很多。

mgm娱乐场,做这个功能的时候,点击复选框之后获取到的数据一直放不到grid中。

最开始是想把取到的值,直接赋给 gridPanelStore.data.items ,但是赋值之后
用 store.reload() 刷新表格数据总是报错,说是方法错了。

相关文章