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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
vue编译打包本地查看index文件的方法
Feb 23 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
JavaScript中如何调用Java方法
Sep 16 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_MySQL教程-第一天
2007/03/18 PHP
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python检测网络延迟的代码
2018/05/15 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
酒店行政人事部经理职务说明书
2014/02/26 职场文书
护士自我鉴定总结
2014/03/24 职场文书
合作协议书范本
2014/04/17 职场文书
活动总结怎么写
2014/04/28 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
警示教育片观后感
2015/06/17 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL