Unlimited hierarchical and tree structure data addition, deletion and modification-JS Tutorial-php.cn

This article mainly introduces the relevant information about infinite classification and tree structure data addition, deletion and modification. Friends in need can refer to the following

Reading Directory

•Unlimited grading
•jstree plug-in
•Demo
•Create Region entity
•Satisfy the data object Dto of the jstree plug-in
•Data conversion
•Initialize acquisition Converted data
•Foreground data loading
•Other operations
•Add, delete, and modify through buttons

Unlimited grading

Many times we are not sure about the level of the hierarchical relationship. At this time, we need to use infinite grading.

Speaking of infinite grading, we have to talk about recursive calls again. (It is said that frequent recursion is very performance-intensive). Here we need to design the table structure first to store infinite hierarchical data. Of course, the following are all the results of my own fiddling and are not standard. If anyone has a better design, please feel free to enlighten me.

It is actually simple to say, it is the relationship between an ID and the parent ID.

By analogy, Id needs to be unique, and ParenId needs to exist in the Id column. In this way, we can achieve infinite grading. It would be even more perfect if we add another column of Sort.

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 it supports node dragging to add, delete, and modify, I personally think this function is quite powerful.

Demo

Let’s implement unlimited hierarchical data operations based on the jstree plug-in. Taking regional data operation as an example, use Code First to write demo code.

Create Region entity

In order to match the node id automatically generated by the plug-in, the Node we use here and ParentNode to store the superior-subordinate relationship (instead of the id and parentid mentioned above, but the actual effect is the same).

/// <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; }
}

Copy after login

Meet the data object Dto of the jstree plug-in

In order to adapt to the data requirements of the jstree plug-in, we need to convert the above data into a tree shape data object.

/// <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; }
}

Copy after login

Data conversion

 #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

Copy after login

Initialization to obtain the converted data

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

Copy after login

The above background data is almost complete.

Foreground data loading

 $(function () {
   $.post("/Home/GetResultData", null, function (sData) {
    treeObj = $(&#39;#jstree_demo&#39;).jstree({
     //, "checkbox"
     &#39;plugins&#39;: ["contextmenu", "dnd", "search", "state", "types", "wholerow"],
     &#39;core&#39;: {
      "animation": 0,
      "check_callback": true,
      &#39;force_text&#39;: true,
      "themes": { "stripes": true },
      &#39;data&#39;: 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;//返回右键菜单项
      }
     },
    });
   });
  });

Copy after login

Other operations

//删除节点
$(&#39;#jstree_demo&#39;).on(&#39;delete_node.jstree&#39;, function (e, data) {   
   var id = data.node.original.RegionsId;   
   $.ajax({
    type: "get",
    url: "/Home/DeleteRegion?id=" + id,
    success: function (sData) {

    }
   }); 
  });
//移动节点
$(&#39;#jstree_demo&#39;).on(&#39;move_node.jstree&#39;, function (e, data) {
   saveRegions(data);
  });
//修改名
$(&#39;#jstree_demo&#39;).on(&#39;rename_node.jstree&#39;, 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 = $(&#39;#jstree_demo&#39;).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;//是否展开
    }
   });
  }

Copy after login

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

Use buttons to operate additions, deletions, and changes

function createTree() { 
 var ref = $(&#39;#jstree_demo&#39;).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 = $(&#39;#jstree_demo&#39;).jstree(true),
  sel = ref.get_selected();
 if (!sel.length) { return false; }
 sel = sel[0];
 ref.edit(sel, function () {
  
 });
};

function deleteTree() {
 var ref = $(&#39;#jstree_demo&#39;).jstree(true),
  sel = ref.get_selected();
 if (!sel.length) { return false; }
 ref.delete_node(sel);
};

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Very practical ajax user registration module

##Ajax click to continuously load the data list (graphic tutorial)

Ajax Struts2 implements verification code verification function (graphic tutorial)

The above is the detailed content of Unlimited hierarchical and tree structure data addition, deletion and modification. For more information, please follow other related articles on the PHP Chinese website!