整体思路

  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)||'' 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)||'' 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,'')
</select>

5.效果图

jqxtree异步加载部门树的更多相关文章

  1. combotree -下拉框树异步加载

    问题: 下拉树数据比较多时,全加载会产生页面延迟,需要实现异步加载 方案: 点击事件加载:先加载部分,点击节点时再展开并追加子节点 onBeforeExpand事件:在展开树前加载,感觉这种方式比较优 ...

  2. spring mvc easyui tree 异步加载树

    使用spring mvc 注解 异步加载一棵树 jsp: <ul id="orgInfoTree"></ul> $(function(){ loadOrgT ...

  3. 玩转Web之easyui(二)-----easy ui 异步加载生成树节点(Tree),点击树生成tab(选项卡)

    关于easy ui 异步加载生成树及点击树生成选项卡,这里直接给出代码,重点部分代码中均有注释 前台: $('#tree').tree({ url: '../servlet/School_Tree?i ...

  4. Jquery树控件ZTree异步加载

    异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 这里面主要设计ztree的setting变量的async属性设置: var setting = { ...

  5. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->新增“行政区域管理”,同时大批量树采用异步加载

    行政区划:简称政区,是国家为了进行分级管理而实行的区域划分.中国现行的行政区划实行如下原则:1.全国分为省.自治区.直辖市:2.省.自治区分为自治州.县.自治县.市:3.自治州分为县.自治县.市:4. ...

  6. ztree异步加载树节点

    参考文档:https://www.cnblogs.com/tenWood/p/8620708.html ztree api地址:http://www.treejs.cn/v3/api.php 说明:j ...

  7. bootstrap异步加载树后样式显示问题

    整个过程: 1.先加载整个页面 2.通过jquery异步请求后台返回数据 3.循环遍历数据,拼接需要的内容 4.把拼接好的数据加载到页面中. 问题: 把拼接好的内容加载到页面后,样式显示不正确.而如果 ...

  8. Jquery Ztree异步加载树

    1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...

  9. zTree异步加载并初始化树时全部展开(贴主要代码)

    <%@page pageEncoding="UTF-8"%> <%@include file="/commons/include/html_doctyp ...

随机推荐

  1. wpf 界面加载 Command

    导入 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" <i:Interaction. ...

  2. C语言输入一行整数(OJ输入格式)

    就是说输入一行用空格隔开的函数,可是它没说用回车符结束,所以一定要用EOF了 第一种方法: ; char ch; do { scanf("%ld",&a[++t]); } ...

  3. MySQL Docker方式安装

    以5.7版本为例 1 配置mysql配置文件编辑/etc/my.cnf,添加以下内容: [mysqld] skip-host-cache skip-name-resolve datadir=/var/ ...

  4. 登录deepin 15.9后不显示任务栏,无法操作

    一直觉得在Linux下编程很酷,所以决定装个Deepin试试,安装很顺利,然后搭建了开发环境,写了一个简单程序,觉得挺不错的. 哪知第二天一开机,登录后找不到任务栏了,做不了啥操作,走接傻眼了,直觉以 ...

  5. 洛谷 1097 统计数字(NOIp2007提高组T1)

    [题解] 排个序然后扫一遍进行统计即可. #include<cstdio> #include<algorithm> #include<cstring> #defin ...

  6. POJ - 2007 极角排序(Java 实现)

    POJ 2007 将所有的点按逆时针输出 import java.io.*; import java.util.*; public class Main { static class Point im ...

  7. 九九乘法表-Java

    public class Test1 { public static void main(String[] args){ for(int i=1;i<=9;i++){ for(int j=1;j ...

  8. Spring 获取当前activeProfile

    WebApplicationContext wac = WebApplicationContextUtils.getWebApplicationContext(getServletContext()) ...

  9. free web rich code eidtor

    free web rich code eidtor https://i.cnblogs.com/Preferences.aspx tiny code-editor https://apps.tiny. ...

  10. noip模拟赛 洗澡

    分析:首先肯定是要用线性筛把素数全部给筛出来的,然后可以维护一个前缀和数组记录1~i个素数的和,对于每一个询问可以从n到1+k枚举它的右端点,然后利用前缀和统计一个长度为K的区间和,看看是不是满足条件 ...