由于后台传回来的数据格式和treegrid要求的格式不一样,所以需要对后台传来的数据进行处理。
1.处理后的数据为data={"rows":[{key:value}]};
rows必不可少,值为数组形式。
2.columns:[ {field:'name',title:'用户名',editor:'text',width:'20%'}]
columns//必须项,否则表格调用失败=>field:每行数据对应的key ;title=》列标题。
3.如需有父节点,数据处理时加上_parentId:“父节点的id”;
4.父节点默认关闭,数据处理时加上state:"closed";
function createnodes(result) {
var zNodes=[];//数据
var datas={};//最终返回的数据
var parents=[];//下拉内容的数据
return function inner(result) {
$.each(result,function (i,item) {
var resourcePid=item.resourcePid||"";
var datalist={
id:item.resourceId,
name:item.resourceName,
resourceUrl:item.resourceUrl,
resourcePid:resourcePid,
resourceOrderNum:item.resourceOrderNum
};
if(resourcePid!=""){
datalist._parentId=resourcePid//行成子节点
}else{
datalist.state="closed";//父节点默认关闭
parents.push({id:item.resourceId,text:item.resourceName})
}
zNodes.push(datalist);
if(item.children&&item.children.length>0){
inner(item.children);
}
}) ;
datas.zNodes=zNodes;
datas.parents=parents;
return datas;
}(result);
}
var data2 ={rows:createnodes(result).zNodes};
var resourcePid = createnodes(result).parents;
function unitformatter(value, rowData, rowIndex) {
for (var i = 0; i < resourcePid.length; i++) {
if (resourcePid[i].id == value) {
return resourcePid[i].text;
}
}
}
//初始化
$('#menuMag').treegrid({
idField: 'id',
treeField:'name',
collapseAll:true,
data:data2,
columns:[[
{field:'name',title:'用户名',editor:'text',width:'20%'},
{field:'resourceUrl',title:'菜单路径',editor:'text',width:'20%'},
{field:'resourcePid',title:'父级菜单',width:'20%',formatter:unitformatter,
editor://点击编辑后需要出现的编辑器的格式
{
type:'combobox',//编辑器为下拉框
options:
{
data: resourcePid,
valueField: 'id',//此处必须为id,否则下拉调用失败
textField:'text' ,//此处必须为text,否则下拉调用失败
panelHeight: 'auto' ,
editable : false,
required: true ,//表单验证用
onSelect:function(record){ //选择后结束行编辑
}
} }},
{field:'resourceOrderNum',title:'同级顺序',editor:'text',width:'20%'},
{field:'methods',title:'操作',width:'20%',formatter:function (value, rowData, rowIndex) {
return '<a class="edit">编辑</a><a class="delete">删除</a>'
}}
]],
onLoadSuccess:function () {
$(".edit").on('click',function () {
edit()
});
function edit(){
var row = $('#menuMag').treegrid('getSelected');
if (row){
editingId = row.id;
$('#menuMag').treegrid('beginEdit', editingId);
}
}
}
});
网友评论