jstree

jstree

 

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script src="static/lib/jstree/dist/jstree.min.js" type="text/javascript"></script>
<div class="col-md-2 col-sm-3">
    <!-- BEGIN PAGE CONTENT-->
    <div class="portlet box" style="background-color:#fff !important;position:relative;">
        <div class="portlet-title" style="color:#333 !important;">
            <div class="caption">
                <i class="fa fa-th-list"></i>
                <span class="caption-subject uppercase">标题</span>
            </div>
        </div>
        <div class="portlet-body" style="min-height: 723px;">
            <div id="tree_1" class="tree-demo">
                <ul>
                    <li id="01" class='<c:if test="${type==30}">jstree-c</c:if>' name="01" data-jstree='{"opened" : true}'><a onclick="person()">人口统计 </a>
                        <ul>
                        <c:forEach var="p" items="${queryP}">  
                             <c:if test="${p.type eq 30}">  
                                <li><a name="${p.id}" onclick='doPSearch(${p.argname})'>${p.text} </a></li> 
                            </c:if> 
                        </c:forEach> 
                        </ul>
                    </li>
                    <li id="02" class='<c:if test="${type==31}">jstree-c</c:if>' data-jstree='{ "opened" : true }'><a onclick="houcount()"> 房屋统计 </a>
                        <ul>
                        <c:forEach var="h" items="${queryH}">
                            <c:if test="${h.type eq 31}">
                            <li><a name="${h.id}"  onclick='javascript:doHSearch(${h.argname});'>${h.text} </a></li> 
                            </c:if> 
                        </c:forEach> 
                        </ul>
                    </li>
                    <li id="03" class='<c:if test="${type==32}">jstree_c</c:if>' data-jstree='{ "opened" : true }'><a onclick="contrabase()"> 矛盾统计 </a>
                        <ul>
                        <c:forEach var="p" items="${queryM}"> 
                               <c:if test="${p.type eq 32}"> 
                            <li><a name="${p.id}" onclick='javascript:doPSearch(${p.argname});'>${p.text} </a></li>  
                            </c:if> 
                        </c:forEach> 
                        </ul>
                    </li>
                </ul> 
            </div>
        </div>
    </div>
</div>
<script src="querytree.js" type="text/javascript"></script>

var type=30;
    function contrabase(){
        type=32;
        $.ajax({
              type: 'POST',
              url: "xxx",
              dataType: 'html',
              success: function(result){
                  $('#rightform').html(result);
              }
        });
    }
 $(function(){ 
     var activenode;
     var a1={
        "自定义查询条件" : {
                "separator_before"    : false,
                "separator_after"    : true,
                "_disabled"            : false, //(this.check("create_node", data.reference, {}, "last")),
                "label"                : "自定义查询条件",
                "action"            : function (data) {
                    if (activenode.id=="01"){
                        $.post('xxx',{type:30},function(str){
                              layer.open({
                                title: '统计',
                                type: 1,//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                                maxmin:true,
                                shade: [0.8, '#444'],
                                area:'900px',
                                content: str //注意，如果str是object，那么需要字符拼接。
                              });
                        });
                    }
                }
            }
        }    
     var a2={
     "删除菜单": {
         "label": "删除菜单",
         "action": function (data) {
         layer.confirm('确定要删除此菜单？删除后不可恢复。', {
                  btn: ['确定','取消'] //按钮
                }, function(){
                   $.ajax({
                 type: 'POST',
                 url: "xxx",
                 data: {id: activenode.a_attr.name},
                 dataType: 'html',
                 success: function (result) {
                     layer.msg('删除成功', {icon: 1});
                     $('#tree').html(result);
                 }
             });
                }, function(){
                  layer.msg('也可以这样');
                })
         },
     }    
}
    
    $('#tree_1').jstree({
         "core": {
             "themes": {
                 "responsive": false
             },
             "check_callback": true
         },
         "types": {
             "default": {
                 "icon": "fa fa-folder icon-state-warning icon-lg"
             },
             "file": {
                 "icon": "fa fa-file icon-state-warning icon-lg"
             }
         },
         "plugins": ["contextmenu","state", "types","search"],
         "contextmenu": {
             "items":function(node) {
                 activenode=node;
                 var menu = {};
                 if(node.parent=="#"){
                     menu = a1;
                 }else{
                     menu = a2;
                 }
                 return menu;
             }
         }
     })/*.bind('loaded.jstree', function(e, data){ 
         $('#tree_1').jstree(true).select_node('03');
          $('#tree_1').jstree('select_node', '03');
          $.jstree.reference('#tree_1').select_node('03');
        });  */
     /*$('#tree_1').on("changed.jstree", function (e, data) {
          console.log(data.selected);
        });*/
     var a=$("#pagetype").val();
        if(a==30){
            $('#tree_1').jstree(true).select_node('01');
        }
        if(a==31){
            $('#tree_1').jstree(true).select_node('02');
        }
        if(a==32){
            $('#tree_1').jstree(true).select_node('03');
        }
  });

https://www.jstree.com/