美文网首页工作生活
easyUI 实现tree树形菜单json的处理

easyUI 实现tree树形菜单json的处理

作者: mml_慢慢来 | 来源:发表于2019-07-01 09:31 被阅读0次

    今天使用easyUI想完成一个树形菜单,后台部分的已经写好,传json给前端显示菜单。

    发现easyui处理树形菜单的json必须按照它自己的格式,但是我后台的部分已经写好,又不想也不方便去修改。

    发现easyui的tree组件提供了loadFilter方法,此方法可以把后台传过来的数据进行过滤,于是我打算在前台处理json。

    这些是我的代码,只需修改几处代码就能实现后台json转成easyui规定的json格式了。

    //此处是easyui的json格式

    var tree = {
        id:'',
        text:'',
        state:'',
        checked:'',
        attributes:'',
        children:''
    }
    //此处是把后台传过来的json数据转成easyui规定的格式
    function bl(item){
        var tree = new Object();
        tree.id = item.id;
        tree.text = item.name;
        tree.state = 'open';
        tree.checked = 'false';
        tree.attributes = item.url;
        if(item.child_menus.length != 0){
            tree.children = jsonbl(item.child_menus);
        }else{
            tree.children = [];
        }
        return tree;
    }
    function jsonbl(data){
        var easyTree = [];
        $.each(data,function(index,item){
         easyTree[index] = bl(item);
         });
        return easyTree;
    }
    //此处是easyui调用tree组件的方法(使用easyui的童鞋自然懂得,只需修改请求json的api即可)
    $('#tt').tree({
        url: '${pageContext.request.contextPath}/sysmenu/all',
         loadFilter: function(data){ 
            return jsonbl(data); 
        }
    });
    

    相关文章

      网友评论

        本文标题:easyUI 实现tree树形菜单json的处理

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