无限分级和tree结构数据增删改【提供Demo下载】
2016-05-09 06:40
489 查看
无限分级
很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了。说到无限分级,又要扯到递归调用了。(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据。当然,以下都是自己捣鼓的结果,非标准。谁有更好的设计望不吝啬赐教。
说来其实也简单,就是一个ID和父ID的关系。
$(function () { $.post("/Home/GetResultData", null, function (sData) { treeObj = $('#jstree_demo').jstree({ //, "checkbox" 'plugins': ["contextmenu", "dnd", "search", "state", "types", "wholerow"], 'core': { "animation": 0, "check_callback": true, 'force_text': true, "themes": { "stripes": true }, 'data': sData }, "types": { "default": { "icon": "fa fa-folder icon-state-warning icon-lg" }, "file": { "icon": "fa fa-file icon-state-warning icon-lg" } }, "contextmenu": { select_node: false, show_at_node: true, items: function (o, cb) { //因为这里我们之后需要定义多个项,所以通过对象的方式返回 var actions = {}; //添加一个"新增"右键菜单 actions.create = {//这里的create其实阔以随意命名,关键是里面的 这里面的 action回调方法 "separator_before": false,//Create这一项在分割线之前 "separator_after": true,//Create这一项在分割线之后 "_disabled": false, //false表示 create 这一项可以使用; true表示不能使用 "label": "新增", //Create这一项的名称 可自定义 "action": function (data) { //点击Create这一项触发该方法,这理还是蛮有用的 var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性 //新加节点,以下三行代码注释掉就不会添加节点 inst.create_node(obj, {}, "last", function (new_node) { setTimeout(function () { inst.edit(new_node); }, 0);//新加节点后触发 重命名方法,即 创建节点完成后可以立即重命名节点 }); } }; if (o.id != "0001")//屏蔽对根节点的操作 “0001”改成根节点对应的真是id { //添加一个"重命名"右键菜单 actions.rename = { "separator_before": false, "separator_after": false, "_disabled": false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")), "label": "重命名", "action": function (data) { var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference); inst.edit(obj); } } //添加一个"删除"右键菜单 actions.delete = { "separator_before": false, "icon": false, "separator_after": false, "_disabled": false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")), "label": "删除", "action": function (data) { var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference); if (inst.is_selected(obj)) { inst.delete_node(inst.get_selected()); } else { inst.delete_node(obj); } } }; } return actions;//返回右键菜单项 } }, }); }); });
View Code
其他操作
//删除节点 $('#jstree_demo').on('delete_node.jstree', function (e, data) { var id = data.node.original.RegionsId; $.ajax({ type: "get", url: "/Home/DeleteRegion?id=" + id, success: function (sData) { } }); }); //移动节点 $('#jstree_demo').on('move_node.jstree', function (e, data) { saveRegions(data); }); //修改名 $('#jstree_demo').on('rename_node.jstree', function (e, data) { saveRegions(data); }); //保存 function saveRegions(data) { var id = data.node.original.RegionsId; var name = data.node.text;//修改后的name //var oldName = data.old;//原name //var pNode = $('#jstree_demo').jstree().get_node(data.node.parent).original.RegionsId; var josnData = { "Id": id, "Node": data.node.id, "ParentNode": data.node.parent, "Name": name }; $.ajax({ url: "/Home/SaveRegions", data: josnData, success: function (sData) { data.node.original.RegionsId = sData; data.node.state.opened = false;//是否展开 } }); }
当然,记得修改或是删除要取RegionsId这个对应后台实体的ID。
通过按钮来操作增删改
function createTree() { var ref = $('#jstree_demo').jstree(true), sel = ref.get_selected(); if (!sel.length) { return false; } sel = sel[0]; sel = ref.create_node(sel, { "type": "file" }); if (sel) { ref.edit(sel); } }; function renameTree() { var ref = $('#jstree_demo').jstree(true), sel = ref.get_selected(); if (!sel.length) { return false; } sel = sel[0]; ref.edit(sel, function () { }); }; function deleteTree() { var ref = $('#jstree_demo').jstree(true), sel = ref.get_selected(); if (!sel.length) { return false; } ref.delete_node(sel); };
更加详细的细节请看demo。
链接:http://pan.baidu.com/s/1hrN5QvU 密码:c6b7
相关文章推荐
- ionic项目简介以及Angularjs 基础
- java的类加载顺序
- 沟通
- LeetCode 314. Binary Tree Vertical Order Traversal
- 【华为OJ】【035-输出单向链表中倒数第k个结点】
- 【华为OJ】【034-找出字符串中第一个只出现一次的字符】
- Start Instance 操作详解 - 每天5分钟玩转 OpenStack(31)
- 【Unity】12.5 Navmesh Obstacle组件
- Start Instance 操作详解 - 每天5分钟玩转 OpenStack(31)
- 【Unity】12.4 通过网格分层选择行进路线
- 【华为OJ】【033-名字的漂亮度】
- Start Instance 操作详解 - 每天5分钟玩转 OpenStack(31)
- 【Unity】12.3 Off Mesh Link组件
- 【华为OJ】【032-输入一行字符,分别统计出包含英文字母、空格、数字和其它字符的个数】
- 【Unity】12.2 导航网格寻路简单示例
- Linux挂载命令mount用法及参数详解
- 盘点7款应用最广泛的 Linux 桌面环境
- 【华为OJ】【031-求小球落地5次后所经历的路程和第5次反弹的高度】
- 【Unity】12.1 基本概念
- 【Unity】第12章 导航网格和寻路