分类导航

asp.Net 发布时间：2022-04-07 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了无限分级和tree结构数据增删改【提供Demo下载】，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

无限分级

很多时候我们不确定等级关系的层级，这个时候就需要用到无限分级了。

说到无限分级，又要扯到递归调用了。（），在此我们需要先设计好表机构，用来存储无限分级的数据。

说来其实也简单，就是一个ID和父ID的关系。

title="无限分级和tree结构数据增删改【提供Demo下载】" alt="无限分级和tree结构数据增删改【提供Demo下载】" src="https://cn.js-code.com/res/2019/02-07/23/a3e2fe7060014f7c1bb431135e150db4.png" >

以此类推，Id需要是唯一的，ParenId需要是Id列里面存在即可。这样我们就实现无限分级了，如果再加一列Sort排序就更完美了。

jstree插件

官方地址：

为什么要用这个插件？因为有方便的api给我们做数据绑定，且支持节点拖动来实现增删改，个人觉得这个功能挺强大的。

Demo

下面我们来基于jstree插件来实现无限分级数据操作。以区域数据操作为例，用Code First的方式来编写demo代码。

创建Region实体

为了配合插件自动生成的节点id，我们这里使用的Node和ParentNode来存储上下级关系（）。

Id { ; Name { ; Node { ; ParentNode { ; }

数据转换

GetRegionTree 初始化数据获取的辅助方法 RegionsTreeOutput LoadRegions( id,List

        List</span><Region> regions = inRegions.Where(t => t.ParentNode ==<span style="color: #000000;"&gt; id).ToList();
        </span><span style="color: #0000ff;"&gt;if</span> (outRegions == <span style="color: #0000ff;"&gt;null</span>)<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;加载父节点</span>

{
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,outRegions.children[i]);//递归调用
 }
}
}
return outRegions;
}

    </span><span style="color: #0000ff;"&gt;public</span><span style="color: #000000;"&gt; RegionsTreeOutput ToTreeData(Region region)
    {
        </span><span style="color: #0000ff;"&gt;var</span> treeData = <span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; RegionsTreeOutput();
        treeData.id </span>=<span style="color: #000000;"&gt; region.Node;
        treeData.text </span>=<span style="color: #000000;"&gt; region.Name;
        treeData.RegionsId </span>=<span style="color: #000000;"&gt; region.Id;            
        </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; treeData;
    }
    </span><span style="color: #0000ff;"&gt;public</span> List<RegionsTreeOutput> ToTreesData(List<Region><span style="color: #000000;"&gt; listRegion)
    {
        </span><span style="color: #0000ff;"&gt;var</span> regions = <span style="color: #0000ff;"&gt;new</span> List<RegionsTreeOutput><span style="color: #000000;"&gt;();
        </span><span style="color: #0000ff;"&gt;for</span> (<span style="color: #0000ff;"&gt;int</span> i = <span style="color: #800080;"&gt;0</span>; i < listRegion.Count; i++<span style="color: #000000;"&gt;)
        {
            regions.Add(ToTreeData(listRegion[i]));
        }
        </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; regions;
    }
    </span><span style="color: #0000ff;"&gt;#endregion</span></pre>

初始化获取转换后的数据

= regions = db.Regions.Where(t => regionObj = LoadRegions(,regions,

以上后台的数据差不多就完成了。

前台数据加载

其他操作

$('#jstree_demo').on('delete_node.jstree', id ="get""/Home/DeleteRegion?id=" +

            }
        }); 
    });

//移动节点
$('#jstree_demo').on('move_node.jstree',data) {
saveRegions(data);
});
//修改名
$('#jstree_demo').on('rename_node.jstree',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。

通过按钮来操作增删改

ref = $('#jstree_demo').jstree(= (!sel.length) { = sel[0= ref.create_node(sel,{ "type": "file"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);
};

更加详细的细节请看demo。

链接： 密码：c6b7

2016.08.26更新

以上方式有问题：如果多个用户同时新建节点，会有重复的。（因为节点data.node.id是前端页面自动生成的）

解决方法：(更改data.node.id的值从后台赋值)

前端：

$({ treeObj = $('#jstree_demo'{ checkbox" 'plugins': ["contextmenu",'core'{ "animation": 0 'data': BACk) { $.ajax({ "type": "post""url": "/Home/GetResultData""data"{},"success": { callBACk(sData); ); } },

{ id =.original.RegionsId; name = data.node.text;修改后的name .old;//原name .original.RegionsId; ParentNode = ($('#jstree_demo').jstree().get_node(data.node.parent).original.MyNode || data.node.parent); pNode = (data.node.original.MyNode ||); josnData = { "Id": id,"Node": pNode,"ParentNode": ParentNode,"Name"{ url: "/Home/SaveRegions""post"success: { data.node.original.RegionsId =.opened = true;//是否展开 data.node.original.MyNode =

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;修改点（4）</span>
        $.jstree.reference("#jstree_demo").refresh();<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;刷新jstree控件，重新加载数据（）</span>

}
});
}

后台：

input.Node = Guid.NewGuid().ToString();

更新demo：http://pan.baidu.com/s/1gfdmQoN" target="_blank">http://pan.baidu.com/s/1gfdmQoN

【注意】

不能使用SELEct控件，可以使用div、input

大佬总结

以上是大佬教程为你收集整理的无限分级和tree结构数据增删改【提供Demo下载】全部内容，希望文章能够帮你解决无限分级和tree结构数据增删改【提供Demo下载】所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

无限分级和tree结构数据增删改【提供Demo下载】