ztree java 前后台代码(input与ztree结合)

Posted 2020-10-31 不知不觉不痛不痒 多少的时光~

最近在写毕设，用到了ztree，来记录一下。

首先后台先构造一个ZNodes实体类

public class ZNodes implements java.io.Serializable{
    private String id;
    private String pId;
    private String name;
    private Boolean open;
    private Boolean checked;
    private boolean doCheck;
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getpId() {
        return pId;
    }
    public void setpId(String pId) {
        this.pId = pId;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Boolean getOpen() {
        return open;
    }
    public void setOpen(Boolean open) {
        this.open = open;
    }
    public Boolean getChecked() {
        return checked;
    }
    public void setChecked(boolean checked) {
        this.checked = checked;
    }
    public Boolean getDoCheck() {
        return doCheck;
    }
    public void setDoCheck(boolean doCheck) {
        this.doCheck = doCheck;
    }
    
}

 

然后是dao层，我用的框架是spring springmvc hibernate：

/**
     * 树形获取诗人
     * @return
     */
    @SuppressWarnings("unchecked")
    public List<ZNodes> getPoetByTree(){
        String sql="select id,dynasty_id ,name from Poet";
        return jdbcTemplate.query(sql, zNodesDataMapper);
    }
    private RowMapper<ZNodes> zNodesDataMapper = new RowMapper<ZNodes>() {

        @Override
        public ZNodes mapRow(ResultSet rs, int index) throws SQLException {
            // TODO Auto-generated method stub
            ZNodes zNodes=new ZNodes();
            zNodes.setId(rs.getString("id"));
            zNodes.setName(rs.getString("name"));
            zNodes.setpId(rs.getString("dynasty_id"));
            return zNodes;
        }
        
    };

service层就不贴了，controller是这样子的

List<ZNodes> poetTree=poetService.getPoetByTree();
model.put("zNodes", JSONArray.fromObject(zNodes));

后台代码就到此为止了。

接下来是前台

引入js和css文件

<link rel="stylesheet" href="<%=basePath %>zTree/css/zTreeStyle/metro.css" type="text/css">
  <script  type="text/javascript"  src="<%=basePath %>assets/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath %>zTree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="<%=basePath %>zTree/js/jquery.ztree.excheck.js"></script>

因为我这里修改了ztree的样式，所以引入的是另外的css，网上找的

然后是html元素

 <input type="text" class="form-control" id="name"  value="${data.poet.name }" onclick="AutoMatch()">
<div id="menuContent" class="menuContent" show="false" style="display: none; position: absolute;z-index: 999999; left: 114.156px;top: 115px;    width: 209px;">
                                <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 110px;">
                                </ul>
                        </div>

然后是js

//点击某个节点 然后将该节点的名称赋值值文本框
    function zTreeOnClick(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                //获得选中的节点
                 var  nodes=zTree.getCheckedNodes(true);
                //根据id排序
                   v = nodes[0].name;
                    postId = nodes[0].id;
                    zTree.checkNode(nodes, true, false);
                //将选中节点的名称显示在文本框内
//                if (v.length > 0) v = v.substring(0, v.length - 1);
                var name = $("#name");
                name.attr("value", v);
                $(\'#poetId\').val(postId);
                $(\'#dynastyId\').val(nodes[0].getParentNode.id);
                //隐藏zTree
                hideMenu();
                return false;
    }
  //ztree参数
        var setting = {
                check: {
                    enable: true,
                    chkStyle: "radio",
                    radioType: "all",
                    chkboxType: { "Y":"s","N":"s"}
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback :{
//                     onClick : zTreeOnClick,
                    onCheck:zTreeOnClick,
                    beforeCheck : function(treeId, treeNode) {
                        if (treeNode.isParent) {
                            alert("请选择子节点!")
                            return false;
                        }
                    }
}
            };
  //ztree数据初始化
    var zNodes =${zNodes};
    
    
    //显示树
    function showMenu() {
         $("#menuContent").fadeIn("fast");
         $(\'#menuContent\').attr(\'show\',\'true\');
//                 var cityObj = $("#name");
//                 var cityOffset = $("#name").offset();
//                 $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
    }
           
     //隐藏树
    function hideMenu() {
                $("#menuContent").fadeOut("fast");
                $(\'#menuContent\').attr(\'show\',\'false\');
//                 $("body").unbind("mousedown", onBodyDown);
    }
    //还原zTree的初始数据
    function InitialZtree() {
        
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
//                 setting.check.radioType = "all";  
                zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo"); 
                
                var node = zTree_Menu.getNodeByParam("id",$(\'#dynastyId\').val() );  
                var node1 = zTree_Menu.getNodeByParam("id",$(\'#poetId\').val() );  
               // zTree_Menu.selectNode(node1,true);//指定选中ID的节点  
                zTree_Menu.checkNode(node1, true, false);
                zTree_Menu.expandNode(node, true, false);//指定选中ID节点展开  
    } 
    
    ///根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
    function AutoMatch() {
                  InitialZtree();
                  if($(\'#menuContent\').attr(\'show\')==\'false\'){
                      showMenu();
                  }else{
//                       $(\'#menuContent\').css(\'display\',\'none\');
                    hideMenu();
                  }
                  
    }

最后的效果：