jqxtree異步加載部門樹

整體思路

　　A.要想實現異步加載第一次加載的是一級部門

　　B.加載一級部門，如果有子部門，部門前面帶+號，沒有子部門，部門前面沒有+號（+號也就是點擊可以展開）

　　C.在sql中實現如果有子部門默認都加載一個子部門名稱為“查詢中...”的部門，id自己定唯一就行,這樣就可以實現加載的一級部門到底前面帶不帶+號

　　D.當點擊可以展開的部門時，將部門為“查詢中...”的替換為異步查出來的部門

 

1.引入樣式和js（差不多能用到的都引入吧以便以后能用到）　

<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頁面　

<div class="tab-pane active" id="tab_1"> </div>

3.js代碼

    //部門樹輸出的div
    var tree = $('#tab_1');
    //一級部門數據
    var source = null;
    //下級部門數據
    var source1 = null;
    //首先請求一級部門數據
    $.ajax({
              type: "POST",
                 dataType : 'json',
                  url: app_base_path+"background/biz/selectDept.html",
                data: {
                      "id":""//父id為空標示加載一部門數據
                  },
                success :function(result) {
                  result = eval("("+result+")");
                  var data = result.result;
                        source =
                        {
                            datatype: "json",
                            datafields: [
                                { name: 'c_id' },//部門id
                                { name: 'c_pid' },//父級部門id
                                { name: 'c_name' },//部門名稱
                                { name: 'value' }//此處寫部門id就行
                            ],
                            id: 'c_id',
                            localdata: data
                        };
                            //生成部門樹
                      var dataAdapter = new $.jqx.dataAdapter(source);
                      dataAdapter.dataBind();
                      var records = 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'});

                //當點擊展開部門時執行以下代碼（異步加載下級部門）
               tree.on('expand', function (event) {
                      var label = tree.jqxTree('getItem', event.args.element).label;//
                      var $element = $(event.args.element);
                      var loader = false;
                      var loaderItem = null;
                      var children = $element.find('ul:first').children();//第一個下級部門（也就是如果有下級部門時默認加載一個名稱為“查詢中...”的虛擬下級部門）
                          //判斷是否有下級部門名稱為'查詢中...'的
                      $.each(children, function () {
                          var item = tree.jqxTree('getItem', this);
                          if (item && item.label == '查詢中...') {
                              loaderItem = item;
                              loader = true;
                              return false
                          };
                      });
                      //根據父級部門id查詢子部門
                      if (loader) {
                          $.ajax({
                              type: "POST",
                                 dataType : 'json',
                                url: app_base_path+"background/biz/selectDept.html",
                              data: {
                                      "id":loaderItem.value//父級部門id
                                  },
                              success :function(result) {
                              result = eval("("+result+")");
                            var data = result.result;
                                    // prepare the data
                                    source1 =
                                    {
                                        datatype: "json",
                                        datafields: [
                                                 { name: 'c_id' },
                                                { name: 'c_pid' },
                                                { name: 'c_name' },
                                              { name: 'value' }
                                        ],
                                        id: 'c_id',
                                        localdata: data
                                    };
                           var dataAdapter = new $.jqx.dataAdapter(source1);
                            dataAdapter.dataBind();
                           var records1 = 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.數據庫語句（我用的是postgre數據庫）

　　思路：a.首次查詢父級部門id為null也就是一級部門,且如果有下級部門默認加載一個名稱為"查詢中..."的子部門

　　　　　　sql實現 直接查詢pid = {#id}根據pid groub by 以下並且產生的一定為此部門的一個子部門再修改下字段就可以

　　　　　　例如：我寫的這是包含人員表的 也就是部門下面的人也查出來了　　　　　　

　　　　　　select row_number() over()::character varying(30)||'999999' c_id,c_pid,'查詢中...' c_name,c_pid value1  from (
            select pt.c_id,pt.c_name,pt.c_pid,pt.c_id as value   from db_sgtz.t_dept pt 
            union ALL
            select c_id  ,c_name ,c_dept as c_pid,c_id as value from db_sgtz.t_aty_user_zuig) a             
                          where c_pid  in(
            select c_id from (
            select pt.c_id,pt.c_name,pt.c_pid,pt.c_id as value   from db_sgtz.t_dept pt 
            union ALL
                        select c_id  ,c_name ,c_dept as c_pid,c_id as value from db_sgtz.t_aty_user_zuig) a

　　　　b.sql的難點就在與a如果明白a自然整條sql就好寫了

　　　　全部sql　　

<select id="selectDept" parameterType="java.util.HashMap" resultType="Dept">
    select c_id,c_pid,c_name,value from (
    
        select c_id,c_pid,c_name,value from (
            select pt.c_id,pt.c_name,pt.c_pid,pt.c_id as value   from db_sgtz.t_dept pt 
            union ALL
            select c_id  ,c_name ,c_dept as c_pid,c_id as value from db_sgtz.t_aty_user_zuig) a
            <if test="c_id == null or c_id == ''">
            where c_pid is  null
            </if>
            <if test="c_id != null and  c_id != ''">
            where c_pid =  #{c_id}
            </if>
            union All
            select row_number() over()::character varying(30)||'999999' c_id,c_pid,'查詢中...' c_name,c_pid value1  from (
            select pt.c_id,pt.c_name,pt.c_pid,pt.c_id as value   from db_sgtz.t_dept pt 
            union ALL
            select c_id  ,c_name ,c_dept as c_pid,c_id as value from db_sgtz.t_aty_user_zuig) a 
            
                          where c_pid  in(
            select c_id from (
            select pt.c_id,pt.c_name,pt.c_pid,pt.c_id as value   from db_sgtz.t_dept pt 
            union ALL
                        select c_id  ,c_name ,c_dept as c_pid,c_id as value from db_sgtz.t_aty_user_zuig) a
            
            <if test="c_id == null or c_id == ''">
            where c_pid is  null
            </if>
            <if test="c_id != null and  c_id != ''">
            where c_pid =  #{c_id}
            </if>
             )
             group by c_pid ) h
             order by to_number(c_id,'99999999')
    </select>

 5.效果圖