备忘录：Jstree（含Jquery）

备忘录：Jstree（含Jquery）
这篇备忘录介绍了JStree使用时应注意的问题，实际上很多问题是因为JStree的背景知识（比如Jquery）不清楚而产生，本备忘录指出问题有关的背景知识。

1.         正确调用Jquery

清单 1. 如何正确调用 jQuery 函数

// 不正确

<script language=JavaScript>

   $("div").addClass("a");

</script>

 

//正确

$(document).ready(function(){

   $("div").addClass("a");

 });

 

//或

 

$(document).ready(function(){

   myAddClass();

 });

 

function myAddClass()

{

   $("div").addClass("a");

}
 

也就是所有 jQuery 代码必须在页面上的这个函数中，或在它自己的函数中。如果 jQuery 代码不在一个函数中，则不可将其代码放置在 JavaScript 代码中。

2.         小心内部引用

像JStree会有引用主题包的代码，如果库代码和相应的主题包的文件结构存在问题的话，会不能正确显示控件。

 

如上图，树的库代码和themes文件结构关系必须正确。

所以一个简单的方式，下载到可以使用的演示代码，那么里面的文件，尤其是资源文件和其他的js代码的文件结构最好保持原样。

当然还有一种专业的做法，就是看懂像jquery.tree.js之类的库代码。

 

3.         无限级数（仅与jstree有关）

玩转JSTREE的json可以生成各种有意思的树，比如下面的代码

[

         { data : "A node", children : [ { data : "Only child",state:"closed" }] }    

]

这段代码可以生成无限级数的树，主要原因就是：子节点是关闭的。试试看， state为open和closed的区别!

1.         书写JSON串
{"attributes":{"access":"test","defval":"test","descry":"test","id":"test","indexes":"test","mib":"test","name":"name","oid":"test","status":"test","syntax":"test"},"children":[],"data":{"icon":"","title":"name"}}

比如我们要生成如上的JSON串。即节点名为name，有一大串属性。可以采用下面的方法：
l  为相应的JSON关键字书写JAVAbean，比如JStree 里有attribute,data,和children，写相应的bean。
public class AttributeBean {
    private String id;
    private String name;
    private String oid;
    private String mib;
    private String syntax;
    private String access;
    private String status;
    private String defval;
    private String indexes;
    private String descry;
   
    public String getName() {
       return name;
    }
    public void setName(String name) {
       this.name = name;
    }
    public String getOid() {
       return oid;
    }
    public void setOid(String oid) {
       this.oid = oid;
    }
    public String getMib() {
       return mib;
    }
    public void setMib(String mib) {
       this.mib = mib;
    }
    public String getSyntax() {
       return syntax;
    }
    public void setSyntax(String syntax) {
       this.syntax = syntax;
    }
    public String getAccess() {
       return access;
    }
    public void setAccess(String access) {
       this.access = access;
    }
    public String getStatus() {
       return status;
    }
    public void setStatus(String status) {
       this.status = status;
    }
    public String getDefval() {
       return defval;
    }
    public void setDefval(String defval) {
       this.defval = defval;
    }
    public String getIndexes() {
       return indexes;
    }
    public void setIndexes(String indexes) {
       this.indexes = indexes;
    }
    public String getDescry() {
       return descry;
    }
    public void setDescry(String descry) {
       this.descry = descry;
    }
    public String getId() {
       return id;
    }
    public void setId(String id) {
       this.id = id;
    }
}
AttributeBean中的ID是JSTREE里面定义的，其他都是我们自定义的。
public class DataBean {
    private String title;
    private String icon;
   
    public String getTitle() {
       return title;
    }
    public void setTitle(String title) {
       this.title = title;
    }
    public String getIcon() {
       return icon;
    }
    public void setIcon(String icon) {
       this.icon = icon;
    }
}
DataBean里面的属性都是JStree定义的。
public class NodBean {
    private AttributeBean attributes;
    private DataBean data;
    private NodBean[] children;
    public AttributeBean getAttributes() {
       return attributes;
    }
    public void setAttributes(AttributeBean attributes) {
       this.attributes = attributes;
    }
    public DataBean getData() {
       return data;
    }
    public void setData(DataBean data) {
       this.data = data;
    }
    public NodBean[] getChildren() {
       return children;
    }
    public void setChildren(NodBean[] children) {
       this.children = children;
    }
 

}
NodBean的属性是由JSTREE定义的。
三个BEAN的属性层次关系，尤其是NodBean的，是由JSTREE定义的，必须严格遵循。
做好了上面的准备，要生成一个JSTREE要的JSON就可以考虑使用JSON-lib了！
JSONObject.fromObject(root)，是要由JavaBean直接生成Json的方式，之后只要对其使用toString()方法就可以了！
要生成一个节点代码如下：
import net.sf.json.JSONObject;

……（还有对NodBean、DataBean、AttributeBean的引入）
/**
 * 测试Json库的代码段
 * @author ruyun
 *
 */
public class TestJson {
 

    /**
     * @param args
     */
    public static void main(String[] args) {
       NodBean root = new NodBean();
       AttributeBean rattr = new AttributeBean();
       DataBean rdata = new DataBean();
       rattr.setAccess("test");
       rattr.setDefval("test");
       rattr.setDescry("test");
       rattr.setIndexes("test");
       rattr.setMib("test");
       rattr.setName("name");
       rattr.setOid("test");
       rattr.setStatus("test");
       rattr.setSyntax("test");
       rattr.setId("test");
       rdata.setTitle("name");
       root.setAttributes(rattr);
       root.setData(rdata);
      
       JSONObject js = JSONObject.fromObject(root);
       System.out.println(js.toString());
       String str = js.toString().replace(",\"children\":[]", "");
       System.err.println(str);
    }
正如上面的一样，如果不想要有太多的“空孩子”JSON串，可以滤掉，即把,”children”:[]滤掉!

结果：
{"attributes":{"access":"test","defval":"test","descry":"test","id":"test","indexes":"test","mib":"test","name":"name","oid":"test","status":"test","syntax":"test"},"children":[],"data":{"icon":"","title":"name"}}
{"attributes":{"access":"test","defval":"test","descry":"test","id":"test","indexes":"test","mib":"test","name":"name","oid":"test","status":"test","syntax":"test"},"data":{"icon":"","title":"name"}}

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ruyun126/archive/2010/05/14/5589405.aspx