jquery 树插件

最新推荐文章于 2023-06-10 08:48:08 发布

eugenepada

最新推荐文章于 2023-06-10 08:48:08 发布

阅读量7.7k

点赞数

文章标签： jquery function import input json class

本文链接：https://blog.csdn.net/eugenepada/article/details/3775716

版权

最近有点时间，对其进行了更新，修改了一些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){ //load load(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){ //load load(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

eugenepada

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
14
评论
jquery 树插件

最近有点时间，对其进行了更新，修改了一些BUG，可到http://download.csdn.net/source/1788620这里自行下载现在后台返回数据格式只解析JSON格式，其他的格式若有空的话再增加。前段时间，由于朋友需要，就用jquery帮他写了个树（异步的）插件。 index.jsp--- jquery库请自行引入 <!-
复制链接

扫一扫