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.效果图