阅读目录

无限分层jstree插件Demo创建Region实体以满足数据对象Dto jstree插件的数据转换初始化，获取转换后的数据，加载前台数据，以及其他操作，例如通过按钮进行添加、删除和修改。

无限分级

在很多情况下，我们对层次的层次是不确定的，所以需要使用无限层次。

说到无限分级，是时候递归调用了。(据说频繁递归非常消耗性能。)在这里，我们需要设计一个表机制来存储无限分级的数据。当然，以下都是自己瞎折腾的结果，并不标准。谁的设计更好，不吝赐教。

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

以此类推，Id需要是唯一的，ParenId需要存在于Id列中。这样就可以实现无限分类，如果加上Sort的一列，会更加完善。

Jstree插件

官方地址：https://www.jstree.com/.

为什么要用这个插件？因为有一个方便我们做数据绑定的api，支持节点拖拽添加、删除、更改，我个人觉得这个功能还是挺强大的。

演示

让我们基于jstree插件实现无限分级的数据操作。以区域数据操作为例，演示代码采用代码优先的方式编写。

创建区域实体。

为了匹配插件自动生成的Node id，我们在这里使用Node和ParentNode来存储父子关系(而不是上面提到的id和parentid，但实际效果是一样的)。

///summary///region///summary public class region {///summary///primary key Id///summary public int Id { get；设置；} ///summary ///name////summary公共字符串名称{ get设置；} ///summary ///node/////summary公共字符串节点{ get设置；}///summary////父节点////summary公共字符串父节点{ get设置；}}符合jstree插件的数据对象Dto。

为了满足jstree插件的数据需求，我们需要将上述数据转换成树数据对象。

///summary///Dto////summary public class RegionsTreeOutput {///summary///Id////summary public int regionSid { get；设置；} ///summary ///tree显示文本(对应地区名称)////summary公共字符串文本{ get设置；}///summary////树的id(对应节点)////summary公共字符串id { get设置；}///summary////子节点数据(此属性反映数据的层次关系)////summary public listriangestereoutput children { get；设置；}}数据转换。

#region GetRegionTree，初始化数据采集的辅助方法，Public Region streeooutload Regions(字符串ID，区域中的列表区域，regionstreeooutput outRegions){ List Region Regions=in Regions。其中(t=t.ParentNode==id)。to list()；If (outRegions==null)//加载父节点{ Outregions=totaredata(regions[0])；加载区域(外部区域. id，内部区域，外部区域)；} else//加载子节点{outregions。children=totreesdata(区域)；if(地区。计数0){ for(int I=0；一.区域。计数；i ) { LoadRegions(区域[i])。Node，inRegions，outregions . children[I])；//递归调用}}}返回outRegions} public RegionsTreeOutput to treeData(Region Region){ var treeData=new RegionsTreeOutput()；treeData.id=region。节点；treeData.text=region。名称；treeData。RegionsId=区域。id；返回treeData} public ListRegionsTreeOutput to treedata(ListRegion list region){ var regions=new ListRegionsTreeOutput()；for(int I=0；我列出了地区。计数；i ) {地区。add(Totreedata(ListRegion[I])；}返回地区；} #endregion初始化以获取转换后的数据。

///summary////初始化数据获取////summary///returns/returns public JSON结果getresultdata(){ treedb context db=new treedb context()；var regions=db。区域。其中(t=真)。to list()；var regionObj=LoadRegions('-1 '，Regions，null)；返回Json(regionObj)；}以上背景资料差不多完成了。

前台数据加载。

$(function () { $).post('/Home/GetResultData '，null，函数(sData) { treeObj=$('#jstree_demo ').jstree({ //，' checkbox ' ' plugins ' :[' context menu '，' dnd '，' search '，' state '，' types '，' wholerow '，' core ' : { ' animation ' : 0 0 0，' check_callback': true，' force_text': true，' themes ' : { ' strips ' 33: true }，' data ' : sData '，' types ' : { ' default '因为这里我们之后需要定义多个项，所以通过对象的方式返回var actions={ }；//添加一个'新增'右键菜单actions.create={//这里的创造其实阔以随意命名，关键是里面的这里面的行为回调方法' :之前的分隔符false，//创建这一项在分割线之前' :后的分隔符true，//创建这一项在分割线之后_disabled': false，//false表示创造这一项可以使用；真实的表示不能使用标签':'新增，//创建这一项的名称可自定义行动' :函数（数据){ //点击创造这一项触发该方法，这理还是蛮有用的var inst=$。jstree。参考(数据。参考)，obj=inst。get _ node(数据。参考)；//获得当前节点，可以拿到当前节点所有属性//新加节点，以下三行代码注释掉就不会添加节点inst.create_node(obj，{}，' last '，function(new _ node){ setTimeout(function(){ inst。编辑(new _ node)；}, 0);//新加节点后触发重命名方法，即创建节点完成后可以立即重命名节点});} };if (o.id！='0001')//屏蔽对根节点的操作"0001"改成根节点对应的真是id { //添加一个'重命名'右键菜单行动。rename={ ' separator_before': false，' separator _ before ' : false，' _disabled': false，//(this.check('rename_node '，data.reference，this.get_parent(data.reference)，'')，' label': '重命名，' action ' :函数(数据){ var inst=$。jstree。参考(数据。参考)，obj=inst。get _ node(数据。参考)；本月的编辑(obj)；} } //添加一个'删除'右键菜单行动。delete={ ' separator_before': false，' icon': false，' separator _ before ' : false，' _disabled': false，/(this.check('delete_node '，data.reference，this.get_parent(data.reference)，'')，' label': '删除，' action ' :函数(数据){ var inst=$。jstree。参考(数据。参考)，obj=inst。get _ node(数据。参考)；if(inst。is _ selected(obj)){ inst。delete _ node(inst。get _ selected())；} else { inst。delete _ node(obj)；} } };}返回操作；//返回右键菜单项} }, });});});其他操作

//删除节点$('#jstree_demo ').on('delete_node.jstree '，函数(e，数据){ var id=data。节点。原创。regionSiD$.ajax({ type: 'get '，url: '/Home/DeleteRegion？id=' id，success:函数(SData){ } })；});//移动节点$('#jstree_demo ').on('move_node.jstree '，函数(e，数据){保存区域(数据)；});//修改名$('#jstree_demo ').on('rename_node.jstree '，函数(e，数据){ SaveRegions(数据)；});//保存函数保存区域(数据){ var id=data。节点。原创。regionsidvar name=数据。节点。文本；//修改后的name//var旧名称=数据。旧的；//原name //var pNode=$('#jstree_demo ').jstree().get _ node(数据。节点。父母)。原创。regionSiDvar josnData={ 'Id': id，' Node': data.node.id，' parent Node ' : data。节点。父项，“名称”:名称}；$.Ajax({ URL : '/Home/save regions '，data: josnData，success : function(SData){ data。节点。原创。regionsid=sData数据。节点。国家。open=false//是否展开} });}当然，记得修改或是删除要取区域身份这个对应后台实体的身份证。

通过按钮来操作增删改

函数create tree(){ var ref=$(' # jstree _ demo ').jstree(真)，sel=ref。get _ selected()；if(！出售。长度){ return false} sel=sel[0]；sel=ref.create_node(sel，{ ' type ' : ' file ' })；if(sel){ ref。编辑(sel)；}};函数renameTree(){ var ref=$(' # jstree _ demo ').jstree(真)，sel=ref。get _ selected()；if(！出售。长度){ return false} sel=sel[0]；ref.edit(sel，function(){ })；};函数删除树(){ var ref=$(' # jstree _ demo ').jstree(真)，sel=ref。get _ selected()；if(！出售。长度){ return false} ref。delete _ node(sel)；};如果大家想了解详情请下载源码：

http://夏哉。JB 51。net/201605/马援/TreeDemo(jb51.net).压缩包

关于无限分级和树结构数据增删改的相关知识就给大家介绍到这里，希望对大家有所帮助！