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 }