jquery 树插件

来源：互联网发布：db2 oracle sqlserver 编辑：程序博客网时间：2024/06/01 16:47

最近有点时间，对其进行了更新，修改了一些BUG，可到http://download.csdn.net/source/1788620这里自行下载

现在后台返回数据格式只解析JSON格式，其他的格式若有空的话再增加。

前段时间，由于朋友需要，就用jquery帮他写了个树（异步的）插件。

index.jsp--- jquery库请自行引入

配置项说明： url 用来解析树节点的页面，数据格式为json

checkbox 是否有选项框 true 为有 false 为无

dataStoreId 用来存储选中树节点的ID（仅在checkbox为true时候有效）

jquery.cypTree.js 部分代码

......$.extend($.fn,{ cypTree : function(config){ if(!config.url){ //创建普通的树 return $.fn.cypNormalTree.apply(this, arguments); } var self = this; this.addClass("treeview"); //载入节点 load(config,"id",this,self); //存储选中的节点 this.after($("<input />").attr('id',config.dataStoreId).hide()); }, //重新绘制树redraw : function(config){//取得其父节点var $this = this.find("li");//搜索有子节点的父节点//并且对样式进行控制$this.filter(":has(>ul)").addClass("expandable"); ////////////has(ul) not(ul) 无效？疑问????//末节点（有子节点）if($this.filter(":last-child").find("ul").html()!=null){ $this.filter(":last-child").addClass("lastExpandable"); } //末节点（木有子节点） else{ $this.filter(":last-child").addClass("last"); }//$this.filter(":has(>ul)").prepend("<div class=/"hitarea/"></div>").find("div.hitarea").each(function(){var self = this;var classes = "";$.each($(this).parent().attr("class").split(" "), function() {classes += this + "-hitarea ";});$(this).addClass(classes).toggle(function(){//改变展开样式if($(self).hasClass('expandable-hitarea')){ if($(self).hasClass('lastExpandable-hitarea')){ $(self).parent().swapClass("lastExpandable","lastCollapsable"); $(self).swapClass("lastExpandable-hitarea","lastCollapsable-hitarea"); }$(self).parent().swapClass("expandable","collapsable");$(self).swapClass("expandable-hitarea","collapsable-hitarea");//取得对应的子节点var id = $(self).parent().attr("id");var container = $(self).parent().find("ul");if($(container).html().length==0){//loadload(config,id,container,container,false);}else{$(container).show();}}else{ if($(self).hasClass('lastCollapsable-hitarea')){ $(self).parent().swapClass("lastCollapsable","lastExpandable"); $(self).swapClass("lastCollapsable-hitarea","lastExpandable-hitarea"); }$(self).parent().swapClass("collapsable","expandable");$(self).swapClass("collapsable-hitarea","expandable-hitarea");$(self).parent().find("ul").hide();}},function(){ //移除子节点 if($(self).hasClass('expandable-hitarea')){ if($(self).hasClass('lastExpandable-hitarea')){ $(self).parent().swapClass("lastExpandable","lastCollapsable"); $(self).swapClass("lastExpandable-hitarea","lastCollapsable-hitarea"); } $(self).parent().swapClass("expandable","collapsable");$(self).swapClass("expandable-hitarea","collapsable-hitarea");//取得对应的子节点var id = $(self).parent().attr("id");var container = $(self).parent().find("ul");if($(container).html().length==0){//loadload(config,id,container,container,false);}else{$(container).show();} }else{ if($(self).hasClass('lastCollapsable-hitarea')){ $(self).parent().swapClass("lastCollapsable","lastExpandable"); $(self).swapClass("lastCollapsable-hitarea","lastExpandable-hitarea"); } $(self).parent().swapClass("collapsable","expandable");$(self).swapClass("collapsable-hitarea","expandable-hitarea");$(self).parent().find("ul").hide(); }});});$this.filter(":has(ul)").find(">span").hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});}})

更详细的代码，里面有详细的注释

请下载jquery.cypTree.js

提取码：810a91c8

(如失效的话，需要的话，留个email，我会转发给您)

data.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ page import="org.json.*" %><%request.setCharacterEncoding("UTF-8"); //String id = request.getParameter("id");JSONObject jo = new JSONObject();JSONArray _jo_ = new JSONArray();JSONObject o = new JSONObject();if(id.equals("id")){for(int i=0; i <5; i++){JSONObject _jo = new JSONObject();_jo.put("id","biblecat"+i);_jo.put("text","biblecat"+i);_jo.put("expanded",true);_jo.put("classes","important");if(i%2==0){_jo.put("children",true);}else{_jo.put("children",false);}if(i==0){_jo.put("checked",true);}_jo_.put(_jo);}out.println(_jo_); }if(id.equals("biblecat0")){for(int i=6; i <15; i++){JSONObject _jo = new JSONObject();_jo.put("id","biblecat"+i);_jo.put("text","biblecat"+i);_jo.put("expanded",true);_jo.put("classes","important");//if(i%2==0){//_jo.put("children",true);//}else{_jo.put("children",false);if(i==10){_jo.put("checked",true);}//}_jo_.put(_jo);}out.println(_jo_);}if(id.equals("biblecat4")){JSONObject _jo = new JSONObject();_jo.put("id","biblecat20");_jo.put("text","biblecat20");_jo.put("expanded",true);_jo.put("classes","important");//if(i%2==0){//_jo.put("children",true);//}else{_jo.put("children",false);//}_jo_.put(_jo);out.println(_jo_);}%>

测试页面：http://kmart.s155.eatj.com/kmart 服务好像会自动停掉- -!!

有些问题不想自己修复，有兴趣的朋友自行修复

Q1: 有checkbox时，初始时，checkbox均为未选中，按实际需要应该根据后台的数据，来加载checkbox的选中情况

Q2: 由Q1又引发出Q2，如何缓存初始加载选中的节点的数据？

里面有多多不足，请多多指教。谢谢!

源码打包

提取码：dc74a78d