Ztree树形插件使用

心已赠人 2022-01-11 06:47 384阅读 0赞

**Ztree树形插件使用**

**一. ztree.js 的使用**  
　　Ztree 是一个依靠 jQuery 实现的多功能 "树插件". 开源免费的插件  
　　适合项目开发, 尤其是树状菜单, 树状数据的 Web 显示, 权限管理等等

**优点:**  
　　优异的性能, 灵活的配置,, 多种功能的组合

**步骤:**  
1.准备需要的资源拷贝得到项目中  
2.定义 jsp 和 js

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
      2     pageEncoding="UTF-8"%>
      3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      4 <html>
      5 <head>
      6  <base  href="/MvcPro/">
      7     <meta charset="utf-8">
      8     <title>异步上传</title>
      9     
     10     <meta name="viewport" content="width=divce-width,initial-scale=1">
     11     
     12     <script type="text/javascript" src="js/jquery.min.js"></script>
     13     
     14     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
     15     
     16     <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
     17     <link rel="stylesheet" type="text/css" href="webuploader/webuploader.css">
     18     <script src="webuploader/webuploader.js"></script>
     19 </head>
     20 <body>
     21  <div class="container"> 
     22    <div  class="row">
     23      <div  id="div1" class="col-md-8">
     24                <form id="tenantForm" method="post" action="tenant/add"  class="form-horizontal" name="tenantaddform">
     25           
     26           <input name="formbean" value="cn.gzsxt.po.T_Tenant" type="hidden">
     27           <div class="form-group"  id="companynameDiv">
     28               <label class="col-sm-2 control-label">公司名称</label>
     29               <div class="col-md-5">
     30                   <input id="companyname" type="text"  placeholder="公司名称" name="companyname" class="form-control">
     31               </div>
     32               <div class="col-md-4" id="companynameMsg"></div>
     33           </div>
     34           <div class="hr-line-dashed"></div>
     35           <div class="form-group"  id="managernameDiv">
     36               <label class="col-sm-2 control-label">法人姓名</label>
     37               <div class="col-md-5">
     38                   <input   placeholder="法人姓名"  class="form-control" id="managername"  name="managername">
     39               </div>
     40                <div class="col-md-4" id="managernameMsg"></div>
     41           </div>
     42           <div class="hr-line-dashed"></div>
     43           <div class="form-group"  id="phoneDiv">
     44               <label class="col-sm-2 control-label">手机号</label>
     45               <div class="col-md-5">
     46                   <input type="text" placeholder="手机号" name="phone" id="phone" maxlength="11" class="form-control">
     47               </div>
     48               <div class="col-md-4" id="phoneMsg"></div>
     49           </div>
     50         <div class="hr-line-dashed"></div>
     51         <div class="form-group" id="identityDiv">
     52               <label class="col-sm-2 control-label">身份证号</label>
     53               <div class="col-md-5">
     54                   <input type="text" placeholder="身份证号" name="identity"  id="identity"  class="form-control">
     55               </div>
     56               <div class="col-md-4" id="identityMsg"></div>
     57           </div>
     58     <div class="hr-line-dashed"></div>
     59           <div class="form-group">
     60               
     61             <label class="col-sm-2 control-label">身份证正面</label>
     62             <div class="col-sm-10">
     63                   <div id="uploader" class="wu-example">
     64                       
     65                       <div id="thelist1" class="uploader-list">
     66                       </div>
     67                       <div class="btns" id="idcard_id1">
     68                           <div id="picker1">选择文件</div>
     69                           
     70                           <button id="ctlBtn1" type="button" class="btn btn-default">开始上传</button>
     71                       </div>
     72                   </div>
     73                   
     74                   <input type="hidden" id="identitypositive"  name="identitypositive" />
     75               </div>
     76            </div>
     77           <div class="hr-line-dashed"></div>
     78           <div class="form-group">
     79           
     80             <label class="col-sm-2 control-label">身份证反面</label>
     81               <div class="col-sm-10">
     82                   <div id="uploader" class="wu-example">
     83                       
     84                       <div id="thelist2" class="uploader-list"></div>
     85                       <div class="btns"  id="idcard_id2">
     86                           <div id="picker2">选择文件</div>
     87                            <div>
     88                            
     91                               <button id="ctlBtn2" type="button" class="btn btn-default">开始上传</button>
     92                            </div>
     93                            
     94                           <input type="hidden" id="identitynegative"  name="identitynegative" />
     95                       </div>
     96                   </div>
     97               </div>
     98            </div>
     99            <div class="hr-line-dashed"></div>
    100           <div class="form-group">
    101             <label class="col-sm-2 control-label">营业执照照片</label>
    102               <div class="col-sm-10">
    103                 
    104               </div>
    105            </div>
    106 
    107           <div class="form-group">
    108               <div class="col-sm-4 col-sm-offset-2">
    109                   <button class="btn btn-primary" type="submit">保存内容</button>
    110                   <button class="btn btn-white" type="submit">取消</button>
    111               </div>
    112           </div>
    113       </form>
    114     </div>
    115   </div>
    116  </div>
    117  <script>
    118 //身份证正面
    119 jQuery(function() {
    120         var list = $('#thelist1'), // thelist节点中添加文本  身份证正面  div添加
    121             btn = $('#ctlBtn1'), // 文件上传按钮   身份证正面 文件上传按钮
    122             state = 'pending',//当前文件的状态是等待上传状态
    123             uploader;
    124         //初始化
    125         uploader = WebUploader.create({ //对上传的基本要求配置
    126             // 不压缩image
    127             resize: false,
    128             // 文件接收服务端,上传该文件的服务器路径
    129             server: "emp/upload",
    130             // 选择文件的按钮。可选。
    131             //需要上传的文件所在的div
    132             pick: '#picker1' ,
    133            //只允许选择图片文件。
    134             accept: {
    135                 title: 'Images',
    136                 extensions: 'jpg,jpeg,bmp,png,gif',//允许上传的文件的格式
    137                 mimeTypes: 'image/*'
    138             },
    139             //允许上传的文件个数
    140             fileNumLimit:2,
    141             //单个文件最大的上传限制 1M
    142             fileSingleSizeLimit : 1024 * 1024*5 // 5M
    143         });
    144         // 当有文件添加进来的时候触发的函数
    145         uploader.on( 'fileQueued', function(file) {
    146             console.log(file.id)
    147             //file.id表示添加进来的文件的编号（上传组件生成的）
    148             //file.name  表示上传文件的原名称
    149             list.append('<div id="' + file.id + '" class="item">' +
    150                 '<h4 class="info">' + file.name + '</h4>' +
    151                 '<p class="state">等待上传...</p>' +
    152             '</div>' );
    153         });
    154         // 'uploadProgress'：文件上传过程中创建进度条实时显示。这是结合Bootstrap控制的样式
    155         // percentage  文件上传的百分比
    156         //file 上传的文件对象，是上传组件创建的
    157         uploader.on( 'uploadProgress', function( file,percentage){
    158             var li = $( '#'+file.id ),
    159             //在$li 代表的节点查找 是否有 进度条的样式，如果有则$percent的长度大于0 否则等于0
    160             percent=li.find('.progress .progress-bar');
    161             // 避免重复创建
    162             if (!percent.length ) {
    163                 //追加一个进度条样式
    164                 percent = $('<div class="progress progress-striped active">' +
    165                   '<div class="progress-bar" role="progressbar" style="width: 0%">' +
    166                   '</div>' +
    167                 '</div>').appendTo(li).find('.progress-bar');
    168 //              $('<div class="progress progress-striped active">' +
    169 //                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
    170 //                '</div>' +
    171 //              '</div>').appendTo($li);
    172 //              $percent=$li.find('.progress-bar');
    173             }
    174             li.find('p.state').text('上传中');
    175             percent.css( 'width', percentage * 100 + '%' );
    176         });
    177         //'uploadSuccess'：文件上传成功后  触发的事件  触发一个回调函数
    178         //response 表示服务器端返回的数据
    179         //response:该对象封装了服务器端返回的数据，要取得返回的数据需要用到该对象的“_raw”属性
    180         //writer.print(this.getDir() + newFileName);
    181         uploader.on( 'uploadSuccess', function(file,response){
    182             // 上传的图片保存的相对位置（文件上传到服务器端之后保存的路径信息）
    183             var idcard_url = response._raw;
    184              $("#idcard_id1").append("<br><img  src='"+idcard_url+"' style='width: 150px;height: 150px' />");
    185              //将url 添加到  form表单的隐藏域中,方便最后提交信息的时候将文件的名称保存到数据库
    186              $("#identitypositive").val(idcard_url);
    187              $('#'+file.id ).find('p.state').text('已上传');
    188         });
    189         uploader.on( 'uploadError', function( file ) {
    190             $( '#'+file.id ).find('p.state').text('上传出错');
    191         });
    192         uploader.on( 'uploadComplete', function( file ) {
    193             $( '#'+file.id ).find('.progress').fadeOut();
    194         });
    195         uploader.on( 'all', function( type ) {
    196             if ( type === 'startUpload' ) {
    197                 state = 'uploading';
    198             } else if ( type === 'stopUpload' ) {
    199                 state = 'paused';
    200             } else if ( type === 'uploadFinished' ) {
    201                 state = 'done';
    202             }
    203             if ( state === 'uploading' ) {
    204                 btn.text('暂停上传');
    205             } else {
    206                 btn.text('开始上传');
    207             }
    208         });
    209         //出错以后回调的函数
    210         uploader.on("error",function(type){
    211             alert(type);
    212             if(type == "F_EXCEED_SIZE"){
    213                 layer.alert('最大只能上传1M文件', {
    214                       skin: 'layui-layer-molv' //样式类名
    215                 });
    216             }
    217         });
    218         btn.on( 'click', function() {
    219             if (state === 'uploading' ) {
    220                 uploader.stop();
    221             } else {
    222                 uploader.upload();
    223             }
    224         });
    225     });
    226  //身份证反面
    227     jQuery(function() {
    228         var list = $('#thelist2'), // thelist节点中添加文本  身份证正面  div添加
    229             btn = $('#ctlBtn2'), // 文件上传按钮   身份证正面 文件上传按钮
    230             state = 'pending',
    231             uploader;
    232         //初始化
    233         uploader = WebUploader.create({
    234             // 不压缩image
    235             resize: false,
    236             // 文件接收服务端路径。
    237             server: "emp/upload",
    238             // 选择文件的按钮。可选。
    239             // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    240                 //开始上传 按钮的id
    241             pick: '#picker2',
    242                  // 只允许选择图片文件。
    243             accept: {
    244                 title: 'Images',
    245                 extensions: 'jpg,jpeg,bmp,png',
    246                 mimeTypes: 'image/*'
    247             },
    248             //允许上传的文件个数
    249             fileNumLimit:2,
    250             //单个文件最大的上传限制 1M
    251             fileSingleSizeLimit : 5*1024 * 1024 // 1M
    252         });
    253         // 当有文件添加进来的时候
    254         uploader.on( 'fileQueued', function(file) {
    255             list.append( '<div id="' + file.id + '" class="item">' +
    256                 '<h4 class="info">' + file.name + '</h4>' +
    257                 '<p class="state">等待上传...</p>' +
    258             '</div>' );
    259         });
    260         // 文件上传过程中创建进度条实时显示。
    261         uploader.on( 'uploadProgress', function( file, percentage ) {
    262             var li = $( '#'+file.id ),
    263                 percent =li.find('.progress .progress-bar');
    264             // 避免重复创建
    265             if (!percent.length ) {
    266                 percent = $('<div class="progress progress-striped active">' +
    267                   '<div class="progress-bar" role="progressbar" style="width: 0%">' +
    268                   '</div>' +
    269                 '</div>').appendTo(li).find('.progress-bar');
    270             }
    271             li.find('p.state').text('上传中');
    272             percent.css( 'width', percentage * 100 + '%' );
    273         });
    274         //文件上传成功后  触发的事件  触发一个回调函数
    275         uploader.on( 'uploadSuccess', function( file,response) {
    276             // 上传的图片保存的相对位置
    277             var idcard_url = response._raw;
    278              $("#idcard_id2").append("<img  src='"+idcard_url+"' style='width: 150px;height: 150px' />");
    279              //将url 添加到  form表单的隐藏域中
    280              $("#identitynegative").val(idcard_url);
    281             $( '#'+file.id ).find('p.state').text('已上传');
    282         });
    283         uploader.on( 'uploadError', function( file ) {
    284             $( '#'+file.id ).find('p.state').text('上传出错');
    285         });
    286         uploader.on( 'uploading', function( file ) {
    287             $( '#'+file.id ).find('p.state').text('上传中...');
    288         });
    289         uploader.on( 'uploadComplete', function( file ) {
    290             $( '#'+file.id ).find('.progress').fadeOut();
    291         });
    292         uploader.on( 'all', function( type ) {
    293             if ( type === 'startUpload' ) {
    294                 state = 'uploading';
    295             } else if ( type === 'stopUpload' ) {
    296                 state = 'paused';
    297             } else if ( type === 'uploadFinished' ) {
    298                 state = 'done';
    299             }
    300             if ( state === 'uploading' ) {
    301                 btn.text('暂停上传');
    302             } else {
    303                 btn.text('开始上传');
    304             }
    305         });
    306       //出错以后回调的函数
    307         uploader.on("error",function(type){
    308             if(type == "F_EXCEED_SIZE"){
    309                 layer.alert('最大只能上传1M文件', {
    310                       skin: 'layui-layer-molv' //样式类名
    311                 });
    312             }
    313         });
    314         btn.on( 'click', function() {
    315             if ( state === 'uploading' ) {
    316                 uploader.stop();
    317             } else {
    318                 uploader.upload();
    319             }
    320         });
    321     });
    322     </script>
    323 </body>
    324 </html>

3.定义出对应需要使用到的 vo 类

public class Dept implements Serializable {
        private Integer id;
        private String name;
        public Dept(Integer id, String name) {
            this.id = id;
            this.name = name;
        }
        public Integer getId() {
            return id;
        }
        public void setId(Integer id) {
            this.id = id;
        }
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
    }

public class Group {
        private Integer id;// 小组编号
        private String name;// 小组名称
        public Group(Integer id, String name) {
            super();
            this.id = id;
            this.name = name;
        }
        public Integer getId() {
            return id;
        }
        public void setId(Integer id) {
            this.id = id;
        }
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
    }

public class Member {
        private Integer  id;
        private String   name;
        private  String  sex;
        private  String  job;
        private  Double  sal;
        public Member(Integer id, String name, String sex, String job, Double sal) {
            this.id = id;
            this.name = name;
            this.sex = sex;
            this.job = job;
            this.sal = sal;
        }
        public Integer getId() {
            return id;
        }
        public void setId(Integer id) {
            this.id = id;
        }
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public String getSex() {
            return sex;
        }
        public void setSex(String sex) {
            this.sex = sex;
        }
        public String getJob() {
            return job;
        }
        public void setJob(String job) {
            this.job = job;
        }
        public Double getSal() {
            return sal;
        }
        public void setSal(Double sal) {
            this.sal = sal;
        }
    }

4.定义对应的服务端程序

1 @WebServlet("/ztree/*")
     2 public class ZtreeServlet extends HttpServlet {
     3     @Override
     4     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     5         resp.setContentType("text/html;charset=utf-8");
     6         String pathInfo = req.getPathInfo();
     7         if ("/dept".equals(pathInfo)) {
     8             this.getDeptList(req, resp);
     9         } else if ("/group".equals(pathInfo)) {
    10             this.getGroupByDid(req, resp);
    11         } else if("/member".equals(pathInfo)) {
    12             this.getMemberList(req, resp);
    13         }
    14     }
    15     /**
    16      * 取得部门列表信息
    17      */
    18     public void getDeptList(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    19         List<Dept> list = new ArrayList<Dept>();
    20         list.add(new Dept(10, "市场部门"));
    21         list.add(new Dept(20, "研发部门"));
    22         list.add(new Dept(30, "运营部门"));
    23         list.add(new Dept(40, "财务部门"));
    24         resp.getWriter().println(JSON.toJSONString(list));
    25     }
    26     /**
    27      * 根据部门编号取得小组信息
    28      */
    29     public void getGroupByDid(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    30         // 取得部门编号
    31         Integer did = Integer.parseInt(req.getParameter("id"));
    32         List<Group> list = new ArrayList<Group>();
    33         if (did == 10) {
    34             list.add(new Group(1, "市场部第一组"));
    35             list.add(new Group(2, "市场部第二组"));
    36         } else if (did == 20) {
    37             list.add(new Group(3, "研发部A组"));
    38             list.add(new Group(4, "研发部B组"));
    39             list.add(new Group(5, "研发部D组"));
    40         } else if (did == 30) {
    41             list.add(new Group(6, "运营部策划组"));
    42         }
    43         resp.getWriter().println(JSON.toJSONString(list));
    44     }
    45     /**
    46      * 根据小组编号取得成员列表
    47      */
    48     public void getMemberList(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    49         Integer mid = Integer.parseInt(req.getParameter("id"));
    50         List<Member> list=new ArrayList<>();
    51         switch (mid) {
    52         case 1:
    53             list.add(new Member(1001, "张三","男","总裁",5000.00));
    54             list.add(new Member(1002, "李四","女","总裁",5000.00));
    55             break;
    56         case 2:
    57             list.add(new Member(1003, "二蛋狗","男","总裁",5000.00));
    58             list.add(new Member(1004, "熊大","男","总裁",5000.00));
    59             list.add(new Member(1005, "熊二","女","总裁",5000.00));
    60             break;
    61         case 3:
    62             list.add(new Member(1006, "二蛋狗","男","总裁",5000.00));
    63             list.add(new Member(1007, "熊大","女","总裁",5000.00));
    64             break;
    65         case 4:
    66             list.add(new Member(1008, "王五","女","总裁",5000.00));
    67             list.add(new Member(1009, "赵六","女","总裁",5000.00));
    68             break;
    69         case 5:
    70             list.add(new Member(1010, "smith","女","总裁",5000.00));
    71             list.add(new Member(1011, "scott","男","总裁",5000.00));
    72             break;
    73         case 6:
    74             list.add(new Member(1010, "allen","女","总裁",5000.00));
    75             list.add(new Member(1011, "forwd","女","总裁",5000.00));
    76             break;
    77         default:
    78             break;
    79         }
    80         resp.getWriter().println(JSON.toJSONString(list));
    81     }
    82 
    83     @Override
    84     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    85         this.doGet(req, resp);
    86     }
    87 }

转载于:https://www.cnblogs.com/yslf/p/10846646.html