Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you an example analysis of infinite grading and the addition, deletion and modification of tree structural data. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

Infinite grading

Many times we are not sure about the level of the hierarchy, so we need to use infinite rating.

When it comes to infinite grading, it's time to talk about recursive calls. (it is said that frequent recursion is very performance-consuming), here we need to design a table mechanism to store infinitely hierarchical data. Of course, the following are the results of their own trouble, non-standard. Who has a better design hope not stingy advice.

In fact, it is also simple, it is the relationship between an ID and the parent ID.

And so on, Id needs to be unique, and ParenId needs to be present in the Id column. In this way, we can achieve infinite grading, and if we add another column of Sort sorting, it will be more perfect.

Jstree plug-in

Official address: https://www.jstree.com/

Why use this plug-in? Because there is a convenient api for us to do data binding, and support node dragging to achieve additions, deletions and modifications, I think this function is quite powerful.

Demo

Let's implement infinitely hierarchical data manipulation based on the jstree plug-in. Taking the regional data operation as an example, demo code is written in the way of Code First.

Create a Region entity

To match the node id automatically generated by the plug-in, we use Node and ParentNode here to store parent-subordinate relationships (instead of id and parentid, but the actual effect is the same).

/ region / public class Region {/ public int Id primary key id / name / public string Name {get; set;} / node / public string Node {get; set;} / parent node / public string ParentNode {get; set;}}

Data object Dto that satisfies the jstree plug-in

In order to meet the data requirements of the jstree plug-in, we need to convert the above data into tree-like data objects.

/ Dto/// public class RegionsTreeOutput {/ Id / public int RegionsId {get; set;} / tree display text (corresponding to region's name) / public string text {get; set;} / tree's id (corresponding to Node) / public string id {get; set } / Child node data (the hierarchical relationship of the data represented by this attribute) / public List children {get; set;}}

Data conversion

# Auxiliary methods for region GetRegionTree initialization data acquisition: public RegionsTreeOutput LoadRegions (string id, List inRegions, RegionsTreeOutput outRegions) {List regions = inRegions.Where (t = > t.ParentNode = = id). ToList (); if (outRegions = = null) / / load parent node {outRegions = ToTreeData (regions [0]); LoadRegions (outRegions.id, inRegions, outRegions);} else// load child node {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 ToTreesData(List listRegion) { var regions = new List(); for (int i = 0; i < listRegion.Count; i++) { regions.Add(ToTreeData(listRegion[i])); } return regions; } #endregion 初始化获取转换后的数据 /// /// 初始化数据获取 /// /// public JsonResult GetResultData() { TreeDbContext db = new TreeDbContext(); var regions = db.Regions.Where(t =>

True) .ToList (); var regionObj = LoadRegions ("- 1", regions, null); return Json (regionObj);}

The above background data is almost complete.

Foreground data loading

(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) {/ / because we need to define multiple items later, we return var actions = {} through an object / / add a "add" right-click menu actions.create = {/ / the create here is actually named at will, the key is the action callback method "separator_before": false,//Create before the split line "separator_after": true,//Create this item "_ disabled": false,// false indicates that the create item can be used. True indicates that you cannot use "label": "add". / / the name of this item can be customized as "action": function (data) {/ / Click Create to trigger this method. This is still useful: var inst = $.jstree.reference (data.reference), obj = inst.get_node (data.reference). / / get the current node, you can get all the attributes of the current node / / add the node. If the following three lines of code are commented out, the node inst.create_node (obj, {}, "last", function (new_node) {setTimeout (function () {inst.edit (new_node);}, 0) will not be added. / / the renaming method is triggered after a new node is added, that is, the node can be renamed immediately after the node is created});}} If (o.id! = "0001") / / masks the operation on the root node "0001" to change the root node to a real id {/ / add a "rename" right-click menu actions.rename = {"separator_before": false, "separator_after": false, "_ disabled": false, / / (this.check ("rename_node", data.reference) This.get_parent (data.reference), ""), "label": "rename", "action": function (data) {var inst = $.jstree.reference (data.reference), obj = inst.get_node (data.reference) Inst.edit (obj) }} / / add a "delete" right menu actions.delete = {"separator_before": false, "icon": false, "separator_after": false, "_ disabled": false, / / (this.check ("delete_node", data.reference, this.get_parent (data.reference), "")) "label": "delete", "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;// returns right-click menu item}},});});})

Other actions

/ / Delete node $('# 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) {});}) / / Mobile node $('# jstree_demo'). On ('move_node.jstree', function (e, data) {saveRegions (data);}); / / modify the name $(' # jstree_demo'). On ('rename_node.jstree', function (e, data) {saveRegions (data);}); / / Save function saveRegions (data) {var id = data.node.original.RegionsId; var name = data.node.text / / modified name / / var oldName = data.old;// original name / / var pNode = $('# jstree_demo'). Jstree (). Get_node (data.node.parent) .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;// expansion}});}

Of course, remember to modify or delete the ID of the corresponding background entity that you want to take RegionsId.

Add, delete and modify through buttons

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) }; the above is the example of unlimited rating and tree structural data addition, deletion and modification shared by Xiaobian. If you happen to have similar doubts, please refer to the above analysis for understanding. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.