JQuery zTree v2.6
基本用法实例
初始化zTree:
var zTree1;
var setting;
var zNodes =[];
function refreshTree(asyncUrl) {
$("#getUrl").html("");
$("#onAsyncSuccessNode").html("<br/>");
$("#onAsyncErrorNode").html("<br/>");
setting = {
checkable: true,
async: true,
//asyncUrl: "/Gw_sptrainTree_search.do?id=50", //获取节点数据的URL地址
asyncUrl: getAsyncUrl, //获取节点数据的URL地址
asyncParam: ["name", "id", "group", "trainunit"], //获取节点数据时,必须的数据名称,例如:id、name
asyncParamOther: ["sptrainID","50"], //其它参数 ( key, value 键值对格式)
callback:{
beforeAsync: zTreeBeforeAsync,
asyncSuccess: zTreeOnAsyncSuccess,
asyncError: zTreeOnAsyncError
}
};
获取动态Url的方法:
function getAsyncUrl(treeNode){
var specialtyNum = document.getElementById("id").value;
var positionNum = document.getElementById("positionNum").value;
var url = "";
if(treeNode==null){
url = "/Gw_sptrainTree_search.do?id=50&specialtyNum="+specialtyNum+"&positionNum="+positionNum+"";
}else{
url = "/Gw_sptrainTree_search.do?id="+treeNode.id+"&specialtyNum="+specialtyNum+"&positionNum="+positionNum+"";
}
return url;
}
zTree1 = $("#treeDemo").zTree(setting, zNodes);
}
Action:
package com.company.erp.train.gw_sptrain.action;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;
import java.util.TreeMap;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import com.company.erp.common.gw_sptrain.databean.Gw_sptrainDO;
import com.company.erp.common.gw_trainunit.databean.Gw_trainunitDO;
import com.company.erp.common.gw_tugroup.databean.Gw_tugroupDO;
import com.company.util.Common;
import com.gsf.arch.BaseAction;
import com.gsf.tool.exception.BaseException;
public class Gw_sptrainTree_searchAction extends BaseAction{
@Override
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String id = request.getParameter("id");
if (id != null && !id.equals("")) {
response.setCharacterEncoding("gb2312");
response.setContentType("text/xml charset=gb2312");
PrintWriter out = response.getWriter();
searchTopTugroup(request, id, out);
out.flush();
return null;
} else {
return (mapping.findForward("success"));
}
}
public void searchTopTugroup(HttpServletRequest request, String id,
PrintWriter out) throws BaseException {
Long parent_id = Long.parseLong(id);
// 构造数据begin
TreeMap<Long, Long> all_map = null;
TreeMap<Long, Long> select_map = null;
// 专业、岗位
//获取页面hidden的专业工种
String specialtyCode = request.getParameter("specialtyNum");
String positionCode = request.getParameter("positionNum");
if(specialtyCode==null || positionCode==null || specialtyCode.equals("") ||positionCode.equals("")){
}else{
// 根据培训单元
String cacheName = "Gw_sptrain";
String className = Gw_sptrainDO.class.getName();
ArrayList gw_sptrain_list = Common.parseDBCache(cacheName, className);
// 进行排序 以trainunit_id排列 培训单元显示的先后顺序 treemap排序
TreeMap<Long, Gw_sptrainDO> gw_sptrain_Select_map = new TreeMap<Long, Gw_sptrainDO>();
for (int i = 0; i < gw_sptrain_list.size(); i++) {
Gw_sptrainDO gw_sptrainDO = (Gw_sptrainDO) gw_sptrain_list.get(i);
if (gw_sptrainDO.getSpecialtyNum().equals(Long.valueOf(specialtyCode))
&& gw_sptrainDO.getPositionNum().equals(Long.valueOf(positionCode))) {
gw_sptrain_Select_map
.put(gw_sptrainDO.getTrainunit_id(), gw_sptrainDO);
}
}
// 将map的数据add到list
ArrayList<Gw_sptrainDO> gw_sptrain_Select_list_filter = new ArrayList<Gw_sptrainDO>();
gw_sptrain_Select_list_filter.addAll(gw_sptrain_Select_map.values());
all_map = searchTugroup(gw_sptrain_list);
select_map = searchTugroup(gw_sptrain_Select_list_filter);
// 构造数据end
// 生成树
String cacheName2 = "Tugroup";
String className2 = Gw_tugroupDO.class.getName();
int sign = 1;
StringBuffer bf = new StringBuffer();
// 最下层的培训单元组:
Set set = all_map.entrySet();
Collection<Long> coll = all_map.values();
Iterator itr = set.iterator();
while (itr.hasNext()) {
Map.Entry entry = (Map.Entry) itr.next();
Long key = (Long) entry.getKey();
Object value = entry.getValue();
// 获得根以下的培训单元组
if (parent_id.equals(((Long) value))) {
Gw_tugroupDO gw_tugroupDO = (Gw_tugroupDO) Common
.parseDBCache_Row(cacheName2, key.toString(),
className2);
// 如果培训单元组被禁用 则不显示 组信息
if (gw_tugroupDO != null
&& "Y".equals(gw_tugroupDO.getIsValid())) {
sign=sign+1;
boolean check = false;
if(select_map.containsKey(key)){
check = true;
}
//action
if(bf.toString().equals("")){
bf.append("[");
}
bf.append("{ name:\"" + gw_tugroupDO.getTrainUnitGroupName() + "\", asyncUrl: getAsyncUrl,open:false, checked:"+check+", isParent:true,id:" + key + ", group:"+key+",trainunit:\"\"},");
}
}
}
if(sign != 1 && !bf.toString().equals("")){
String str = bf.toString();
str = str.substring(0,str.length()-1);
str = str+"]";
out.write(str);
}
StringBuffer bfTrainunit = new StringBuffer();
if (sign == 1) {
// 最下层的单元组的ID
// 根据条件 生成培训单元
String cacheName1 = "Trainunit";
String className1 = Gw_trainunitDO.class.getName();
ArrayList gw_trainunit_list = Common.parseDBCache(cacheName1, className1);
for (int i = 0; i < gw_trainunit_list.size(); i++) {
Gw_trainunitDO gw_trainunitDO = (Gw_trainunitDO) gw_trainunit_list.get(i);
Long trainunit_id = gw_trainunitDO.getTrainunit_id();
// 如果培训单元被禁用 则不显示 单元信息
if (gw_trainunitDO != null
&& "Y".equals(gw_trainunitDO.getIsValid())) {
Long tugroup_id = gw_trainunitDO.getTugroup_id();
if (tugroup_id.equals(parent_id)) {
boolean check = false;
for(int k=0;k<gw_sptrain_Select_list_filter.size();k++){
Gw_sptrainDO gw_sptrainDO = (Gw_sptrainDO) gw_sptrain_Select_list_filter.get(k);
if(trainunit_id.equals(gw_sptrainDO.getTrainunit_id())){
check=true;
break;
}
}
if(bfTrainunit.toString().equals("")){
bfTrainunit.append("[");
}
bfTrainunit.append("{ name:\"" + gw_trainunitDO.getTrainName() + "\",open:false, checked:"+check+",id:" + trainunit_id + ",group:\"\" , trainunit:"+trainunit_id+"},");
}
}
}
}
if(sign == 1 && !bfTrainunit.toString().equals("")){
String str = bfTrainunit.toString();
str = str.substring(0,str.length()-1);
str = str+"]";
out.write(str);
}
}
}
}
下层动态加载目录:
bf.append("{ name:\"" + gw_tugroupDO.getTrainUnitGroupName() + "\", asyncUrl: getAsyncUrl,open:false, checked:"+check+", isParent:true,id:" + key + ", group:"+key+",trainunit:\"\"},");
根目录:
bfTrainunit.append("{ name:\"" + gw_trainunitDO.getTrainName() + "\",open:false, checked:"+check+",id:" + trainunit_id + ",group:\"\" , trainunit:"+trainunit_id+"},");
获取目录树中有改变的节点:
function savezTree(){
//保存目录树
//有改变的节点
var srcNode = zTree1.getChangeCheckedNodes();
//alert(srcNode.length);
var availableData="";
var groupID="";
var trainunitID="";
for( var i=0; i<srcNode.length; i++){
//alert("name:"+srcNode[i].name);
if(srcNode[i].check_False_Full == true && srcNode[i].check_True_Full == true){
availableData=availableData+","+srcNode[i].name;
var group = srcNode[i].group;
var trainunit = srcNode[i].trainunit;
if(typeof(group)!=undefined && group != null && group != ""){
groupID = groupID + group +",";
//alert("group:"+group);
}
if(typeof(trainunit)!=undefined && trainunit != null && trainunit != ""){
trainunitID = trainunitID +","+ trainunit;
//alert("trainunit:"+trainunit);
}
}
//alert("id:"+srcNode[i].id);
//alert("group:"+srcNode[i].group);
//alert("trainunit:"+srcNode[i].trainunit);
}
//alert(availableData);
//alert(trainunitID);
var specialtyNum = document.getElementById("id").value;
var positionNum = document.getElementById("positionNum").value;
//alert(groupID);
//alert(trainunitID);
//updateSptrainWJS(groupID,trainunitID,specialtyNum,positionNum);
if((groupID!=null && groupID!="") || (trainunitID!=null && trainunitID!="")){
UpdateSptrainDWR.updateSptrain(groupID,trainunitID,specialtyNum,positionNum,function(data){
if(data==1){
removeTree();
alert("更新成功!");
}else{
alert("更新失败!");
}
});
}else{
alert("更新成功!");
}
}
可参照附件中zTreedemo和zTreeAPI v2.6.chm
分享到:
相关推荐
这些示例涵盖了zTree的常用功能,如基本展示、多选、异步加载、拖拽排序等,开发者可以通过查看和运行这些示例,快速掌握zTree的使用方法。 总结,JQuery zTree v2.6是一款强大且易用的树形插件,它的API文档和实例...
2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox...
《jQuery-zTree API v2.6详解:打造高效前端树形组件》 在网页开发中,数据的组织和展示方式多种多样,其中树形结构因其层次清晰、逻辑明确的特点,常用于目录管理、组织架构展示等领域。jQuery-zTree是一款基于...
在提供的JQuery zTree v2.6版本中,包含了完整的文档、示例代码和示例数据,帮助开发者更好地理解和使用ZTREE。通过阅读文档和查看示例,可以进一步掌握ZTREE的高级功能,如节点分组、搜索、权限控制等。 总的来说...
在这个"ztree小例子"中,我们将探讨如何使用最新版本的jquery.ztree-2.6.js来创建一个功能完备的zTree实例。 首先,我们需要了解zTree的基本概念。zTree的核心在于将HTML结构转化为具有交互性的树形数据展示,它...
zTree插件之多选下拉菜单实例代码css和js 代码如下:<!–ztree树结构–><link rel=”stylesheet” type=”text/css” href=”assets/ztree/css/zTreeStyle.css”...script src=”assets/ztree/js/jquery.ztree-2.6
首先,我们需要引入 zTree 的 CSS 和 JavaScript 文件,它们分别为 `zTreeStyle.css` 和 `jquery.ztree-2.6.js`。这些文件提供了 zTree 的样式和核心功能。同时,还需要引入 jQuery 库,因为 zTree 是基于 jQuery ...