ztree树形插件-多选
原创    echojava    发表于:2017-10-09 17:00:32
  阅读 :96   收藏   编辑
1.下载zTree插件

http://www.treejs.cn/

2.创建项目,导入资源位置如下

3.JSP代码
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ztree</title>
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onCheck: onCheck
        }
     };

    var zNodes =[
        { id:1, pId:0, name:"系统管理", open:true},
        { id:12, pId:1, name:"账户管理", open:true},
        { id:121, pId:12, name:"查询"},
        { id:122, pId:12, name:"新增"},
        { id:2, pId:0, name:"销售管理", checked:false, open:true},
        { id:21, pId:2, name:"订单管理"},
        { id:22, pId:2, name:"报表管理", open:true},
        { id:221, pId:22, name:"查看", checked:false},
        { id:222, pId:22, name:"导出"}
    ];

    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("ztree");
        var selNodes =  zTree.getCheckedNodes(true);
        var ids  = new Array();
        for(var i=0;i< selNodes.length;i++){
            ids.push(selNodes[i].id);
        }
        alert('选中Ids:' + ids);
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#ztree"), setting, zNodes);

    });
</script>
</head>
<body>
    <ul id="ztree" class="ztree"></ul>
</body>
</html>

4.运行效果

评论
条评论