美文网首页
easyui treegrid加载本地数据(静态数据)以及编辑下

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

作者: saintkl | 来源:发表于2017-11-12 23:54 被阅读0次

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/vncamxtx.html