备忘录：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"}}

 

参考：

Ø  使用 jQuery，第 1 部分: 将桌面应用程序引入浏览器