php ajax 树形菜单,无限级ajax请求后台可编辑树形菜单

插件描述：由于树形菜单数据量比较大的时候，我们通过预加载数据的方式生成菜单可能对前后端交互延迟较长。所以研究了下可以预加载也可以异步加载数据的树形菜单插件。

//预加载数据格式

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" //任意定义,会弹出此信息

}