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


Posted in Javascript onJuly 12, 2016

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

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

初始效果大概是这样~~~~~

// 定义初始 存放表格数据
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);
}

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

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

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

我觉得(不一定对啊~),可能是因为我的数据模型里面套了太多层,导致直接从grid的store reload()才回报错的。

最后查找API,才发现了loadData 可以直接给数据传值。

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

我用的是Boolean值是 false。

以上所述是小编给大家介绍的Extjs 点击复选框在表格中增加相关信息行,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 #Javascript
JavaScript中的事件委托及好处
Jul 12 #Javascript
原生js实现class的添加和删除简单代码
Jul 12 #Javascript
JavaScript动态添加事件之事件委托
Jul 12 #Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 #Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 #Javascript
javascript加减乘除的简单实例
Jul 12 #Javascript
You might like
php之XML转数组函数的详解
2013/06/07 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
js倒计时显示实例
2016/12/11 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
Python 自动补全(vim)
2014/11/30 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
基于python实现从尾到头打印链表
2019/11/02 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
主题酒店策划书
2014/01/28 职场文书
法人授权委托书范本
2014/09/17 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
男方婚前保证书
2015/02/28 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
法定授权委托证明书
2015/06/18 职场文书
欠条样本
2015/07/03 职场文书
vue实现简易音乐播放器
2022/08/14 Vue.js