项目中学习---avalon表格渲染函数的了解
2016-10-29 16:38
302 查看
vm.$customerUserList = { columns: [ {key: "id",name: "id",toggle: false}, {key: "nickName",name: "会员名",width: '10%'}, {key: "mobile",name: "联系电话",width: '10%'}, {key: "userName",name: "姓名",width: '10%',format:'emptyView'}, {key: "levelName",name: "级别",width: '10%',format:'emptyView'}, {key: "gender",name: "性别",width: '10%',format:'gender'}, {key: "status",name: "状态",width: '10%',format:'status'}, {key: "lastLoginTime",name: "上次登录时间",width: '10%',format:'emptyView'}, {key: "channelId",name: "注册渠道",width: '10%',format:'emptyView'}, ], // 渲染列数据的方法集合 htmlHelper: { emptyView: function(vmId, field, index, cellValue, rowData) { return cellValue == null ? "" : cellValue; }, gender: function(vmId, field, index, cellValue, rowData) { if(cellValue == 0){ return "女"; }else if(cellValue == 1){ return "男"; }else{ return ""; } return cellValue; }, status: function(vmId, field, index, cellValue, rowData) { return cellValue == 1 ? "正常" : "锁定"; } }, selectable: { type: "Checkbox", width: '5%',//为表格添加选中行操作框,可以设置为"Checkbox"或者"Radio" }, //判断该操作框是否选中的回调函数 <span style="color:#33cc00;"><strong>onRowSelect</strong></span>:function(){ var id=avalon.vmodels["smartgridCustomerUserList"].getSelected(); if(id.length==1){ if(id[0].status==1){ customerController.isLock=true; customerController.isUnlock=false; }else{ customerController.isUnlock=true; customerController.isLock=false; } }else{ customerController.isLock=false; customerController.isUnlock=false; } }, }
avalon表格还要在jsp页面添加一句话,来绑定Js中的数据:
ms-widget="smartgrid,smartgridCustomerUserList,$customerUserListOpts"
上面的红色字体代表:
对数据列表的渲染,比如你要对某一列进行操作,或者进行数据处理,都可以这么写,其中的参数vmId, field, index, cellValue, rowData,意思分别为:代表这个表格的三个参数中的一个(如smartgridCustomerUserList);该选中行的key,如“ gender”;数量;该行下该key的真实数据;该行所有的值。
上面绿色的字体代表:
回调函数:也就是你点击这一行需要做什么操作,比如隐藏显示按钮,比如,选中或者全选的设置等,都写到这里。我这里写的回调函数意思就是:点击该行,如果状态为已锁定就显示“解锁”按钮,如果是正常,就显示“锁定”按钮,如果什么都不选就哪个按钮都不显示。
相关文章推荐
- 学习oracle时了解的一些函数
- MapXtreme 2005 学习心得 了解新建MapXtreme项目结构(二)
- 了解html页面的渲染过程以备学习前端的性能优化
- C/C++学习笔记1 - 深入了解scanf()/getchar()和gets()等函数
- Effective C++学习笔记 条款05:了解C++默默编写并调用的哪些函数
- C/C++学习笔记1 - 深入了解scanf()/getchar()和gets()等函数(原创)
- 【极客学院】-iOS学习笔记-5-Swift(变量,循环,控制,函数,面向对象,小项目:呈现网页)
- MapXtreme 2005 学习心得 了解新建MapXtreme项目结构(二)
- 【从业余项目中学习2】C# 实现调用Matlab函数(Visual Studio:2008, Matlab:R2009a)
- 学习ThinkPHP3.2.2:了解并测试与3.1不同之处_自定义函数文件名称
- Office 学习之路 --------excel 控件+函数制作动态表格
- Android开发学习之四——了解项目中各文件的意义
- HTML、CSS和JavaScript学习五(案例分析二表格、项目列表和超链接)
- C/C++学习笔记1 - 深入了解scanf()/getchar()和gets()等函数
- 学习C++ -> 进一步了解函数
- Effective C++学习5 条款05:了解C++默默编写并调用了哪些函数
- Android应用开发学习总结(二)——新建项目与目录结构了解
- 了解html页面的渲染过程以备学习前端的性能优化(续)
- (原创) cocos2d-x 3.0+ lua 学习和工作(4) : 公共函数(5): 返回指定表格中的所有键(key):table.keys
- Ext学习笔记——grid表格渲染自定义样式