Jqxtree loading the departmental tree asynchronously

Holistic approach

A. To implement an asynchronous load the first time the load is a level department

B. Loading a department, if there is a sub-department, department front with + number, no sub-departments, the department is not preceded by A + (+ number is click can expand)

C. Implementation in SQL If there is a child department by default load a sub-department named "Query ..." in the department, the ID itself will be the only line, so that you can achieve the loading of the first level department in the end without the + sign

D. When you click on a department that can be expanded, replace the department with an async-traced department for "Query ..."

1. Introduce the style and JS (almost can be used to introduce it in order to use later)

<link rel= "stylesheet" href= "<%=basepath%>sg/jqwidgets/styles/jqx.base.css" type= "Text/css"/>< Script type= "Text/javascript" src= "<%=basepath%>/sg/jqwidgets/jqxcore.js" ></script><script type = "Text/javascript" src= "<%=basepath%>/sg/jqwidgets/jqxdata.js" ></script><script type= "text/ JavaScript "src=" <%=basepath%>/sg/jqwidgets/jqxbuttons.js "></script><script type=" text/ JavaScript "src=" <%=basepath%>/sg/jqwidgets/jqxscrollbar.js "></script><script type=" text/ JavaScript "src=" <%=basepath%>/sg/jqwidgets/jqxpanel.js "></script><script type=" text/ JavaScript "src=" <%=basepath%>/sg/jqwidgets/jqxtree.js "></script>

2.html page

<class= "Tab-pane active"  ID= "tab_1"></  div>

3.js Code

    //Div for Department tree output    varTree = $ (' #tab_1 '); //Level One department data    varSource =NULL; //Subordinate Department data    varSource1 =NULL; //First Level Department data request$.ajax ({type:"POST", DataType:' JSON ', Url:app_base_path+ "background/biz/selectdept.html", data: {"id": ""//The parent ID is empty to load a department of data}, Success:function(Result) {result= eval ("(" +result+ ")"); vardata =Result.result; SOURCE={datatype:"JSON", datafields: [{name:' C_id '},//Department ID{name: ' C_pid '},//Parent Department ID{name: ' C_name '},//Department Name{name: ' Value '}//write the Department ID here.], ID:' C_ID ', localdata:data}; //Generate departmental Tree                      varDataAdapter =New$.jqx.dataadapter (source);                      Dataadapter.databind (); varRecords = Dataadapter.getrecordshierarchy (' c_id ', ' c_pid ', ' items ', [{name: ' C_name ', map: ' label ', Icon: "<%= basepath%>/Dhtml/imgs/csh_bluebooks/folderclosed.gif "}]); Tree.jqxtree ({source:records, Width:' 400px ', Height: ' 420px '});
                //execute the following code when you click Expand Department (asynchronously loading a subordinate department)Tree.on (' expand ',function(event) {varlabel = Tree.jqxtree (' GetItem ', event.args.element). label;//                      var$element =$ (event.args.element); varLoader =false; varLoaderitem =NULL; varChildren = $element. Find (' Ul:first '). Children ();//the first subordinate department (that is, if there is a subordinate department, the default is to load a virtual sub-department named "Query ...")                          //determine if a subordinate department name is ' query ... '$.each (Children,function () {                          varitem = Tree.jqxtree (' GetItem ', This); if(item && Item.label = = ' Query ... ')) {Loaderitem=item; Loader=true; return false                          };                      }); //querying sub-departments based on parent department ID                      if(loader) {$.ajax ({type:"POST", DataType:' JSON ', Url:app_base_path+ "background/biz/selectdept.html", data: {"id": Loaderitem.value//Parent Department ID}, Success:function(Result) {result= eval ("(" +result+ ")"); vardata =Result.result; //Prepare the DataSource1 ={datatype:"JSON", datafields: [{name:' C_ID '}, {name:' C_pid '}, {name:' C_name '}, {name:' Value '}], ID:' C_ID ', localdata:data}; varDataAdapter =New$.jqx.dataadapter (SOURCE1);                           Dataadapter.databind (); varRECORDS1 = Dataadapter.getrecordshierarchy (' c_id ', ' c_pid ', ' items ', [{name: ' C_name ', map: ' label ', Icon: "<%= Basepath%>/dhtml/imgs/csh_bluebooks/folderclosed.gif "}]); Tree.jqxtree (' AddTo ', records1, $element [0]); Tree.jqxtree (' RemoveItem ', loaderitem.element);                      }                          });                              }                  }); }  });

4. Database statements (I'm using the Postgre database)

Idea: A. First query parent department ID is null that is the first level department, and if a subordinate department loads a sub-department named "Query ..." by default

SQL Implementation Direct Query PID = {#id} According to the PID Groub by and the resulting must be a sub-department of this department to modify the next field can be

For example, I wrote that this is a people's watch, and that's the department.

SelectRow_number () Over()::character varying( -)||'999999'C_id,c_pid,'query in ...'C_name,c_pid value1 from (            Selectpt.c_id,pt.c_name,pt.c_pid,pt.c_id asValue fromdb_sgtz.t_dept PTUnion  All            SelectC_ID, C_name, c_dept asc_pid,c_id asValue fromDb_sgtz.t_aty_user_zuig) AwhereC_pidinch(            Selectc_id from (            Selectpt.c_id,pt.c_name,pt.c_pid,pt.c_id asValue fromdb_sgtz.t_dept PTUnion  All                        SelectC_ID, C_name, c_dept asc_pid,c_id asValue fromDb_sgtz.t_aty_user_zuig) A

B.sql the difficulty is with a if you understand a natural whole SQL is good to write

All SQL

<SelectId="Selectdept" ParameterType="Java.util.HashMap" Resulttype="Dept">    SelectC_id,c_pid,c_name,value from (            SelectC_id,c_pid,c_name,value from (            Selectpt.c_id,pt.c_name,pt.c_pid,pt.c_id asValue fromdb_sgtz.t_dept PTUnion  All            SelectC_ID, C_name, c_dept asc_pid,c_id asValue fromDb_sgtz.t_aty_user_zuig) A<ifTest="C_id== NULL orc_id== "'">            whereC_pid is  NULL            </if>            <ifTest="C_id!= NULL  andc_id!= "'">            whereC_pid=#{c_id}</if>            Union  All            SelectRow_number () Over()::character varying( -)||'999999'C_id,c_pid,'query in ...'C_name,c_pid value1 from (            Selectpt.c_id,pt.c_name,pt.c_pid,pt.c_id asValue fromdb_sgtz.t_dept PTUnion  All            SelectC_ID, C_name, c_dept asc_pid,c_id asValue fromDb_sgtz.t_aty_user_zuig) AwhereC_pidinch(            Selectc_id from (            Selectpt.c_id,pt.c_name,pt.c_pid,pt.c_id asValue fromdb_sgtz.t_dept PTUnion  All                        SelectC_ID, C_name, c_dept asc_pid,c_id asValue fromDb_sgtz.t_aty_user_zuig) A<ifTest="C_id== NULL orc_id== "'">            whereC_pid is  NULL            </if>            <ifTest="C_id!= NULL  andc_id!= "'">            whereC_pid=#{c_id}</if>             )             Group  byc_pid) HOrder  byTo_number (c_id,'99999999')    </Select>

B.

Jqxtree loading the departmental tree asynchronously