zTree插件生成下拉复选树（可选择点击）

之前看了很多但都不是很详细，这次贴上的代码，希望新手能少走弯路，与君共勉

参考文献：

http://www.php.cn/js-tutorial-352583.html

https://www.cnblogs.com/julinhuitianxia/p/6817927.html

注意ztree接收的json格式一定要是 id pId name 一模一样否则报错undfind


SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for menu
-- ----------------------------
DROP TABLE IF EXISTS `menu`;
CREATE TABLE `menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pid` int(11) DEFAULT NULL,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=19 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of menu
-- ----------------------------
INSERT INTO `menu` VALUES ('1', '0', '人力资源管理');
INSERT INTO `menu` VALUES ('2', '1', '部门管理');
INSERT INTO `menu` VALUES ('3', '1', '员工管理');
INSERT INTO `menu` VALUES ('4', '1', '福利管理');
INSERT INTO `menu` VALUES ('5', '1', '考勤管理');
INSERT INTO `menu` VALUES ('6', '2', '部门列表');
INSERT INTO `menu` VALUES ('7', '2', '部门添加');
INSERT INTO `menu` VALUES ('8', '2', '部门审核');
INSERT INTO `menu` VALUES ('9', '3', '员工列表');
INSERT INTO `menu` VALUES ('10', '3', '员工添加');
INSERT INTO `menu` VALUES ('11', '3', '员工审核');
INSERT INTO `menu` VALUES ('12', '4', '福利列表');
INSERT INTO `menu` VALUES ('13', '4', '福利添加');
INSERT INTO `menu` VALUES ('14', '5', '今日打卡');
INSERT INTO `menu` VALUES ('15', '5', '打卡列表');
INSERT INTO `menu` VALUES ('16', '5', '请假列表');
INSERT INTO `menu` VALUES ('17', '5', '请假申请');
INSERT INTO `menu` VALUES ('18', '5', '请假审核');



<head>
    <title>zTree点击文字勾选复选框</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../static/css/demo.css" type="text/css">
    <link rel="stylesheet" href="../static/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery.ztree.all.js"></script>
    <script type="text/javascript">
        
        var datas;
        $(document).ready(function(){
            //初始化树
            zTree = $.fn.zTree.init($("#treeSelect"), setting, datas);    
        });
        //设置
        var setting = {
            check: {
                enable: true,
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                 onClick: function (e, treeId, treeNode, clickFlag) { 
                     zTree.checkNode(treeNode, !treeNode.checked, true); 
                 } 
            },
        };
        
        $.ajax({
            url : "http://localhost:8080/User/selectTree",（你自己的url）
            type : "post",
            dataType : "json",
            async: false,
            success : function(data) {
                // 定义拼接字符
                datas = data;
                console.log(datas)
            },
            error : function(msg) {
                alert("ajax连接异常：" + msg);
            }
        });    
    </script>
</head>
 
<body>
    <div style="vertical-align: middle; text-align: center;">
        <div>
            <ul id="treeSelect" class="ztree"></ul>
        </div>
    </div>
</body>

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

后台

import net.sf.json.JSONArray;（引入的net.sf.json）

/*
     * 查询树信息
     */
    @RequestMapping(value = "/selectTree")
    @ResponseBody
    public void selectTree(HttpServletResponse resp) throws IOException {
        List<Trees> tree = userservice.selectTree();
        JSONArray jsonArray = JSONArray.fromObject(tree);
        /* 设置编码，防止出现乱码问题 */
        resp.setContentType("text/text;charset=utf-8");
        resp.setCharacterEncoding("utf-8");
        // 得到输出流
        PrintWriter respWritter = resp.getWriter();
        /* 将JSON格式的对象toString()后发送 */
        respWritter.append(jsonArray.toString());
    }

完成后：

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

后续：

选择相应的勾选将节点信息给后台

<head>
    <title>zTree点击文字勾选复选框</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../static/css/demo.css" type="text/css">
    <link rel="stylesheet" href="../static/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery.ztree.all.js"></script>
    
</head>
 
<body>
    <div style="vertical-align: middle; text-align: center;">
        <div>
            <ul id="treeSelect" class="ztree"></ul>
        </div>
        <div>
            <button id="a" type="button" class="btn btn-w-m btn-primary" onclick="fff();">提交</button>
        </div>
    </div>
</body>
<script type="text/javascript">
        
        var datas;

        $(document).ready(function(){
            //初始化树
            zTree = $.fn.zTree.init($("#treeSelect"), setting, datas);    
        });
        //设置
            

        //创建一个对象
        function createObj(id,name,pId){
            this.id = id;
            this.name = name;
            this.pId = pId;
        }
        createObj.prototype.sayId = function(){
            alert(this.id);
        }
        createObj.prototype.sayName = function(){
            alert(this.name);
        }
        createObj.prototype.saypId = function(){
            alert(this.pId);
        }
        
        var setting = {
            check: {
                enable: true,
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: function (e, treeId, treeNode, clickFlag) { 
                     zTree.checkNode(treeNode, !treeNode.checked, true); 
                     
                 } 
            },
        };
        
        $.ajax({
            url : "http://localhost:8080/User/selectTree",
            type : "post",
            dataType : "json",
            async: false,
            success : function(data) {
                // 定义拼接字符
                datas = data;
                console.log(datas)
            },
            error : function(msg) {
                alert("ajax连接异常：" + msg);
            }
        });    
        

//确定按钮触发事件

        function fff() {
            var treeObj=$.fn.zTree.getZTreeObj("treeSelect");
            nodes=treeObj.getCheckedNodes(true);
               var ss=new Array();//创建list集合
            //var list= [];
            v="";
             for(var i=0;i<nodes.length;i++){
                 var person = new createObj(nodes[i].id,nodes[i].name,nodes[i].pId);
                 ss[i]=person;
                 //v+="name:"+ nodes[i].name + ",";
            //alert(nodes[i].id); //获取选中节点的值
            //v+="id:"+ nodes[i].id + ",";
            //v+="PId:"+ nodes[i].pId + ",";
            //console.log(nodes);                         
             }
             console.log(ss);
        }
    </script>

实现：

控制台打印：

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

2019.3.28

继续往下写，将数据打包成json发送到后台并且控制台显示数据

使用的

参考文献

http://www.cnblogs.com/youring2/archive/2013/03/01/2938850.html

修改前台方法fff

function fff() {
            var treeObj=$.fn.zTree.getZTreeObj("treeSelect");
            nodes=treeObj.getCheckedNodes(true);
               var ss=new Array();//创建list集合
            //var list= [];
            v="";
             for(var i=0;i<nodes.length;i++){
                 var person = new createObj(nodes[i].id,nodes[i].name,nodes[i].pId);
                 ss[i]=person;
                  
             }
             //打包成json格式数据
             var appop = JSON.stringify(ss);
             console.log(appop);
             //这句话很重要，不加的话前台json格式不识别     

             var jsonStrings = encodeURIComponent(appop);
             console.log(jsonStrings);
             $.ajax({
                url : "http://localhost:8080/User/insertPermissions?jsonStrings="+jsonStrings,
                type : "post",
                dataType : "json",
                async: false,
                contentType:'application/x-www-form-urlencoded;charset=UTF-8',
                success : function(data) {
                    console.log(data);
                },
                error : function(msg) {
                    alert("ajax连接异常：" + msg);
                }
            });    
        }

后台：

/*
     * 展示提交的树节点信息
     */
    @RequestMapping(value = "/insertPermissions",method=RequestMethod.POST,produces="application/json;charset=UTF-8")
    @ResponseBody
    public Map<String, String> insertPermissions(@RequestParam(value="jsonStrings")String jsonStrings, HttpServletRequest request) throws IOException {
        URLDecoder.decode(jsonStrings,"UTF-8");
        System.out.println(jsonStrings);
        Map<String, String> map = new HashMap<String, String>();
        map.put("result","true");
        return map;
    }

效果：

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

继续修改我的代码：

实现后台的json格式转换成普通的arrayList<实体类> 的集合，所有数据通过循环可以取出来

json格式的转换：参考文献

https://blog.csdn.net/liangmaoxuan/article/details/80642880

/*
     * 展示提交的树节点信息
     */
    @RequestMapping(value = "/insertPermissions",method=RequestMethod.POST,produces="application/json;charset=UTF-8")
    @ResponseBody
    public Map<String, String> insertPermissions(@RequestParam(value="jsonStrings")String jsonStrings, HttpServletRequest request) throws IOException {
        URLDecoder.decode(jsonStrings,"UTF-8");
        //System.out.println(jsonStrings);
        //tress是相对应的实体类

        List<Trees> trees =new ArrayList<Trees>();
        JSONArray jsonArray = JSONArray.fromObject(jsonStrings);
        for (int i = 0; i < jsonArray.size(); i++ )
        {
            JSONObject jsonObject = jsonArray.getJSONObject(i);
            Trees trees2 = (Trees)JSONObject.toBean(jsonObject,Trees.class);
            trees.add(trees2);
        }
        System.out.println(trees);
        for (Trees tr : trees) {
            System.out.println(tr.getName());
        }
        Map<String, String> map = new HashMap<String, String>();
        map.put("result","true");
        return map;
    }

效果图：后台取出了所有选中的节点名：

zTree插件生成下拉复选树（可选择点击）

猜你喜欢