备忘录: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