【JSTREE】复选框默认选中【总结】

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <%

 String path = request.getContextPath();

 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

 %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <base href="<%=basePath%>">

     <title>js Tree Test</title>

     <meta http-equiv="pragma" content="no-cache">

     <meta http-equiv="cache-control" content="no-cache">

     <meta http-equiv="expires" content="0">

     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

     <meta http-equiv="description" content="This is my page">

     <!--

     <link rel="stylesheet" type="text/css" href="styles.css">

     -->

     <!-- CSS for js tree -->

     <link rel="stylesheet" type="text/css" href="static/jstree/dist/themes/default/style.min.css">

     <link rel="stylesheet" type="text/css" href="static/jstree/dist/themes/default-dark/style.min.css">

     <!-- CSS for bootstrap -->

     <link rel="stylesheet" type="text/css" href="static/bootstrap4.0/css/bootstrap.min.css">

     <!-- JS for jQuery -->

     <script type="text/javascript" src="static/js/jquery.min.js"></script>

     <!-- JS for js tree -->

     <script type="text/javascript" src="static/jstree/dist/jstree.min.js"></script>

     <!-- JS for bootstrap -->

     <script type="text/javascript" src="static/bootstrap4.0/js/bootstrap.min.js"></script>

   </head>

   <body>

       <div>

           <ul class="nav nav-tabs" role="tablist">

           <li role="presentation" class="active"><a href="#">Home</a></li>

           <li role="presentation"><a href="#">Profile</a></li>

           <li role="presentation"><a href="#">Messages</a></li>

         </ul>

       </div>

       <div class="panel panel-default">

       <div class="panel-body">

         <div class="tree" id="jstree"></div>

       </div>

     </div>

     <script>

         $(function(){

             $('#jstree').jstree({

                 core : {

                     check_callback : true,

                     data : [

                         { "id" : "1", "parent" : "#", "text" : "root"},

                         { "id" : "2", "parent" : "1", "text" : "child 1" },

                         { "id" : "3", "parent" : "1", "text" : "child 2"},

                         { "id" : "4", "parent" : "1", "text" : "child 3" },

                         { "id" : "5", "parent" : "1", "text" : "child 4" },

                         { "id" : "6", "parent" : "1", "text" : "child 5" },

                         { "id" : "7", "parent" : "1", "text" : "child 6"},

                         { "id" : "8", "parent" : "3", "text" : "child 3-1" },

                         { "id" : "9", "parent" : "3", "text" : "child 3-2" },

                         { "id" : "10", "parent" : "3", "text" : "child 3-3"}

                     ],

                 },

                 plugins : ["wholerow","checkbox"]

             }).on("ready.jstree", function (e, data) {

               //data.instance.open_all();

             }).bind("loaded.jstree",function(e,data){

                 var checkId=[9];

                 jQuery('#jstree').jstree("open_all");

                 jQuery('#jstree').find("li").each(function(){

                     if(checkId == 'all'){

                         jQuery('#jstree').jstree("check_node",jQuery(this));

                     }else if(checkId instanceof Array){

                         for(var i=0;i<checkId.length;i++){

                             if(jQuery(this).attr("id") == checkId[i]){

                               jQuery('#jstree').jstree("check_node",jQuery(this));

                             }

                         }

                     }

                 });

             });

         });

     </script>

   </body>

 </html>

一丶

1.该checkbox并不是真正的input-type='checkbox',而是图片，可以在jstree的包中看到这个图片，这也是比较通用的方式。

2.该页面放在SSM架构中实现的显示，在配置静态文件的时候遇到了一个问题：无法加载32.png和.gif文件

于是在web.xml文件分发器的前面加入了如下的配置：

<servlet-mapping>

        <servlet-name>default</servlet-name>

        <url-pattern>*.js</url-pattern>

    </servlet-mapping>

    <servlet-mapping>

        <servlet-name>default</servlet-name>

        <url-pattern>*.css</url-pattern>

    </servlet-mapping>

    <servlet-mapping>

        <servlet-name>default</servlet-name>

        <url-pattern>*.png</url-pattern>

    </servlet-mapping>

    <servlet-mapping>

        <servlet-name>default</servlet-name>

        <url-pattern>*.gif</url-pattern>

    </servlet-mapping>

网上有几种关于静态文件的加入方法，这种配置方法看起来有一些麻烦。把常用的后缀配置出来也还行。不想要的直接过滤掉。

二丶构建树的两种方式：

方式1：使用id,parent,text,icon等给出树的列表，parent节点将id设置为#

缺点：id和parent均必须唯一，不能有重复的key出现，如果重复，在使用plugins-checkbox时会出现错误勾选的情况。

方式2：使用text,children{}显示的把树形结构给出来，可以不设置id和parent，自动根据children的关系生成树。

缺点：需要根据数据库中的id和parent关系，在后台自己写嵌套方法或者递归将树形结构生成

结构如下：

为何不和方式1冲突，此处id和parent的命名不要出现

 package com.ws.poi.user;

 /**

  * @author Administrator

  *

  */

 public class JsTreeVo {

     private int keyId;

     private int pId;

     private String text;

     private String icon;

     private JsTreeVo children;

     private LiAttr liattr;

     // private TreeState{opened:true,selected:true,disabled,true} TODO

     public int getKeyId() {

         return keyId;

     }

     public void setKeyId(int keyId) {

         this.keyId = keyId;

     }

     public int getpId() {

         return pId;

     }

     public void setpId(int pId) {

         this.pId = pId;

     }

     public String getText() {

         return text;

     }

     public void setText(String text) {

         this.text = text;

     }

     public String getIcon() {

         return icon;

     }

     public void setIcon(String icon) {

         this.icon = icon;

     }

     public JsTreeVo getChildren() {

         return children;

     }

     public void setChildren(JsTreeVo children) {

         this.children = children;

     }

     public LiAttr getLiattr() {

         return liattr;

     }

     public void setLiattr(LiAttr liattr) {

         this.liattr = liattr;

     }

 }

 class LiAttr{

     private int pId;

     // TODO 其他 li的自定义属性 -同理 a_li属性也可以定义一个类来管理

 }

生成List<JsTreeVo> treeList即可：结构需要自己写方法生成。

PS：checkbox已经占用了click_node.jstree,dbclick_node.jstree,change_node事件

如果需要处理checkbox被勾选和反选，可以使用这两个事件：

select_node.jstree(e,data)和deselect_node.jstree(e,data)来获取被选中和反选的节点

e.树对象，可以拿到这棵树的所有内容

data.树数据，也可以拿到树的内容

可以通过data.instance.get_selected();获取到当前被选中的行的id，然后做进一步的处理，这些只要有一定jquery和js基础的都能做到。

三丶一些技巧

1.使用浏览器的console.log打印树的结构

2.open_all方法有弊端，如果数据量比较大，树形结构比较大的时候不建议使用这个方法。这个方法效率不高。

可以使用get_selected和get_node(node)方法拿到这个节点写一个递归方法来展开需要展开的节点：open_node(node);

3.关闭树可以直接使用close_all

4.使用checkbox-plugins时，一方面是事件的冲突性，另外一方面是数据回显时比较搞笑：如果last_child_node没有被展开是无法通过get_checked()方法来获取这个选中节点的

此时就需要借助1.2.的建议写方法来展开指定节点再抓取选中的值，不要直接使用open_all方法。

5.其他的一些常用操作，多学习js和jquery类似的插件都可以很好的解决。

6.树形结构是有层次的，4.中无法直接通过get_checked方法获取勾选的节点的根本原因就如此。使用open_node的时候也是需要递归展开节点，从root到末尾children。

7.通过get_bottom_checked()方法获取未展开却被勾选了的子末尾节点。

8.是否可以通过，get_parent和get_children回显数据呢？

没有get_children方法，可以使用：

$("#jstree2").jstree(true).get_node("j2_3")，该方法可以获取到未展开的节点。

$("#jstree2").jstree(true).get_node("j2_2").children_d，该方法能拿到该节点下的所有子节点，不区分层级。

由于树形结构未展开，所以是无法从children_d中直接获取到html的dom对象。

但是，可以拿到每一层的文本内容，可以先将这部分文本内容保存起来，找到需要勾选的节点，在open操作的时候把这些id选中。

下面成功绕过了手动调用open_node、open_all方法：

 $('#jstree2').jstree({

                 core : {

                     check_callback : true,

                     data : [

                         { "text" : "root"},

                         { "text" : "A","children":[{ "text" : "A-1","children":[{ "text" : "A-1-1" },{ "text" : "A-1-2"}]},{ "text" : "A-2","children":[{ "text" : "A-2-1" },{ "text" : "A-2-2"}]}] },

                         { "text" : "child 2"},

                         { "text" : "child 3","children":[{ "text" : "child 5" },{ "text" : "child 6"}]},

                         { "text" : "child 4","children":[{ "text" : "child 5" },{ "text" : "child 6"}]},

                         { "text" : "child 5" },

                         { "text" : "child 6"},

                         { "text" : "child 3-1" },

                         { "text" : "child 3-2" },

                         { "text" : "child 3-3"}

                     ],

                 },

                 plugins : ["wholerow","checkbox"]

             }).on("ready.jstree", function (e, data) {

               //data.instance.open_all();

             }).bind("loaded.jstree",function(e,data){ 

                 /** 以下操作成功避开了手动调用open_node方法*/

                 // 测试数据 - 需要回显的数据结构

                 var check = ['A/A-1/A-1-2','A/A-2/A-2-1'];

                 // 所有节点id列表

                 var nodes = data.instance._model.data;

                 //console.log(nodes);

                 var $tree = $("#jstree2").jstree(true);

                 var p_length = 0;

                 var rv = "";

                 var val = "";

                 var node_id = ""; 

                 for(var i in check){

                     val = check[i];

                     $.each(nodes,function(index,element){

                         node_id = index;

                         p_length = $tree.get_node(node_id).parents.length;

                         // 过滤掉不足3层的节点

                         if(p_length==3){

                             var p_2 = $tree.get_parent(node_id);

                             var p_1 = $tree.get_parent(p_2);

                             // 1.2.3层文本

                             rv = $tree.get_node(p_1).text

                                 + "/" + $tree.get_node(p_2).text

                                 + "/" + $tree.get_node(node_id).text;

                             // 过滤掉不满足条件的文本

                             if(rv==val){

                                 //console.log(rv);

                                 // TODO 以下操作能选上，但是却无法将父节点半选

                                 //$tree.get_node(node_id).state.selected=true;

                                 // 调用check_node方法勾选满足条件的文本

                                 $("#jstree2").jstree("check_node",node_id);

                             }

                         }

                     });

                 }

             });

下面是两种实现的效果图：

四丶关于异步

后续补充

五丶关于添加菜单操作

后续补充

本文代码量太少，工作性质约束，没办法把代码搬迁过来，如有疑问，欢迎评论交流。

巴特西

【JSTREE】复选框默认选中【总结】

最新文章

热门文章

巴特西

【JSTREE】 复选框默认选中【总结】

最新文章

热门文章

【JSTREE】复选框默认选中【总结】