Ztree树形插件使用

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     <!--导入jq的js文件-->
 12     <script type="text/javascript" src="js/jquery.min.js"></script>
 13     <!--导入bootstrap的js-->
 14     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
 15     <!--导入bootstrap的css文件-->
 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           <!-- strut2  spring mvc -->
 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               <!-- div id; inp ty -------->
 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                           <!-- button如果不指定   type 为button 默认是submit -->
 70                           <button id="ctlBtn1" type="button" class="btn btn-default">开始上传</button>
 71                       </div>
 72                   </div>
 73                   <!-- 身份证正面隐藏域表单,value是图片上传成功以后的 地址 -->
 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           <!-- div id; inp ty id na -------->
 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                            <!--
 89                               button如果不指定   type 为button 默认是submit
 90                             <button id="ctlBtn" class="btn btn-default">开始上传</button> -->
 91                               <button id="ctlBtn2" type="button" class="btn btn-default">开始上传</button>
 92                            </div>
 93                            <!-- 身份证反面隐藏域表单,value是图片上传成功以后的 地址 -->
 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                 <!-- div id; inp ty id na -------->
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=" 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=" 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=' 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=" 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=' 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