Simple construction of jquery Easyui tree + dynamic generation of JS global variables

The simple structure of jquery Easyui tree:

JSP page

Organizational structure: <input id= "P_organid" name= "P_organid" style= "width:160px;height:28px  ;" >  

    function Loadorgan () {        Organ_combotree = $ ("#p_organId"). Combotree ({            URL: ' ${ctxfront}/cust/tree ',            multiple:false,//if            editable:false,//can be edited            Required:false        });    }

Background code:

/** * Easyui Tree-shaped node TreeNode model. * @author: &eryan [email protected] * @date: 2013-1-11 pm 10:01:30 */@SuppressWarnings ("Serial") public clas S TreeNode implements Serializable {/** * static variable expansion node */public static final String State_open = "OPEN";/** * static variable close node */pub    Lic static final String state_cloased = "closed";/** * Node ID */private String ID; /** * Parent Node ID (for ztree simple data Model) */private String pid;/** * tree node name */private string text;/** * Front small icon style */private S Tring iconcls = "";/** * Check Status (default: No false) */private Boolean checked = false;/** * Custom properties */private map<string, OBJECT&G T attributes = Maps.newhashmap ();/** * child node */private list<treenode> children;/** * Whether expanded (open,closed)-(default: Open) */PR Ivate String state = State_open;public TreeNode () {This (null, NULL, "");} /** * * @param ID * Node ID * @param text * tree node name */public TreeNode (string id, string text) {This (ID, Text, "");} /** * * @param ID * Node ID * @param text * tree node name* @param iconcls * icon style */public TreeNode (string ID, string text, String iconcls) {This (ID, text, state_open, I CONCLS);}            /** * * @param ID * Node ID * @param text * tree node name * @param state * Expand * @param iconcls * Icon Style */public TreeNode (string ID, string text, string state, String iconcls) {this.id = Id;this.text = Text;thi S.state = State;this.iconcls = Iconcls;this.children = Lists.newarraylist ();} /** * * @param ID * Node ID * @param text * tree node name * @param iconcls * Icon style * @param checked            * Check Status (default: NO) * @param attributes * Custom properties * @param children * child nodes * @param state *  Whether to expand */public TreeNode (String ID, string text, String iconcls, Boolean checked,map<string, object> attributes,  List<treenode> children,string State) {super (); this.id = Id;this.text = Text;this.iconcls = iconcls;this.checked = Checked;this.attributes = Attributes;this.children = ChildreN;this.state = State;} /** * Add child nodes.        * * @param childnode * sub-node */public TreeNode addChild (TreeNode childnode) {this.children.add (Childnode); return this;} /** * Node ID */public String getId () {return ID;}        Public TreeNode setId (String id) {this.id = ID;    return this;}    /** * Parent Node ID (for ztree simple data Model) * @return */public String getpid () {return pId; }/** * @param pId parent Node ID (for ztree simple data Model) * @return */public TreeNode setpid (String pId) {this.        PID = pid;    return this; }/** * Tree node name */public String GetText () {return text;}        Public TreeNode SetText (String text) {this.text = text; return this;} /** * Check Status (default: NO) */public Boolean getchecked () {return checked;}        Public TreeNode setchecked (Boolean checked) {this.checked = checked; return this;} /** * Custom Attribute */public map<string, object> getattributes () {return attributes;} Public TreeNode setattributes (map<string, object> attributes) {this.attributes = attributes; return this;} /** * child node */public list<treenode> GetChildren () {return children;}        Public TreeNode Setchildren (list<treenode> children) {This.children = children; return this;} /** * Whether to expand */public String getState () {return state;}        Public TreeNode setState (String state) {this.state = state; return this;} /** * Icon Style */public String geticoncls () {return iconcls;}        Public TreeNode seticoncls (String iconcls) {this.iconcls = Iconcls; return this;} @Overridepublic String toString () {return tostringbuilder.reflectiontostring (this);}}

    @RequestMapping (value = {"Tree"}) @ResponseBody @DataSource (APPCONSTANTS.DATASOURCE_DW)//switch to DataSource data source Pub        Lic list<treenode> tree () throws Exception {list<treenode> treenodes = lists.newarraylist ();        TreeNode Pronode = new TreeNode ("113600", "Jiangxi Province");        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; }

Since my organization table does not have a parent-child relationship, it is not possible to construct it recursively, but it is a layer of manual construction, but from this manual simple construction you can learn to form a tree-shaped data structure.

[{  "id": "113600",  "pId": null,  "text": "Jiangxi Province",  "Iconcls": "Icon-organ-root",  "checked": false,< c5/> "Attributes": {},  "Children": [{    "id": "113601",    "pId": null,    "text": "Nanchang",    "Iconcls": " Icon-organ-root ",    " checked ": false,    " attributes ": {},    " Children ": [{      " id ":" 11360102 ",      " PId ": null,      " text ":" Nanchang County ",      " Iconcls ":" Icon-organ-root ",      " checked ": false,      " attributes ": {},
    ' children ': [],      ' state ': ' Open '    }],    ' state ': ' Closed '  },  ' state ': ' Closed '}]

As can be seen, to form a tree has 2 methods, 1.json inside has children set; 2.json has _parentid inside.

Dynamically generate JS Global variables:

Due to the different tab pages in the Android project, it is necessary to dynamically generate page numbers based on the number of columns page variables to store page numbers.

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

Equivalent to generating the Var page0=1;var page1=1;var Page2=1;var page3=1;

It can be used in later use, or with window["page" + i] when the variable is used. For example, add: window["page" + i] + +, or assign var page=window["page" + i]

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Simple construction of jquery Easyui tree + dynamic generation of JS global variables