jquery easyui树的简答构造+动态生成js全局变量

jquery easyui树的简答构造：

JSP页面

[html]  view plain copy

1. 组织机构： <input id="p_organId" name="p_organId"  style="width: 160px;height: 28px;">    

[javascript]  view plain copy

1. function loadOrgan(){  
2.     organ_combotree = $("#p_organId").combotree({  
3.         url:'${ctxFront}/cust/tree',  
4.         multiple:false,//是否可多选  
5.         editable:false,//是否可编辑  
6.         required:false  
7.     });  
8. }  

后台代码：

[java]  view plain copy

1. @SuppressWarnings("serial")  
2. public class TreeNode implements Serializable {  
3.   
4.     /** 
5.      * 静态变量 展开节点 
6.      */  
7.     public static final String STATE_OPEN = "open";  
8.     /** 
9.      * 静态变量 关闭节点 
10.      */  
11.     public static final String STATE_CLOASED = "closed";  
12.   
13.     /** 
14.      * 节点id 
15.      */  
16.     private String id;  
17.     /** 
18.      * 父级节点id （用于zTree简单数据模型） 
19.      */  
20.     private String pId;  
21.     /** 
22.      * 树节点名称 
23.      */  
24.     private String text;  
25.     /** 
26.      * 前面的小图标样式 
27.      */  
28.     private String iconCls = "";  
29.     /** 
30.      * 是否勾选状态（默认：否false） 
31.      */  
32.     private Boolean checked = false;  
33.     /** 
34.      * 自定义属性 
35.      */  
36.     private Map<String, Object> attributes = Maps.newHashMap();  
37.     /** 
38.      * 子节点 
39.      */  
40.     private List<TreeNode> children;  
41.     /** 
42.      * 是否展开 (open,closed)-(默认值:open) 
43.      */  
44.     private String state = STATE_OPEN;  
45.   
46.     public TreeNode() {  
47.         this(null, null, "");  
48.     }  
49.   
50.     /** 
51.      *  
52.      * @param id 
53.      *            节点id 
54.      * @param text 
55.      *            树节点名称 
56.      */  
57.     public TreeNode(String id, String text) {  
58.         this(id, text, "");  
59.     }  
60.   
61.     /** 
62.      *  
63.      * @param id 
64.      *            节点id 
65.      * @param text 
66.      *            树节点名称 
67.      * @param iconCls 
68.      *            图标样式 
69.      */  
70.     public TreeNode(String id, String text, String iconCls) {  
71.         this(id, text, STATE_OPEN, iconCls);  
72.     }  
73.   
74.     /** 
75.      *  
76.      * @param id 
77.      *            节点id 
78.      * @param text 
79.      *            树节点名称 
80.      * @param state 
81.      *            是否展开 
82.      * @param iconCls 
83.      *            图标样式 
84.      */  
85.     public TreeNode(String id, String text, String state, String iconCls) {  
86.         this.id = id;  
87.         this.text = text;  
88.         this.state = state;  
89.         this.iconCls = iconCls;  
90.         this.children = Lists.newArrayList();  
91.     }  
92.   
93.     /** 
94.      *  
95.      * @param id 
96.      *            节点id 
97.      * @param text 
98.      *            树节点名称 
99.      * @param iconCls 
100.      *            图标样式 
101.      * @param checked 
102.      *            是否勾选状态（默认：否） 
103.      * @param attributes 
104.      *            自定义属性 
105.      * @param children 
106.      *            子节点 
107.      * @param state 
108.      *            是否展开 
109.      */  
110.     public TreeNode(String id, String text, String iconCls, Boolean checked,  
111.             Map<String, Object> attributes, List<TreeNode> children,  
112.             String state) {  
113.         super();  
114.         this.id = id;  
115.         this.text = text;  
116.         this.iconCls = iconCls;  
117.         this.checked = checked;  
118.         this.attributes = attributes;  
119.         this.children = children;  
120.         this.state = state;  
121.     }  
122.   
123.     /** 
124.      * 添加子节点. 
125.      *  
126.      * @param childNode 
127.      *            子节点 
128.      */  
129.     public TreeNode addChild(TreeNode childNode) {  
130.         this.children.add(childNode);  
131.         return this;  
132.     }  
133.   
134.     /** 
135.      * 节点id 
136.      */  
137.     public String getId() {  
138.         return id;  
139.     }  
140.   
141.     public TreeNode setId(String id) {  
142.         this.id = id;  
143.         return this;  
144.     }  
145.   
146.     /** 
147.      * 父级节点id （用于zTree简单数据模型） 
148.      * @return 
149.      */  
150.     public String getpId() {  
151.         return pId;  
152.     }  
153.   
154.     /** 
155.      * @param pId 父级节点id （用于zTree简单数据模型） 
156.      * @return 
157.      */  
158.     public TreeNode setpId(String pId) {  
159.         this.pId = pId;  
160.         return this;  
161.     }  
162.   
163.     /** 
164.      * 树节点名称 
165.      */  
166.     public String getText() {  
167.         return text;  
168.     }  
169.   
170.     public TreeNode setText(String text) {  
171.         this.text = text;  
172.         return this;  
173.     }  
174.   
175.     /** 
176.      * 是否勾选状态（默认：否） 
177.      */  
178.     public Boolean getChecked() {  
179.         return checked;  
180.     }  
181.   
182.     public TreeNode setChecked(Boolean checked) {  
183.         this.checked = checked;  
184.         return this;  
185.     }  
186.   
187.     /** 
188.      * 自定义属性 
189.      */  
190.     public Map<String, Object> getAttributes() {  
191.         return attributes;  
192.     }  
193.   
194.     public TreeNode setAttributes(Map<String, Object> attributes) {  
195.         this.attributes = attributes;  
196.         return this;  
197.     }  
198.   
199.     /** 
200.      * 子节点 
201.      */  
202.     public List<TreeNode> getChildren() {  
203.         return children;  
204.     }  
205.   
206.     public TreeNode setChildren(List<TreeNode> children) {  
207.         this.children = children;  
208.         return this;  
209.     }  
210.   
211.     /** 
212.      * 是否展开 
213.      */  
214.     public String getState() {  
215.         return state;  
216.     }  
217.   
218.     public TreeNode setState(String state) {  
219.         this.state = state;  
220.         return this;  
221.     }  
222.   
223.     /** 
224.      * 图标样式 
225.      */  
226.     public String getIconCls() {  
227.         return iconCls;  
228.     }  
229.   
230.     public TreeNode setIconCls(String iconCls) {  
231.         this.iconCls = iconCls;  
232.         return this;  
233.     }  
234.       
235.     @Override  
236.     public String toString() {  
237.         return ToStringBuilder.reflectionToString(this);  
238.     }  
239.   
240. }  

    @RequestMapping(value = {"tree"})
    @ResponseBody
    @DataSource(AppConstants.DATASOURCE_DW)//切换到datasource数据源
    public List<TreeNode> tree() throws Exception {
    List<TreeNode> treeNodes = Lists.newArrayList();
        TreeNode proNode = new TreeNode("113600","江西省");
        proNode.setChecked(false);
        proNode.setIconCls("icon-organ-root");
        proNode.setpId(null);
        proNode.setState("closed");
    List<Map> citylist=custService.findBySql("select distinct city_id,city_name from dim_organ_sale_procityxian where pro_id='113600'  order by city_id", new Parameter());
List<TreeNode> citytree = Lists.newArrayList();
    for(Map cityMap :citylist){
    TreeNode cityNode = new TreeNode((String)cityMap.get("CITY_ID"),(String)cityMap.get("CITY_NAME"));
    cityNode.setChecked(false);
    cityNode.setIconCls("icon-organ-root");
    cityNode.setpId(null);
    cityNode.setState("closed");
    List<Map> xialist=custService.findBySql("select distinct xia_id,xia_name from dim_organ_sale_procityxian where city_id='"+cityMap.get("CITY_ID")+"'  order by xia_id", new Parameter());
    List<TreeNode> xiatree = Lists.newArrayList();    
    for(Map xiaMap :xialist){
        TreeNode xiaNode = new TreeNode((String)xiaMap.get("XIA_ID"),(String)xiaMap.get("XIA_NAME"));
        xiaNode.setChecked(false);
        xiaNode.setIconCls("icon-organ-root");
        xiaNode.setpId(null);
        xiaNode.setState("open");    
        xiatree.add(xiaNode);
    }
    cityNode.setChildren(xiatree);
    citytree.add(cityNode);
    }
    proNode.setChildren(citytree);
    treeNodes.add(proNode);
    return treeNodes;
    }

由于我的机构表没有父子关系，所以不能用递归的方法进行构造，只是一层层的手动构造，不过从这手动简单的构造可以学到要形成树形的数据结构

[html]  view plain copy

1. [ {  
2.   "id" : "113600",  
3.   "pId" : null,  
4.   "text" : "江西省",  
5.   "iconCls" : "icon-organ-root",  
6.   "checked" : false,  
7.   "attributes" : { },  
8.   "children" : [ {  
9.     "id" : "113601",  
10.     "pId" : null,  
11.     "text" : "南昌市",  
12.     "iconCls" : "icon-organ-root",  
13.     "checked" : false,  
14.     "attributes" : { },  
15.     "children" : [ {  
16.       "id" : "11360102",  
17.       "pId" : null,  
18.       "text" : "南昌县",  
19.       "iconCls" : "icon-organ-root",  
20.       "checked" : false,  
21.       "attributes" : { },  
22.       "children" : [ ],  
23.       "state" : "open"  
24.     }],  
25.     "state" : "closed"  
26.   },  
27.   "state" : "closed"  
28. } ]  

可以看出，要形成树有2个方法，1.json里面有children集合；2.json里面有_parentId。

动态生成js全局变量：

由于android项目中要不同Tab页进行分页，需要根据栏目的数量动态生成页码page变量存放页码。

[javascript]  view plain copy

1. for(var i = 0; i < 4; i++) {  
2.     window["page" + i] = 1;  
3. }  

相当于生成了var page0=1;var page1=1;var page2=1;var page3=1;

在后面的使用中可以用使用，或者用window["page" + i] 当变量用。比如累加：window["page" + i] ++；或者赋值var page=window["page" + i]