插件地址:链接:http://pan.baidu.com/s/1jHVtyZ0 密码:7kee

<select id="getTree" resultType="java.util.HashMap">
(
SELECT
'isdept' flagss,
ud.`dept_id` AS id, #部门id
sd.`deptName` AS name, #部门名称
sd.`parentId` AS pId #父级Id
FROM
user_dept ud,
sys_dept sd,
user_info ui
WHERE 1 = 1
AND sd.`id` = ud.`dept_id`
AND sd.delFlag = 0
AND ui.`id` = ud.`user_id`
AND ui.`del_flag` = 0
AND ui.`user_state` = 1
)
UNION
(
SELECT
'isuser' flagss,
ud.`user_id` AS id,
ui.`user_name` AS name,
ud.`dept_id` AS pId
FROM
user_dept ud,
sys_dept sd,
user_info ui
WHERE 1 = 1
AND sd.`id` = ud.`dept_id`
AND sd.delFlag = 0
AND ui.`id` = ud.`user_id`
AND ui.`del_flag` = 0
AND ui.`user_state` = 1 )
</select>

  

<link rel="stylesheet" href="/plugins/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/plugins/zTree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/plugins/zTree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="/plugins/myTree.js"></script>
<input type="button" onclick="getTree()" value="选择">
<!--tree-部门员工-->
<div class="modal fade" id="detailModel">
<div class="modal-dialog modal-full " style="z-index:9999;">
<div class="modal-content" style="width: 600px;height: 400px;margin-left: -50px;">
<form class="form-horizontal" role="form" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="orderTitleInfo">选择部门员工</h4>
</div>
<!--tree -s-->
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<input type="hidden" id="py" class="checkbox first" checked/>
<input type="hidden" id="sy" class="checkbox first" checked/>
<input type="hidden" id="pn" class="checkbox first" checked/>
<input type="hidden" id="sn" class="checkbox first" checked/>
<!--tree -e-->
<div class="modal-footer">
<button type="button" class="btn btn-default" id="" onclick="queding()">确定
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</form>
</div>
</div>
function queding() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true);
var dept_user = "";
var dept_user_code = "";
var flagss = "";
for (var i = 0; i < nodes.length; i++) {
dept_user += nodes[i].name + ",";
dept_user_code += nodes[i].id + ",";
flagss += nodes[i].flagss + ","; }
// console.log(flagss);
// console.log(dept_user);
// console.log(dept_user_code);
$('#dept_user_flag').val(flagss);
$('#dept_user').val(dept_user);
$('#dept_user_code').val(dept_user_code);
$("#detailModel").modal('hide');
} function getTree() {
$("#detailModel").modal('show');
$.ajax({
type: "POST",
url: "/userDept/getTree",
dataType: 'json',
success: function (data) {
console.log(data);
debugger
var zNodes = data;
tree(zNodes);
}, error: function () {
alert("错了");
}
});
} var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};
var code; function setCheck() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
py = $("#py").attr("checked") ? "p" : "",
sy = $("#sy").attr("checked") ? "s" : "",
pn = $("#pn").attr("checked") ? "p" : "",
sn = $("#sn").attr("checked") ? "s" : "",
type = {"Y": py + sy, "N": pn + sn};
zTree.setting.check.chkboxType = type;
showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
} function showCode(str) {
if (!code) code = $("#code");
code.empty();
code.append("<li>" + str + "</li>");
} function tree(zNodes) {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
setCheck();
$("#py").bind("change", setCheck);
$("#sy").bind("change", setCheck);
$("#pn").bind("change", setCheck);
$("#sn").bind("change", setCheck);
};

  

												

zTree 用法小例的更多相关文章

  1. wmic命令用法小例

    wmic就是wmic.exe,位于windows目录底下,是一个命令行程序.WMIC可以以两种模式执行:交互模式(Interactive mode)和非交互模式(Non-Interactive mod ...

  2. treetable 用法小例

    插件地址:http://pan.baidu.com/s/1kVf0Kcfcript src="/plugins/jQuery/jQuery-2.1.4.min.js">< ...

  3. linux 命令小例

    xargs示例: ls |xargs -i mv {}  /opt find示例: find -mtime +n -name “*.avi” -type f -exec rm {} \; find - ...

  4. Ubuntu13.04 Eclipse下编译安装Hadoop插件及使用小例

    Ubuntu13.04 Eclipse下编译安装Hadoop插件及使用小例 一.在Eclipse下编译安装Hadoop插件 Hadoop的Eclipse插件现在已经没有二进制版直接提供,只能自己编译. ...

  5. MVC4加载zTree树小控件

    前言: 第一次学习使用MVC框架,找了个练手项目,加载zTree树小控件.下面我就一步步说明我这次练手的经历以记录.如果有什么错误,希望各位大神帮忙指正,谢谢. 第一步: 利用VS2010新建一个MV ...

  6. 使用libcurl下载文件小例

    libcurl是一个很强大的开源网络处理库,支持包括HTTP.HTTPS.FTP……一系列网络协议.用它来进行HTTP的get\post 或者下载文件更是小菜一碟,chrome内核都用到了它,本文主要 ...

  7. webpack -- 多页面简单小例

    有时单页面并不能满足我们的业务需求,就需要去构建多页面应用,以下为简单小例: entry:{ index:'./src/module/index/index.js', student:'./src/m ...

  8. [libpng]CMake+VS2015下编译libpng,及使用小例

    编译前的工作 在编译libpng前,需要把zlib编译好,并加载到编译环境里. CMake + VS2015 下编译zlib,及使用小例 下载与解压 libpng的官网是 http://www.lib ...

  9. Linux下 ls 命令的高级用法8例

    Linux下 ls 命令的高级用法8例 在Linux下,ls这个命令大家肯定太熟悉了,良许相信只要是Linux工程师,每天都会离不开这个命令,而且一天会使用个几百次.但是,除了 ls -l 以外,你还 ...

随机推荐

  1. Codeforces Round #275 (Div. 2)-A. Counterexample

    http://codeforces.com/contest/483/problem/A A. Counterexample time limit per test 1 second memory li ...

  2. 简单jQuery图片自适应宽度插件jQuery.imgAutoSize.js

    (function ($) {       var loadImg = function (url, fn) {         var img = new Image();         img. ...

  3. C++系统学习之七:类

    类的基本思想是数据抽象和封装. 数据抽象是一种依赖于接口和实现分离的编程技术.类的接口包括用户所能执行的操作:类的实现包括类的数据成员.负责接口实现的函数体以及定义类所需的各种私有函数. 封装实现了类 ...

  4. POJ-3669-流星雨

    这题的话,卡了有两个小时左右,首先更新地图的时候越界了,我们进行更新的时候,要判断一下是不是小于零了,越界就会Runtime Error. 然后bfs 的时候,我没有允许它搜出300以外的范围,然后就 ...

  5. <MySQL>入门一 查询 DQL

    1. 数据库表 1.1 员工表 Create Table CREATE TABLE `employees` ( `employee_id` ) NOT NULL AUTO_INCREMENT, `fi ...

  6. History Api以及hash操作

    https://segmentfault.com/a/1190000002447556#articleHeader12 https://developer.mozilla.org/zh-CN/docs ...

  7. 【linux】 【网络】【转发】服务器版自定义安装无法有线上网问题

  8. Python9-day3-作业

    ascli  字母,数字.特殊字符,1个字节.8位 unicode:16位 两个字节,升级32位,四个字节 utf-8:最少一个字节 8位,英文字母, 1,有变量name = "aleX l ...

  9. mat 和IPIImage之间的转换

    opencv2.3.1 Mat::operator IplImageCreates the IplImage header for the matrix.C++: Mat::operator IplI ...

  10. Android自动化测试Uiautomator--UiScrollable接口简介

    UiScrollable主要包括以下几个方面的方法: 1.快速滚动 2.获取列表子元素 3.获取与设置最大滚动次数常量值 4.滑动区域校准常量设置与获取 5.先前与向后滚动 6.滚动到某个对象 7.设 ...