BootStrap Jstree树形菜单的增删改查的实现源码

1.首先需下载jstree的插件点击打开链接

2.在页面引入插件射流研究…文件钢性铸铁文件

链接rel='样式表href=' plugins/jstree/themes/classic/style。CSS ' rel='外部无跟随'脚本类型=' text/JAVAScript ' src=' http : plugins/jstree/_ lib/jquery。js /脚本类型=' text/JAVAScript ' src=' http : plugins/jstree/_ lib/jquery。饼干。js /脚本类型=' text/JavaScript ' src=' http 333333初始化控件

1)html

div id=' demo 2 ' class=' demo ' style=' height :100 px；'/div 2)js使用demo2来初始化树形控件

脚本类型=' text/JavaScript ' class=' source below ' $(function(){ $(' # demo 2 ')).jstree({ ' JSON _ data' : { ' Ajax ' : { ' URL ' : ' http://localhost :8080/MemberManager/departmenttrejson '，' data ' :函数(n) { //结果被馈送到创建交互式、快速动态网页应用的网页开发技术请求数据选项返回{ 'operation' : 'get_children '，' id' : n.attr？n .attr('id ').替换(' node_ '，' '): 1 }；} }，' plugins' : [ 'themes '，' json_data '，' ui '，' crrm '，' contextmenu '，' search' ]，}).绑定(' loaded.jstree '，函数（事件，数据){ })。绑定(' select_node.jstree '，函数（事件，数据){ if (data.rslt.obj).attr('id ')！=未定义){ } })。bind('remove.jstree '，function(e，data){ data。rslt。物体。每个(函数(){ $).ajax({ async : false，键入： 'POST '，URL : ' http://localhost :8080/MemberManager/CreateNodeForDepartment '，数据： { ' operation ' : ' remove _ node '，' id' : this.id.replace('node_ '，' ')}，成功：函数(r) { if(！r .状态){数据。本月的刷新()；} } });});}) .bind('remove.jstree '，function(e，data){ data。rslt。物体。每个(函数(){ $).ajax({ async : false，键入： 'POST '，URL : ' http://localhost :8080/membermacer/CreateNodeForDepartment '，数据： { ' operation ' : ' remove _ node '，' id' : this.id .replace('node_ '，' ')}，success : function(r) { if(！r .状态){数据。本月的刷新()；} } });});}) .绑定(' create.jstree '，函数(e，数据){ $ .post(' http://localhost :8080/MemberManager/CreateNodeForDepartment '，{ 'operation' : 'create_node '，' id' : data.rslt.parent .attr('id ').替换(' node_ '，'')，' position ' :数据。rslt。位置，“标题”: data.rslt.name，“类型”: data.rslt.obj .attr('rel') }，函数(r){ if(r . status){ $(数据。rslt。obj ).attr('id '，' node _ r ' id)；} else { data。本月的刷新()；$ .jstree。回滚(数据。rlbk)；} });}) .绑定(' rename.jstree '，函数(e，数据){ $ .post(' http://localhost :8080/MemberManager/CreateNodeForDepartment '，{ 'operation' : 'rename_node '，' id' : data.rslt.obj .attr('id ').替换(' node_ '，'')，' title' : data.rslt.new_name }，函数(r) { if(！r .状态){数据。本月的刷新()；$ .jstree。回滚(数据。rlbk)；} });}) //1)一旦解析并插入数据，加载的事件就会触发//2)但是如果您使用的是甜饼干插件或核心的"最初_打开"选项：一个(“重新打开. jstree”，函数（事件，数据){ }) //3)但是如果你使用的是甜饼干插件或者用户界面“初始选择”选项：一个(' reselect.jstree '，函数（事件，数据){ });});/script /pre4 .代码解析p/pppre name=' code ' class=' Java '导入Java。乌提尔。列表；公开课系{ //部门编号私有字符串部门id；//部门名称私有字符串名称；//父级部门标识私有字符串父标识；//同级之间的排序。

排序编号小的排前面私人字符串订单；//子节点私有列表部门子节点；公共列表部门getChildNode(){返回childNode} public void setChildNode(列出部门子节点){ this。子节点=子节点；} public String get department id(){ return department id；} public void set department id(String department id){ this。部门id=部门id；} public String getName(){ return name；} public void setName(String name){ this。name=name} public String getParentid(){ return parentid；}公共void集父id(String父id){ this。父id=父id；} public String getOrders(){ return orders；} public void Setorders(String orders){ this。订单=订单；} @将公共字符串重写为String(){返回'[部门id :]这个。部门id '部门名称： '这个。将此命名为“parentid :”。parentid '命令3360 '这个。订单']'；} } 4.代码解析

插件初始化我这里使用了插件的两个参数json_data，以及插件注意看代码结构

4.1上图两个部分即初始化部分重点解释下插件这个参数是jstree整合插件的地方主题表示主题，json_data将上文定义的json_data也就

是埃阿斯从后要获取json数据返回到前台页面上下文菜单，是鼠标右键在树形节点上会弹出增删改查的菜单。

4.2 json数据的格式

先看展示

这是一个可以无限极下分的菜单，我们可以根据上图的目录结构对照下面的json数据结构来看，这样会更清晰。

{ '数据' : '软件及数据，' attr ' : { ' id ' : ' e 59365 B9-7b2a-43 a3-b10a-cfe 03d 5eb 004 ' }，' children':[ {'data': '创新组，' attr ' : { ' id ' : ' 73919359-2a 1 B- 4ee 7-bcc 2-56949 e 8560 e 8 ' }，' children':[ {'data': '大数据，' attr ' : { ' id ' : ' a7ea 6a 0f-0b 78-4064-803 B- f2e0a 95d 914 f ' }，' children':[ {'data': '研发，' attr ' : { ' id ' : ' fc 20e 438-e7b 9-4cca-be6a-49965 daab 528 ' }，' children ' :[]} } }，{'data': '项目管理，' attr ' : { ' id ' : ' E1 bdae 71-6 CFB-4e 8c-ab29-a3eb 03 b 9961d ' }，' children ' :[]}，4.4组装json数据，我使用的是首先查找到所有的父节点即parentid=1的时候，然后递归将所有的子节点加到Listchiledren对象里面，紧接着再通过循环递归组装无限极菜单json数据下面看数据库数据结构

导入Java。乌提尔。列表；公开课系{ //部门编号私有字符串部门id；//部门名称私有字符串名称；//父级部门标识私有字符串父标识；//同级之间的排序。排序编号小的排前面私人字符串订单；//子节点私有列表部门子节点；公共列表部门getChildNode(){返回childNode} public void setChildNode(列出部门子节点){ this。子节点=子节点；} public String get department id(){ return department id；} public void set department id(String department id){ this。部门id=部门id；} public String getName(){ return name；} public void setName(String name){ this。name=name} public String getParentid(){ return parentid；}公共void集父id(String父id){ this。父id=父id；} public String getOrders(){ return orders；} public void Setorders(String orders){ this。订单=订单；} @将公共字符串重写为String(){返回'[部门id :]这个。部门id '部门名称： '这个。将此命名为“parentid :”。parentid '命令3360 '这个。订单']'；} } 4.5 此处小型应用程序为客户端提供jstree的json_data。就是在初始化控件时候有创建交互式、快速动态网页应用的网页开发技术调用这个小型应用程序获取json数据并返回给json_data

导入Java。io。ioexception导入Java。io。版画作家；导入javax。servlet。servletexception导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse进口cn。金色风。www。服务。Department ServiCe进口cn。金色风。www。服务输入。DepartmentServiceimpl公共类DepartmentTreeJson扩展了httpersvlet {/* * * */private static final long serial version id=1L；public DepartmentTreeJson(){ super()；} @ Override public void destroy(){ super。销毁()；//只需在日志中放入“摧毁”字符串//将代码放在此处} @覆盖公共void doGet(httpersvletrequest请求，HttpServletResponse响应)抛出ServletException，IOException { request。setcharacter encoding(' utf-8 ')；回应。setcontenttype(' text/html；字符集=UTF-8 '；PrintWriter out=响应。getwriter()；DepartmentService department service=new DepartmentServiceImpl()；//此处调用创建树节点的方法StringBuilder JSON=DeptServiCe。createTreeNode()；JSON。删除charat(JSON。length()-1)；系统。出去。println(JSON)；出去。print('[' JSON ']')；出去。flush()；出去。close()；} @ Override public void doPost(httpersvletrequest请求，HttpServletResponse响应)抛出ServletException，IOException { doGet(请求，响应);} @覆盖公共void init()抛出ServletException { //将代码放在这里} } 4.6上面小型应用程序我们看下createTreeNode方法

这里是创建json的核心。

1)首先获取所有的（父级=1)根节点

@ Override public StringBuilder createTreeNode(){//创建部门集合列出部门部门=新Arraylistdepartment()；//放置所有的根节点部门实体departments=queryByParentID(' 1 ')；如果（部门！=null){ 0返回JSON(部门)；}返回null } public StringBuilder JSON(ListDepartment departments){ for(int I=0；一、部门。size()；I){ JSON。追加(' { ')；JSON。追加(' \ '数据' : \ ').追加(部门. get(i)).getName()).追加(' \ ',');JSON。追加(' \ ' attr ' : { \ ' id ' : \ ').追加(部门. get(i)).getDepartmentid()).追加(' \'},');列出部门dept child=queryByParentID(部门。得到(我).getdepartment id())；JSON。追加(' \ ' child ' : ')；JSON。追加('[')；if (deptchild！=null){ JSON(deptchild)；if('1 ' .等于（部门)。getParentid())){ JSON。删除charat(JSON。length()-1)；JSON。追加(']')；JSON。追加(“}”)；json.append('，')；}if(！'1'.等于（部门)。getParentid())deptchild！=null){ JSON。删除charat(JSON。length()-1)；JSON。追加(']')；JSON。追加(“}”)；json.append('，')；} } else { JSON。追加(']')；JSON。追加(“}”)；json.append('，')；} }返回JSON } @ Override public list department query by parentID(String parentID){ basedoatemplate BD=new basedoatemplate()；列出部门部门=新Arraylistdepartment()；字符串sql='选择部门id，名称，parentid，来自parentid=？'所在部门的订单；ListObject params=new ArrayListObject()；参数。添加(ParentID)；部门=BD。findaldata(部门。类、sql、params)；if(部门。大小)(0){返回部门；}返回null} 4.7

1.如何创建节点通过右键点击树形菜单弹出增加移除等操作（需在插件里面加入上下文菜单这个例子就有)

2.绑定jstree的操作，此处以增加节点为例不一一例举

原理；通过点击创建按钮（上下文菜单)即选定树节点右键弹出按钮。调用上图的方法，上图方法邮政方法通过创建交互式、快速动态网页应用的网页开发技术请求后台数据把创建的树节点保存到数据库，

操作：操作的方式（创建，移除，修改。);

id:当前节点的编号即你创建下一个节点的父母身份。

标题：创建的新节点的名称

有这些数据就可以字啊后台获取数据然后增加到数据库。

4.8 创建小型应用程序处理所有的操作（创建，移除，修改。)

导入Java。io。ioexception导入Java。io。版画作家；导入Java。乌提尔。UUID；导入javax。servlet。servletexception导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse进口cn。金色风。www。POJO。部门；进口cn。金色风。www。服务。Department ServiCe进口cn。金色风。www。服务输入。DepartmentServiceimpl公共类CreateNodeForDepartment扩展了httpersvlet { private static最终长串行版本id=1L；public CreateNodeForDepartment(){ super()；} @ Override public void destroy(){ super。销毁()；//只需在日志中放入“摧毁”字符串//将代码放在此处} @覆盖公共void doGet(httpersvletrequest请求，HttpServletResponse响应)抛出ServletException，IOException { request。setcharacter encoding(' utf-8 ')；回应。setcontenttype(' text/html；字符集=UTF-8 '；PrintWriter out=响应。getwriter()；DepartmentService department service=new DepartmentServiceImpl()；if('rename_node ' .等于(请求。getParameter(' operation '){ String id=request。getParameter(' id ')；字符串标题=请求。getParameter(' title ')；部门部门=新部门();dept . SetDepartmentId(id)；deptService.modifyDepartment(部门，标题);}else if('create_node ' .等于(请求。getParameter(' operation '){ String id=request。getParameter(' id ')；字符串标题=请求。getParameter(' title ')；部门部门=新部门();dept . setdepartmentid(uuid。randomuuid().toString())；dept.setName(标题);dept . SetParentId(id)；deptService.insertDepartment(部门);}else if('remove_node ' .等于(请求。getParameter(' operation '){ String id=request。getParameter(' id ')；部门部门=新部门();dept . SetDepartmentId(id)；deptService.deleteDepartment(部门);}出去。flush()；出去。close()；}/* * * servlet的doPost方法br * *当表单的标记值方法等于*员额时，调用此方法* * @param请求*客户端发送到服务器的请求* @param响应*服务器发送到客户端的响应* @如果发生错误，将抛出ServletException *如果发生错误，将抛出IOException */@ Override public void doPost(httpersvletrequest请求，HttpServletResponse响应)将抛出ServletException，IOException { doGet(请求，响应)；}/* * * servlet的初始化br * * @出现错误时抛出ServletException */@覆盖公共void init()抛出ServletException { //将代码放在这里} }好了这就完成了，当然这里面的树也是可以自定义图标，自定义按钮等操作，具体可以自己去探究。

以上所述是小编给大家介绍的BootStrap Jstree树形菜单的增删改查的实现源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！