插件描述：由于树形菜单数据量比较大的时候，我们通过预加载数据的方式生成菜单可能对前后端交互延迟较长。所以研究了下可以预加载也可以异步加载数据的树形菜单插件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | //预加载数据格式var arr = [{ id: 1, name: "一级", open: true, child: [{ id: 5, name: "二级", type: 'leaf' }, { id: 6, name: "二级", child: [{ id: 7, name: "三级", type: 'leaf' }, { id: 9, name: "三级", child: [{ id: 10, name: "四级", child: [{ id: 11, name: "五级", type: 'leaf' }, { id: 12, name: "五级", type: 'leaf' }] }] }] }]}, { id: 2, name: "一级", child: [{ id: 3, name: "二级", pid: 2, type: 'leaf' }, { id: 3, name: "二级", pid: 2, type: 'leaf' }, { id: 4, name: "二级", pid: 2, type: 'leaf' }]}, { id: 8, name: "一级", pid: 0, type: 'leaf'}];//无限级菜单生成$("element").LuTree({ arr: arr, sign: true, simIcon: "fa fa-file-o", //叶子图标 mouIconOpen: " fa fa-folder-open", //展开图标 mouIconClose: "fa fa-folder", //关闭图标 callback: function (id) { console.log("你选择的id是" + id); }});//无限级请求节点下的菜单$("element").LuAjaxTree({ url: './data.json', simIcon: "fa fa-file-o", //叶子图标 mouIconOpen: " fa fa-folder-open", //展开图标 mouIconClose: "fa fa-folder", //关闭图标 callback: function (id) { console.log("你选择的id是" + id); }});//可操作异步加载数据生成无限级树形菜单$("element").LuUpdateTree({ url: './data.json', , //请求url,请求会带上id、type:query:查询,createChild:添加,:删除，新增还会带上name,在此节点下加载节点。 simIcon: "fa fa-file-o", //叶子图标 mouIconOpen: " fa fa-folder-open", //展开图标 mouIconClose: "fa fa-folder", //关闭图标 callback: function (id) { console.log("你选择的id是" + id); }});//后台返回json数据格式{ "code": 200, //code为200是成功 "data": [ //获取的时候返回多个，新增是放回一个 { "id": 4, "name": "二级AA", "type": "leaf" } ], "msg": "success" //任意定义,会弹出此信息} |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com