easyui treegrid加载本地数据(静态数据)以及编辑下

2017-11-12  本文已影响0人  saintkl

由于后台传回来的数据格式和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);
                    }
                }
            }

        });
上一篇下一篇

猜你喜欢

热点阅读