Infinite classification and tree structure data additions and deletions change "with demo download" _ajax related

Reading Table of Contents

• Unlimited Rating
Jstree Plugin
Demo
• Create region Entities
• Data Object dto that satisfies the Jstree plug-in
• Data Conversion
• Initializing the converted Data
• Foreground data loading
• Other operations
• Through the button to operate and delete changes

Unlimited rating

Many times we are unsure of the hierarchy of hierarchical relationships, and this time we need to use an infinite hierarchy.

When it comes to infinite ratings, it's also called recursive invocation. (it is said that frequent recursion is very performance-intensive), here we need to design a table mechanism to store infinitely graded data. Of course, the following are the results of their own tinkering, non-standard. Who has the better design hope not stingy enlighten.

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

And so on, ID needs to be unique, Parenid need to be inside the ID column. This allows us to achieve an infinite rating, which is even more perfect if you add a column of sort.

Jstree Plugin

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

Why do you use this plugin? Because there is a convenient API for us to do data binding, and support the node to drag to implement additions and deletions, personally feel this function is very powerful.

Demo

Here we will implement an infinitely hierarchical data operation based on the Jstree plug-in. In the case of regional data manipulation, the code-number-a method is used to write the demo.

Creating Region Entities

To match the node ID that the plug-in automatically generates, we use node and parentnode to store the hierarchy (rather than the IDs and ParentID mentioned above, but the actual effect is the same).

<summary>
///Area
///</summary> public
class Region
{
 ///<summary>
 // /primary Key ID
 ///</summary> public
 int Id {get; set;}
 <summary>
 ///name
 ///</summary> public
 string name {get; set;}
 <summary>
 ///node
 ///</summary> Public
 string Node {get; set;}
 <summary>
 ///parent node
 ///</summary> Public
 string ParentNode {get; set;}
}

Data object dto that satisfies the Jstree plug-in

To accommodate the data requirements of the Jstree plug-in, we need to convert the above data to a tree-like data object.

<summary>
///Dto
///</summary> public
class Regionstreeoutput
{
 ///< summary>
 ///Id
 ///</summary> public
 int Regionsid {get; set;}
 <summary>
 ///Tree display text (corresponding to region name)
 ///</summary> Public
 string text {get; set;}
 ///<summary>
 ///tree ID (corresponding node)
 ///</summary> public
 string ID {get; set;}  
 <summary>
 ///child node data (this attribute is the hierarchical relationship of the data represented)
 ///</summary> public
 list<regionstreeoutput > Children {get; set;}
}

Data conversion

 #region Getregiontree initialization Data Fetch secondary method public Regionstreeoutput loadregions (string ID, list<region> inregions, Regi Onstreeoutput outregions) {list<region> 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]);//Recursive Call}} 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

Initializing to get converted Data

 <summary>
 ///Initialization Data acquisition
 ///</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);
 }

The data in the background 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 ': {' anima 
     tion ": 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 after we need to define multiple items, we return the var actions = {} through the object's way; Add a "Add" right button menu Actions.create = {//Here's create in fact wide to arbitrarily named, the key is inside this inside of the action callback method "Separator_before": false  ,//create this item before dividing line "Separator_after": true,//create this item after dividing line "_disabled": false, the//false indicates that create this item can use; True indicates that "lab" cannot be usedEl ":" New ",//create the name of this item can be customized" action ": function (data) {//Click Create to trigger this method, this is useful for the var inst = $.jstre E.reference (data.reference), obj = Inst.get_node (data.reference);//Get current node, can get all attributes//new nodes of current node, following three lines of code comment Drop will not add node Inst.create_node (obj, {}, "last", function (New_node) {settimeout (function () {Inst.edit (new _node);
        }, 0);//A new node triggers the Rename method, that is, the node can be renamed immediately after the creation of the node;
       }
       }; if (o.id!= "0001")//shield to the root node operation "0001" to the root node corresponding to the true ID {///Add a "rename" right button menu Actions.rename = {"Se Parator_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 button menu ActioNs.delete = {"Separator_before": false, "icon": false, "Separator_after": false, "_di Sabled ": 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;//the right menu item}};
  }); });

Other actions

Deletes the 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) {}});
});
  Move node $ (' #jstree_demo '). On (' Move_node.jstree ', function (e, data) {saveregions (data);
});
  Modify 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 (). GE T_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.Re
     Gionsid = SData;
  data.node.state.opened = false;//Whether expand}}); }

Of course, remember to modify or delete the ID of the corresponding background entity to take regionsid.

Through the button to operate and delete changes

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);

If you want to know more details please download the source code:

Http://xiazai.jb51.net/201605/yuanma/TreeDemo (jb51.net). rar

About the infinite classification and tree structure data additions and deletions to the relevant knowledge to introduce you here, I hope to help you!