无限分级和tree结构数据增删改【附DEMO下载】

阅读目录

•无限分级
•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结构数据增删改的相关知识就给大家介绍到这里,希望对大家有所帮助!

(0)

相关推荐

  • 攻克CakePHP系列三 表单数据增删改

    这里声明一点,上例中不小心把数据库表中lastupd字段错打成lastudp,本例子予以更正. 除上诉字段数据库与上例一致. 工程仍沿用上例,如下图: 代码依次为: database.php:与上例一致. companies_controller.php: <?php  class CompaniesController extends AppController { var $name = 'Companies'; function index() { $this->set('compani

  • asp无限分级(递归调用)

    数据库字段:id(自动编号),class_name(菜单名),parentID(父菜单id) 复制代码 代码如下: <% dim m  m=0 call ShowTree(0)%> <% Sub ShowTree(parentID)      dim s      m=m+1      Dim rs      Set rs = Server.CreateObject("ADODB.RecordSet")      sql="Select class_id,c

  • jquery实现无限分级横向导航菜单的方法

    本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下: 复制代码 代码如下: (function($){     $.fn.extend({         droplinemenu: function(configs) {             var configs = $.extend({                                over: 200,                 o

  • 关于无限分级(ASP+数据库+JS)的实现代码

    代码可以优化,请根据自己需求进行优化  说明: 所先把所有分类读取存放到JS数组中(如果数据量大可能就有点麻烦) 当选择时候返回父分类ID 在从数组中找出符合的分类,然后显示给用户 数据库设计(可以根据自己需求添加字段,如此分类属于什么分类等等) 字段            类型          说明 id               自动编号     记录编号 cotename    文本           分类名称 byid            数字           父分类ID(即

  • PHP数组无限分级数据的层级化处理代码

    复制代码 代码如下: /** * 创建父节点树形数组 * 参数 * $ar 数组,邻接列表方式组织的数据 * $id 数组中作为主键的下标或关联键名 * $pid 数组中作为父键的下标或关联键名 * 返回 多维数组 **/function find_parent($ar, $id='id', $pid='pid') {   foreach($ar as $v) $t[$v[$id]] = $v;  foreach ($t as $k => $item){    if( $item[$pid] )

  • PHP不用递归实现无限分级的例子分享

    两个不用递归的树形数组操作函数 复制代码 代码如下: /** * 创建父节点树形数组 * 参数 * $ar 数组,邻接列表方式组织的数据 * $id 数组中作为主键的下标或关联键名 * $pid 数组中作为父键的下标或关联键名 * 返回 多维数组 **/function find_parent($ar, $id='id', $pid='pid') {   foreach($ar as $v) $t[$v[$id]] = $v;  foreach ($t as $k => $item){    i

  • Android SQLite数据库增删改查操作的使用详解

    一.使用嵌入式关系型SQLite数据库存储数据 在Android平台上,集成了一个嵌入式关系型数据库--SQLite,SQLite3支持NULL.INTEGER.REAL(浮点数字). TEXT(字符串文本)和BLOB(二进制对象)数据类型,虽然它支持的类型只有五种,但实际上sqlite3也接受varchar(n). char(n).decimal(p,s) 等数据类型,只不过在运算或保存时会转成对应的五种数据类型. SQLite最大的特点是你可以把各种类型的数据保存到任何字段中,而不用关心字段

  • 无限分级和tree结构数据增删改【附DEMO下载】

    阅读目录 •无限分级 •jstree插件 •Demo •创建Region实体 •满足jstree插件的数据对象Dto •数据转换 •初始化获取转换后的数据 •前台数据加载 •其他操作 •通过按钮来操作增删改 无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以下都是自己捣鼓的结果,非标准.谁有更好的设计望不吝啬赐教. 说来其实也简单,就是一个ID和父

  • vue中使用elementui实现树组件tree右键增删改功能

    功能描述: 1.右击节点可进行增删改 2.可对节点数据进行模糊查询 3.右击第一级节点可以进行同级节点增加 4.双击节点或点击修改节点 都可以对节点获取焦点并进行修改,回车修改成功 5.可对节点进行拖拽,实现节点移动功能 效果图: 完整代码: <template> <div class="lalala tree-container"> <el-input placeholder="输入关键字进行过滤" v-model="fil

  • Asp.Net Mvc2 增删改查DEMO附下载

    1.List页面,一般List页面主要用来显示数据,本文中的List页面提供,数据显示并且分页.删除操作.新增及修改操作.因为看到园子里面有部分人在使用MVC进行数据显示的时候还在使用ViewData,这里介绍的是强类型显示数据.添加新的视图,在第一行代码可以看到 复制代码 代码如下: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> 这里可以定义这个视

  • Asp.Net Mvc2 增删改查DEMO代码

    1.List页面 一般List页面主要用来显示数据,本文中的List页面提供,数据显示并且分页.删除操作.新增及修改操作.因为看到园子里面有部分人在使用MVC进行数据显示的时候还在使用ViewData,这里介绍的是强类型显示数据.添加新的视图,在第一行代码可以看到 复制代码 代码如下: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> 这里可以定义这个视

  • jQuery使用$.ajax进行异步刷新的方法(附demo下载)

    本文实例讲述了jQuery使用$.ajax进行异步刷新的方法.分享给大家供大家参考,具体如下: 最近要用到jquery进行异步读取数据的功能,jquery提供了许多内置的异步读取函数,给大家演示下最常用的$.ajax用法 在客户端文本框输入一个内容,然后在服务器端返回时间 在DEMO中要用到ashx文件,用于获取服务器的信息 效果图片 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 客户端代码 <%@ Page Language="C#" Au

  • jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

    本文实例讲述了jQuery图片旋转插件jQueryRotate.js用法.分享给大家供大家参考,具体如下: 推荐一个图片旋转插件,用于浏览相册时,旋转图片. 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <script type="text/javascript"> $(document).ready(function () { $("#images").rotate(45); var value = 0 $("#images

  • element-ui tree结构实现增删改自定义功能代码

    首先是页面部分 <template> <el-tree id="userMtree" ref="tree" :data="treeData" node-key="id" :render-content="renderContent" :expand-on-click-node="false" @node-click="nodeClick" :defa

  • ant-design-vue中tree增删改的操作方法

    1. 使用背景 新项目中使用了ant-design-vue组件库.该组件库完全根基数据双向绑定的模式实现.只有表单组件提供少量的方法.所以,在使用ant-design-vue时,一定要从改变数据的角度去切换UI显示效果.然而,在树形控件a-tree的使用上,单从数据驱动上去考虑,感体验效果实在不好. 2. 当前痛点 通过阅读官方帮助文档,针对树形控件数据绑定.需要将数据构造成一个包含children,title,key属性的大对象.这样一个对象,要么通过后端构造好这样的json对象,要么就是后端

  • PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】

    本文实例讲述了PHP操作MongoDB实现增删改查功能.分享给大家供大家参考,具体如下: MongoDB的PHP驱动提供了一些核心类来操作MongoDB,总的来说MongoDB命令行中有的功能,它都可以实现,而且参数的格式基本相似.PHP7以前的版本和PHP7之后的版本对MongoDB的操作有所不同,本文主要以PHP7以前版本为例讲解PHP对MongoDB的各种操作,最后再简单说明一下PHP7以后版本对MongoDB的操作. 一.数据插入 //insert() //参数1:一个数组或对象 //参

  • Python中tkinter+MySQL实现增删改查

    一.设置主窗口 # -*- coding: utf-8 -*- import tkinter from tkinter import ttk import pymysql # 导入消息对话框子模块 import tkinter.messagebox # 创建主窗口 root = tkinter.Tk() root.title('告警查询') # 设置窗口大小 root.minsize(500,500) tabControl = ttk.Notebook(root) tab1 = ttk.Fram

随机推荐