标签:对象 添加 管理 效率 cas 按钮 操作 bre 增删改
这章应该是wijmo5 flexgrid表格应用的最后一章,我们在三章内介绍了flexgrid表格组件的数据绑定,分页器搭建,单元格模板控制和代码重绘单元格控制。这章在介绍下对表格添加增删改三个按钮。有了这些功底以后做angular的项目,使用wijmo5 flexgrid组件。基本上是够用了。还有一些比如内部编辑,合并,子表格什么的需要了在去熟悉即可。
首先是要在ts文件内找到html模板内的表格对象。这个用@ViewChild 这个指令实现。我们看下实现,首先是html模板
对表格组件,我们添加一个 #flexgrid ,即模板内变量。他可以在模板内被其他函数引用或绑定,也只可以直接在后台获取
这样在后台ts文件内就可以获取这个表格对象了。有了表格对象一切都好办了。比如批量删除和编辑函数的实现
edit():void{ let inId:number = 0; let typeid:number = 0; let flex:wjGrid.Row[] = this.flexgrid1.selectedRows as wjGrid.Row[]; if(flex.length == 1){ inId = flex[0].dataItem.id; typeid = 1; let isdelandedit:string = flex[0].dataItem.isdelandedit; if(isdelandedit == ‘已锁定‘) typeid = 2; } switch(typeid){ case 0: alert(‘没有选中行,请先选中行后修改‘); break; case 2: alert(‘选中行的主键是‘ + inId + ‘ 但是本行状态位是已锁定,不可在编辑‘); break; case 1: alert(‘选中行的主键是‘ + inId); this.m2v2open.showChildModal(); break; } } dellList():void{ let flex:wjGrid.RowCollection = this.flexgrid1.rows; let checkboxAdd:number[] = []; for(let i = 0;i<flex.length;i++){ let rowData = flex[i].dataItem; if(rowData.check == true){ checkboxAdd.push(rowData.id);} } if(checkboxAdd.length == 0) { alert(‘没有选择‘); } else { alert(‘您选择的主键为[‘ + checkboxAdd.join(",") + ‘] 业务操作自己去实现‘); } }
实现思路是在外部获取表格对像。获取行集合对象 wjGrid.RowCollection 。行集合内每个行对象 wjGrid.Row , 在转为dataitem对象。从dataitem对象上可以很方便的获取到绑定的数据。我觉得对wijmo5 flexgrid 熟悉了以后,用起来确实很方便。能很大的提升效率。但就是相关资料太少了。
对wijmo5引用,最好的方式还是远程引用。直接在package.json 文件内添加
"wijmo": "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20171.293.tgz",
这样直接引用远程的包即可。虽然下面会出水印。但我们个人用还是无所谓的。最后上几个效果图
这里面规则是:锁定的行,不可以在编辑。禁用的行,多选框不可选中。
具体效果可以去 http://114.215.44.2 查看。想下载代码可以去前两篇文章里找github地址。这里就不列出了。
Angular4 后台管理系统搭建(3) - wijmo5 flexgrid表格增删改按钮实现
标签:对象 添加 管理 效率 cas 按钮 操作 bre 增删改
原文地址:http://www.cnblogs.com/Vetkdf/p/7116285.html