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

所属分类:导航-文件树

 31830  310  查看评论 (15)
分享到微信朋友圈
X
无限级ajax请求后台可编辑树形菜单 ie兼容10
//预加载数据格式
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" //任意定义,会弹出此信息
}
相关插件-文件树

轻量级的原生js权限树插件(原创)

YnTree是一款专门用于权限管理的权限树插件,它依靠数据来驱动,不依赖于任何别的插件并且支持ajax。
  文件树
 49284  363

jQuery表格树插件TreeGrid

网上找的源码经过自己修改亲测可以兼容ie5及以上版本应该可以兼容jquery1.3以上的所有版本.由于是开源的如果兼容性有问题可以直接修改里面的代码.
  文件树
 135190  406

可无限添加子级的数据树(原创)

可折叠的数据树,可以选择有选择框或无选择框
  文件树
 37597  338

vue树形插件

vue的树形插件,支持增加节点,修改节点,删除节点 . 简单实用。
  文件树
 52994  337

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    稣哥请喝茶 0
    2023/1/18 11:46:48
    怎么点击跳转呢 回复
    ●.?乖宀倩° 0
    2020/9/16 11:52:03
    js是压缩的,怎样还原啊?
        西瓜0
        2020/9/16 12:04:47
        😉使用js格式化工具
        https://www.jq22.com/jsgsh
        ●.?乖宀倩°0
        2020/9/16 14:13:05
        格式化就是美化了一下,什么都没改变
    回复
    ?特━┽ 0
    2020/4/30 11:22:15
    post也要把参数写在url上吗
        咯哦图我0
        2020/5/2 17:46:06
        不需要
    回复
    养乐多?? 0
    2020/2/20 17:46:24
    小蚂蚁 0
    2019/8/30 10:14:15
    js是压缩的 没法看啊
        西瓜0
        2019/8/30 10:15:06

        用js格式化工具

        http://www.jq22.com/jsgsh
        小蚂蚁0
        2019/9/5 9:47:36
        谢谢
        小蚂蚁0
        2019/9/5 9:55:24
        格式化后的js代码全是abckefg...
    回复
    qq2994654180 0
    2019/8/19 10:14:31
    你这东西也没有教程,怎么用啊?
        灭霸媳妇0
        2019/8/19 11:22:16
        自己照着下载文件中的内容学就行了,调用对应的js和CSS文件,都有注释不难。
        咯哦图我0
        2019/8/27 10:55:17
        源码里面有完整例子可参考
    回复
    yhseng 0
    2019/4/11 23:13:55
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复