您的位置:首页 > 其它

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

上面绿色的字体代表:
      回调函数:也就是你点击这一行需要做什么操作,比如隐藏显示按钮,比如,选中或者全选的设置等,都写到这里。我这里写的回调函数意思就是:点击该行,如果状态为已锁定就显示“解锁”按钮,如果是正常,就显示“锁定”按钮,如果什么都不选就哪个按钮都不显示。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐