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

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的真实数据;该行所有的值。


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


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 25
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 25
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值