zTree和SweetAlert插件初探
1.zTree插件简介
zTree是一个依靠 jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、权限管理等等。
官网地址：http://www.treejs.cn/v3/main.php#_zTreeInfo
2.zTree资源管理实例
⑴ 引入zTree的js和css文件：
<script type="text/javascript" src="/assets/scripts/zTree_v3/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="/assets/scripts/zTree_v3/js/jquery.ztree.core-3.5.js"></script> <script type="text/javascript" src="/assets/scripts/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script> <link rel="stylesheet" href="/assets/scripts/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" />
⑵ zTree的页面元素：通过读取隐藏的Input输入框中传递的JSON字符串初始化zTree树。
<input type="hidden" id="zTreeNodes" value="{{_DATA_.ztreeNodes}}" /> <span class="resourceSpan" >父资源<label style="color:#ff0000;">*</label>：</span> <div id="parentResource" class="ztree"></div>
⑶ js简单初始化zTree树：
var zNodesStr = document.getElementById("zTreeNodes").value; var zNodes = JSON.parse(zNodesStr); $.fn.zTree.init($("#parentResource"), setting, zNodes);
⑷ 给Ztree赋初值的java代码:
public UserResourceDTO initNewResources() { List<UsersResource> resourceList = new ArrayList<UsersResource>(); resourceList = usersResourceService.getAllResource(); JSONArray jsonNodes = new JSONArray(); for (UsersResource tempRes : resourceList) { JSONObject jsonObject = new JSONObject(); jsonObject.put("id", tempRes.getId()); jsonObject.put("pId", tempRes.getParentId()); jsonObject.put("name", tempRes.getName()); if (tempRes.getParentId() == 0) { jsonObject.put("checked", true); jsonObject.put("open", true); } else { jsonObject.put("open", false); } jsonNodes.add(jsonObject); } UserResourceDTO userResourceDTO = new UserResourceDTO(); userResourceDTO.setZtreeNodes(jsonNodes.toString()); return userResourceDTO; }
⑸ UserResourceDTO代码:
package com.ouc.mkhl.platform.usersAuth.dto; import java.io.Serializable; //RBAC权限管理-资源信息 public class UserResourceDTO implements Serializable { private static final long serialVersionUID = -889200123123123L; private Integer id; //资源Id private String name; //资源名称 private String description; //资源描述 private String url; //链接地址 private String type; //资源类型：0-URL资源，1-组件资源 private String status; //状态：0-隐藏，1-展示 private String code; //标识码 private String configuration; //配置项 private String moduleName; //模块名称 private Integer orderIndex; //排序号 private Integer parentId; //父资源 private String ztreeNodes; // 关联资源结点 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 == null ? null : name.trim(); } public String getDescription() { return description; } public void setDescription(String description) { this.description = description == null ? null : description.trim(); } public String getUrl() { return url; } public void setUrl(String url) { this.url = url == null ? null : url.trim(); } public String getType() { return type; } public void setType(String type) { this.type = type; } public String getStatus() { return status; } public void setStatus(String status) { this.status = status; } public String getCode() { return code; } public void setCode(String code) { this.code = code == null ? null : code.trim(); } public String getConfiguration() { return configuration; } public void setConfiguration(String configuration) { this.configuration = configuration == null ? null : configuration .trim(); } public String getModuleName() { return moduleName; } public void setModuleName(String moduleName) { this.moduleName = moduleName == null ? null : moduleName.trim(); } public Integer getOrderIndex() { return orderIndex; } public void setOrderIndex(Integer orderIndex) { this.orderIndex = orderIndex; } public Integer getParentId() { return parentId; } public void setParentId(Integer parentId) { this.parentId = parentId; } public void setZtreeNodes(String ztreeNodes) { this.ztreeNodes = ztreeNodes == null ? null : ztreeNodes.trim(); } public String getZtreeNodes() { return ztreeNodes; } }
⑹ 示例页面resourceInfo.hbs代码:
{{#component "newResource js-comp"}} <script type="text/javascript" src="/assets/scripts/zTree_v3/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="/assets/scripts/zTree_v3/js/jquery.ztree.core-3.5.js"></script> <script type="text/javascript" src="/assets/scripts/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script> <script type="text/javascript" src="/assets/scripts/sweet-alert.min.js"></script> <script type="text/javascript" src="/assets/scripts/cookies.js"></script> <link rel="stylesheet" href="/assets/scripts/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="/assets/styles/sweet-alert.css"/> <style> #resourceInfo { margin: 10px 100px 10px 120px; border: 1px solid #617775; background: #f5f5f5; width:1100px; height:660px; } #parentResource { margin: 10px auto; border: 1px solid #617775; background: #f0f6e4; width:1080px; height:160px; overflow-y:scroll; overflow-x:auto; } .resourceSpan { margin: 0 5px 0 20px; } </style> <div id="resourceInfo"> <input type="hidden" id="zTreeNodes" value="{{_DATA_.ztreeNodes}}" /> <span class="resourceSpan" style="color:#0000ff; font-weight:bold;">新建资源</span> <hr/> <span class="resourceSpan" >资源名称<label style="color:#ff0000;">*</label>：</span> <input type="text" id="resourceName" style="width: 875px" /> <hr/> <span class="resourceSpan" >父资源<label style="color:#ff0000;">*</label>：</span> <div id="parentResource" class="ztree"></div> <hr/> <span class="resourceSpan" >所在模块<label style="color:#ff0000;">*</label>：</span> <input type="text" id="resourceModule" style="width: 880px" /> <hr/> <span class="resourceSpan" >访问链接<label style="color:#ff0000;">*</label>：</span> <input type="text" id="resourceURL" style="width: 880px" /> <hr/> <span class="resourceSpan" >资源类型<label style="color:#ff0000;">*</label>：</span> <select id="resourceType" style="width: 400px" > <option>URL资源</option> <option>组件资源</option> </select> <hr/> <span class="resourceSpan" >桌面显示<label style="color:#ff0000;">*</label>：</span> <select id="resourceStatus" style="width: 400px" > <option>是</option> <option>否</option> </select> <hr/> <span class="resourceSpan" >标识码<label style="color:#ff0000;">*</label>：</span> <input type="text" id="appCode" style="width: 80px" value="S00988" readonly="readonly"/> <input type="text" id="resourceCode" style="width: 200px" /> <label> 为每个资源定义唯一的code(身份证)，格式为："Sxxxxx_xxxxx",若无S码，则只与填写第二空格</label> <hr/> <span class="resourceSpan" >序号<label style="color:#ff0000;">*</label>：</span> <input type="text" id="orderIndex" style="width: 480px" /> <label> 排序号越小的资源显示越靠前</label> <hr/> <span class="resourceSpan">配置项：</span> <input type="text" id="configuration" style="width: 470px" /> <hr/> <span class="resourceSpan">描述：</span> <input type="text" id="description" style="width: 490px" /> <hr/> <span style="margin: 0 50px;"></span> <input id="newResource" size="12" type="button" value="创建" /> <input id="reset" size="12" type="button" value="重置" /> <hr/> </div> <SCRIPT type="text/javascript"> var setting = { check: { enable: true, chkStyle: "radio", radioType: "all" }, data: { simpleData: { enable: true } } }; $(document).ready(function(){ var zNodesStr = document.getElementById("zTreeNodes").value; var zNodes = JSON.parse(zNodesStr); $.fn.zTree.init($("#parentResource"), setting, zNodes); var treeObj = $.fn.zTree.getZTreeObj("parentResource"); $("#newResource").click(function() { var nodes = treeObj.getCheckedNodes(true); var parentId = nodes[0].id; //资源父id var name = document.getElementById("resourceName").value; //资源名称 if (name == "") { sweetAlert("资源名称不能为空！"); return; } var moduleName = document.getElementById("resourceModule").value; //模块名称 if (moduleName == "") { sweetAlert("模块名称不能为空！"); return; } var resourceURL = document.getElementById("resourceURL").value; //访问链接 if (resourceURL == "") { sweetAlert("访问链接不能为空！"); return; } var resourceTypeStr = document.getElementById("resourceType").value; //资源类型 var resourceType = 0; if (resourceTypeStr == "组件资源") { resourceType = 1; } else { resourceType = 0; } var resourceStatusStr = document.getElementById("resourceStatus").value; //桌面显示 var resourceStatus = 1; if (resourceStatusStr == "否") { resourceStatus = 0; } else { resourceStatus = 1; } var resourceCodeStr = document.getElementById("resourceCode").value; var resourceCode = ""; if (resourceCodeStr == "") { sweetAlert("标识码不能为空！"); return; } else { var codeRegex = /^[a-zA-Z0-9_]{1,}$/; if(!codeRegex.exec(resourceCodeStr)){ sweetAlert("警告", "标识码格式非法！只能是字母或字母和数字的组合!", "warning"); return; } resourceCode = "S00988_"+ resourceCodeStr; } var orderIndexStr = document.getElementById("orderIndex").value; var orderIndex = 0; if (orderIndexStr == "") { sweetAlert("排序号不能为空！"); return; } else { var indexRegex = /^[0-9]+$/; if(!indexRegex.exec(orderIndexStr)){ sweetAlert("警告", "排序号格式非法！只能是非负整数!", "warning"); return; }else{ orderIndex = Number(orderIndexStr); } } var configuration = document.getElementById("configuration").value; //配置项 var description = document.getElementById("description").value; //资源描述 $.ajax({ type: "GET", url: "../api/createResource", dataType : "json", data:{ name: name, description: description, url: resourceURL, type: resourceType, status: resourceStatus, code: resourceCode, configuration: configuration, moduleName: moduleName, orderIndex: orderIndex, parentId: parentId }, success: function () { window.location.href = "resourcesList"; }, error: function (e) { sweetAlert("创建资源失败：", e, "error"); } }); }); $("#reset").click(function() { treeObj.checkAllNodes(false); $("#resourceName").attr("value",''); //清空 $("#resourceModule").attr("value",''); $("#resourceURL").attr("value",''); $("#resourceType").attr("value",'URL资源'); $("#resourceStatus").attr("value",'是'); $("#resourceCode").attr("value",''); $("#orderIndex").attr("value",''); $("#configuration").attr("value",''); $("#description").attr("value",''); }); }); </SCRIPT> {{/component}}
3.zTree资源管理实例效果图
4.SweetAlert插件简介
SweetAlert是一款不需要jQuery支持的原生js提示框，风格类似bootstrap。它的提示框不仅美丽动人，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。
官网地址：http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201410/jiaoben2855/
SweetAlert相关API：
| 参数 | 描述 |
| title | 提示框标题 |
| text | 提示内容 |
| type | 提示类型，有：success（成功），error（错误），warning（警告），input（输入）。 |
| showCancelButton | 是否显示“取消”按钮。 |
| animation | 提示框弹出时的动画效果，如slide-from-top（从顶部滑下）等 |
| html | 是否支持html内容。 |
| timer | 设置自动关闭提示框时间（毫秒）。 |
| showConfirmButton | 是否显示确定按钮。 |
| confirmButtonText | 定义确定按钮文本内容。 |
| imageUrl | 定义弹出框中的图片地址。 |
5.SweetAlert警示框实例
⑴ 引入SweetAlert的js和css文件：
<script type="text/javascript" src="/assets/scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="/assets/scripts/sweet-alert.min.js"></script> <link rel="stylesheet" type="text/css" href="/assets/styles/sweet-alert.css"/>
⑵ js调用SweetAlert插件：
swal({ title:"提示", text:"您确定要删除此角色吗？", type:"warning", showCancelButton:"true", showConfirmButton:"true", confirmButtonText:"确定", cancelButtonText:"取消", animation:"slide-from-top" }, function() { $.ajax({ type : "GET", url : "../api/deleteRole?id=1" }).done(function(msg) { if(msg=="success"){ swal("操作成功!", "已成功删除数据！", "success"); }else{ swal("操作失败!", "该角色已关联到组，请先将其移除组！", "warning"); } window.location.href = "roleList?roleType=1"; }).error(function() { swal("OMG", "删除操作失败了!", "error"); }); });
