$(document).ready(function(){
var treeObj = $("#treeDemo");
$.fn.zTree.init(treeObj, setting, zNodes);
department_select();//页面加载完成执行方法
});
/*ztree实现下拉菜单*/
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
/*通过查询area确定区域,根据区域id确定下面的部门*/
/*将数据库里面的部门信息查询出来,循环显示出来*/
/*获取区域id和区域名称*/
var arr_areaid = Array();
var arr_areaname = Array();
var url="{:U('area/select_area')}";//ajax传值路径
$.ajax({
type:'post',
data:"",
url:url,
async:false,//设置ajax同步和 异步,如果想在ajax外面用数据,需要将其设置为同步,运行完成之后才能用数据
dataType:"json",
success: function (data) {
for(var i = 0;i < data.length;i++){
arr_areaid[i] = data[i].areaid;
arr_areaname[i] = data[i].areaname;
}
}
});
// console.log("!!!"+arr_areaid);//区域id
// console.log("!!!"+arr_areaname);//区域名称
/*获取部门名称以及所属于的区域id*/
var arr_departmentname = Array();
var arr_department_areaid = Array();
var url="{:U('department/select_department')}";//ajax传值路径
$.ajax({
type:'post',
data:"",
url:url,
async:false,
dataType:"json",
success: function (data) {
for(var i = 0;i < data.length;i++){
arr_departmentname[i] = data[i].departmentname;
arr_department_areaid[i] = data[i].areaid
}
}
});
// console.log(arr_departmentname);
// console.log(arr_department_areaid);
var zNodes =[];
for(var i = 0;i < arr_areaid.length;i++){
zNodes.push({ id:arr_areaid[i], pId:0, name:arr_areaname[i], open:true,iconClose:"__PUBLIC__img/user/12.png",iconOpen:"__PUBLIC__img/user/13.png"});
for(var j = 0;j < arr_departmentname.length;j++){
if(arr_areaid[i] == arr_department_areaid[j]){
zNodes.push({ id:(""+i+13+j), pId:arr_areaid[i], name:arr_departmentname[j],icon:"__PUBLIC__img/user/14.png"}) ;
}
}
}

ztree连接数据库,实现下拉菜单的更多相关文章

  1. z-tree官方提供的下拉菜单案例

    1.z-tree官方提供的下拉菜单案例 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - selec ...

  2. zTree插件之多选下拉菜单代码

    zTree插件之多选下拉菜单代码 css和js <!--ztree树结构--> <link rel="stylesheet" type="text/cs ...

  3. zTree下拉菜单多级菜单多选实现

    惯例,先上图: 这是在一个项目中,为了满足样式美观.多级菜单以及多选而将zTree插件更改过后的效果. 在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox ...

  4. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  5. 初学者--bootstrap(六)组件中的下拉菜单----在路上(10)

    组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...

  6. Bootstrap3系列:按钮式下拉菜单

    1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...

  7. Bootstrap3系列:下拉菜单

    1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...

  8. 如何在webapp中做出原生的ios下拉菜单效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

  9. Html5+Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

随机推荐

  1. deploy sql clr

    1, create strong signed key file 2, create asymmetric key

  2. hdu 5372 Segment Game 【 树状数组 】

    给出一些操作, 0是将第i次增加的线段放在b位置,第i次放的线段的长度为i 1是将第b次增加操作放的线段删除 每次增加操作完之后,询问这条线段上面的完整的线段的条数 每次询问统计比这条线段左端点大的线 ...

  3. zookeeper+kafka集群搭建

    一.ZK集群安装. 解压安装包后进入conf目录,conf/zoo_sample.cfg拷贝一份命名为zoo.cfg,同时也放在conf下面. zookeeper配置文件: # The number ...

  4. spring-session与redis实现session共享

    一.准备 两个不同端口号的输出request.getLocalPort() + " ---> " + request.getSession(true).getId()的简单S ...

  5. day19-2 生成器,递归函数

    目录 生成器 有关yield的理解 实现range()函数 生成器表达式 递归 思考 斐波那契额 汉诺塔 二分法 生成器 自定义的迭代器 yield关键字: 和return一样,接收值,但不终止函数 ...

  6. nefu 84 ( 拓展欧几里德模板题 )

    链接:传送门 思路:拓展欧几里德模板题,设大圣至少翻转 t 次,大圣起始位置为 x ,大圣目标位置为 y + n * s ( 大圣到达目标位置 y 可能需要多圈,所以用 s 来表示圈数 ),因为只能逆 ...

  7. vue 阿里云上传组件

    vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...

  8. java数组简单逻辑代码

    package cuteSnow; public class HelloWorld { // 遍历数组里面的每个数字 public static void print(int[] array){ St ...

  9. Ubuntu 安装wps-office

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50288483 本人的ubuntu系统是 ...

  10. Java相关知识(一)

    1. 作用域public.protected.private以及不写时的差别? public 表示公有.声明的为公共成员变量和函数成员.在整个类内类外都可使用,对全部用户开放,能够直接进行调用 pri ...