阅读目录
•无限分级
•jstree插件
•Demo
•创建Region实体
•满足jstree插件的数据对象Dto
•数据转换
•初始化获取转换后的数据
•前台数据加载
•其他操作
•通过按钮来操作增删改
无限分级
很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了。
说到无限分级,又要扯到递归调用了。(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据。当然,以下都是自己捣鼓的结果,非标准。谁有更好的设计望不吝啬赐教。
说来其实也简单,就是一个ID和父ID的关系。
以此类推,Id需要是唯一的,ParenId需要是Id列里面存在即可。这样我们就实现无限分级了,如果再加一列Sort排序就更完美了。
jstree插件
官方地址:https://www.jstree.com/
为什么要用这个插件?因为有方便的api给我们做数据绑定,且支持节点拖动来实现增删改,个人觉得这个功能挺强大的。
Demo
下面我们来基于jstree插件来实现无限分级数据操作。以区域数据操作为例,用Code First的方式来编写demo代码。
创建Region实体
为了配合插件自动生成的节点id,我们这里使用的Node和ParentNode来存储上下级关系(而不是上面说的id和parentid,但是实际效果是一样的)。
/// <summary> /// 区域 /// </summary> public class Region { /// <summary> /// 主键id /// </summary> public int Id { get; set; } /// <summary> /// 名称 /// </summary> public string Name { get; set; } /// <summary> /// 节点 /// </summary> public string Node { get; set; } /// <summary> /// 父节点 /// </summary> public string ParentNode { get; set; } }
满足jstree插件的数据对象Dto
为了适应jstree插件的数据要求,我们需要把上面的数据转换成树状的数据对象。
/// <summary> /// Dto /// </summary> public class RegionsTreeOutput { /// <summary> /// Id /// </summary> public int RegionsId { get; set; } /// <summary> /// tree显示文本(对应region的name) /// </summary> public string text { get; set; } /// <summary> /// tree的id(对应Node) /// </summary> public string id { get; set; } /// <summary> /// 子节点数据(此属性就体现的数据的层级关系) /// </summary> public List<RegionsTreeOutput> children { get; set; } }
数据转换
#region GetRegionTree 初始化数据获取 的辅助方法 public RegionsTreeOutput LoadRegions(string id, List<Region> inRegions, RegionsTreeOutput outRegions) { List<Region> regions = inRegions.Where(t => t.ParentNode == id).ToList(); if (outRegions == null)//加载父节点 { outRegions = ToTreeData(regions[0]); LoadRegions(outRegions.id, inRegions, outRegions); } else//加载子节点 { outRegions.children = ToTreesData(regions); if (regions.Count > 0) { for (int i = 0; i < regions.Count; i++) { LoadRegions(regions[i].Node, inRegions, outRegions.children[i]);//递归调用 } } } return outRegions; } public RegionsTreeOutput ToTreeData(Region region) { var treeData = new RegionsTreeOutput(); treeData.id = region.Node; treeData.text = region.Name; treeData.RegionsId = region.Id; return treeData; } public List<RegionsTreeOutput> ToTreesData(List<Region> listRegion) { var regions = new List<RegionsTreeOutput>(); for (int i = 0; i < listRegion.Count; i++) { regions.Add(ToTreeData(listRegion[i])); } return regions; } #endregion
初始化获取转换后的数据
/// <summary> /// 初始化数据获取 /// </summary> /// <returns></returns> public JsonResult GetResultData() { TreeDbContext db = new TreeDbContext(); var regions = db.Regions.Where(t => true).ToList(); var regionObj = LoadRegions("-1", regions, null); return Json(regionObj); }
以上后台的数据差不多就完成了。
前台数据加载
$(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;//返回右键菜单项 } }, }); }); });
其他操作
//删除节点 $('#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); };
如果大家想了解详情请下载源码:
http://xiazai.jb51.net/201605/yuanma/TreeDemo(jb51.net).rar
关于无限分级和tree结构数据增删改的相关知识就给大家介绍到这里,希望对大家有所帮助!
本文向大家介绍element-ui tree结构实现增删改自定义功能代码,包括了element-ui tree结构实现增删改自定义功能代码的使用技巧和注意事项,需要的朋友参考一下 首先是页面部分 下面是js部分 补充知识:vue前端基础之组件封装(树组件的封装附带增删改查方法) 组件封装的意义 组件封装的意义其实很好理解,对于一段复用性极高的代码,就需要进行组件封装以减少冗余代码。 树的封装 对于
树表示由边连接的节点。 我们将具体讨论二叉树或二叉搜索树。 二叉树是用于数据存储目的的特殊数据结构。 二叉树具有特殊条件,即每个节点最多可以有两个子节点。 二叉树具有有序数组和链表的优点,因为搜索与排序数组一样快,插入或删除操作与链表一样快。 重要条款 以下是关于树的重要术语。 Path - 路径是指沿树边缘的节点序列。 Root - 树顶部的节点称为root。 每个树只有一个根,从根节点到任何节
本文向大家介绍Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载),包括了Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Zend Framework教程之连接数据库并执行增删查的方法。分享给大家供大家参考,具体如下: 我们先要在数据库里建立一个叫message的表,它有三个
本文向大家介绍Java描述数据结构学习之链表的增删改查详解,包括了Java描述数据结构学习之链表的增删改查详解的使用技巧和注意事项,需要的朋友参考一下 前言 链表是一种常见的基础数据结构,它是一种线性表,但在内存中它并不是顺序存储的,它是以链式进行存储的,每一个节点里存放的是下一个节点的“指针”。在Java中的数据分为引用数据类型和基础数据类型,在Java中不存在指针的概念,但是对于链表而言的指针
问题内容: 我目前正在尝试在Go中实现Merkle- tree数据结构。基本上,我的最终目标是存储一小组结构化数据(最大10MB),并使该“数据库”可以轻松地与网络上分布的其他节点同步(请参阅参考资料)。由于没有类型检查,因此我已经在Node中有效地实现了这一点。这就是Go的问题,我想利用Go的编译时类型检查,尽管我也想拥有一个可以与任何提供的树一起使用的库。 简而言之,我想将结构用作merkle
本文向大家介绍jqGrid表格应用之新增与删除数据附源码下载,包括了jqGrid表格应用之新增与删除数据附源码下载的使用技巧和注意事项,需要的朋友参考一下 jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用。 下面给大家展示了效果图,喜欢的朋友可以直接下载源码