项目中学习---avalon表格渲染函数的了解

来源：互联网发布：java中super关键字编辑：程序博客网时间：2024/05/17 04:40

vm.$customerUserListOpts = {                        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'},                            ],                    // 渲染列数据的方法集合                    <span style="color:#ff0000;">htmlHelper:</span> {                        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的真实数据；该行所有的值。

上面绿色的字体代表：

回调函数：也就是你点击这一行需要做什么操作，比如隐藏显示按钮，比如，选中或者全选的设置等，都写到这里。我这里写的回调函数意思就是：点击该行，如果状态为已锁定就显示“解锁”按钮，如果是正常，就显示“锁定”按钮，如果什么都不选就哪个按钮都不显示。

1 0