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

发布时间：2020-12-15 21:25:13 所属栏目：asp.Net 来源：网络整理

导读：无限分级很多时候我们不确定等级关系的层级，这个时候就需要用到无限分级了。说到无限分级，又要扯到递归调用了。（），在此我们需要先设计好表机构，用来存储无限分级的数据。说来其实也简单，就是一个ID和父ID的关系。以此类推，Id需要是唯一的，Pare

无限分级

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

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

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

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

jstree插件

官方地址：

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

Demo

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

创建Region实体

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

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

满足jstree插件的数据对象Dto

为了适应jstree插件的数据要求，我们需要把上面的数据转换成树状的数据对象。?

RegionsId { ; text { ; id { ; List children { ;

数据转换

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,

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

前台数据加载

$("/Home/GetResultData",,= $('#jstree_demo' 'plugins': ["contextmenu","dnd","search","state","types","wholerow"'core'"animation": 0"check_callback": 'force_text': "themes": { "stripes": 'data'"types""default""icon": "fa fa-folder icon-state-warning icon-lg""file""icon": "fa fa-file icon-state-warning icon-lg""contextmenu" actions = actions.create = { "separator_before": , "separator_after": , "_disabled": , "label": "新增", "action": (data) { inst == inst.get_node(data.reference); inst.create_node(obj,{},"last", () { inst.edit(new_node); },0); (o.id != "0001") actions.rename ="separator_before": "separator_after": "_disabled": , "label": "重命名""action": inst == actions. ="separator_before": "icon": "label": "删除"= actions;

其他操作

$('#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的值从后台赋值)

前端：

$(= $('#jstree_demo' 'plugins': ["contextmenu",'core'"animation": 0 'data': "type": "post""url": "/Home/GetResultData""data""success":

id = name = data.node.text; 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""/Home/SaveRegions""post"= 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：

【注意】

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!