一、效果图

【关闭】

【展开】

二、代码

【HTML】注:布局一定要用DIV不是select否则效果····

【js】

① 以下为固定方法

function initSelectTree(id, isMultiple, chkboxType, zNodes) {

var setting = {

data: {

simpleData: {

enable: true

}

},

check: {

enable: false,

chkStyle: "radio",

radioType: "all",

},

chkboxType: { "Y": "ps", "N": "ps" },

callback: {

onClick: onClick,

onCheck: onCheck

}

};

if (isMultiple) {

setting.check.enable = isMultiple;

}

if (chkboxType !== undefined && chkboxType != null) {

setting.check.chkboxType = chkboxType;

}

var html = '

';

$("#" + id).append(html);

$("#" + id).append('

');

$("#" + id).bind("click", function () {

if ($(this).parent().find(".tree-content").css("display") !== "none") {

hideMenu()

} else {

$(this).addClass("layui-form-selected");

var Offset = $(this).offset();

var width = $(this).width() - 2 - 15;

$(this).parent().find(".tree-content").css({

left: Offset.left + "px",

top: Offset.top + $(this).height() + "px",

height: 250 + "px",

}).slideDown("fast");

$(this).parent().find(".tree-content").css({

width: width,

});

$("body").bind("mousedown", onBodyDown);

}

});

$.fn.zTree.init($("#" + id + "Tree"), setting, zNodes);

hideMenu();

}

//function beforeClick(treeId, treeNode) {

// var check = (treeNode && !treeNode.isParent);

// if (!check) alert("只能选择城市...");

// return check;

//}

function onClick(event, treeId, treeNode) {

var zTree = $.fn.zTree.getZTreeObj(treeId);

if (zTree.setting.check.enable == true) {

zTree.checkNode(treeNode, !treeNode.checked, false)

assignment(treeId, zTree.getCheckedNodes());

} else {

assignment(treeId, zTree.getSelectedNodes());

hideMenu();

}

}

function onCheck(event, treeId, treeNode) {

var zTree = $.fn.zTree.getZTreeObj(treeId);

assignment(treeId, zTree.getCheckedNodes());

}

function hideMenu() {

$(".select-tree").removeClass("layui-form-selected");

$(".tree-content").fadeOut("fast");

$("body").unbind("mousedown", onBodyDown);

}

function assignment(treeId, nodes) {

var names = "";

var ids = "";

for (var i = 0, l = nodes.length; i < l; i++) {

names += nodes[i].name + ",";

ids += nodes[i].id + ",";

}

if (names.length > 0) {

names = names.substring(0, names.length - 1);

ids = ids.substring(0, ids.length - 1);

}

treeId = treeId.substring(0, treeId.length - 4);

$("#" + treeId + "Show").attr("value", names);

$("#" + treeId + "Show").attr("title", names);

$("#" + treeId + "Hide").attr("value", ids);

}

function onBodyDown(event) {

if ($(event.target).parents(".tree-content").html() == null) {

hideMenu();

}

}

②以下为变动方法

Ajax("/BindCombox/GetDeptData", false, "POST", {}, function (data) {

var jsondata = JSON.parse(data);

if (jsondata.IsError) {

layer.msg("" + jsondata.ErrMsg, { icon: 5 });

} else {

zNodes = jsondata.Data;//获取数据源

initSelectTree("PDEPT_KEY", true, { "Y": "ps", "N": "s" }, zNodes);

var treeObj = $.fn.zTree.getZTreeObj("PDEPT_KEYTree");

var node = treeObj.getNodes();

treeObj.selectNode(node[0]);

treeObj.checkNode(node[0], true, true, true);

}

});

③数据源格式

[

{"id":41.0,"name":"技术二部","pId":1.0,"open":true},

{"id":42.0,"name":"技术三部","pId":null,"open":true}

]

注：设置open为true，树状菜单为展开状态

三、未实现效果问题解析

①没有引用js。ztree和layui

②布局采用select，没有使用div

③网络请求数据源不正确。

注：此方法仍存在不足之处，望有能人指点

第二百二十七节，jQuery EasyUI，ComboTree&lpar;树型下拉框&rpar;组件

jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...

ComboTree&lpar; 树型下拉框&rpar; 组件

本节课重点了解EasyUI中Tree(树)组件的使用方法, 这个组件依赖于Combo(下拉框)和 Tree(树)组件.一． 加载方式//class 加载方式

Layui：设置select下拉框自动选中某项

1.问题:layUI,在做编辑功能有下拉框数据时,需要初始化选中某个值,layUI官网没有相关api,可能我比较笨没找到 2.解决思路:出发点击事件 3.分析dom树结构,出发dl点击事件 方法: v ...

LayUI中实现上级下拉框动态加载下级下拉框js

js代码: var form = layui.form, layer = layui.layer; form.on("select(上级)", function(data){ va ...

【Layui】Layui模板引擎生成下拉框不显示

首先让我震惊了一下,layui引擎模板居然是支持ajax操作的 博主的需求是需要在数据表格内放入下拉框而下拉框的数据是数据库内查出来的(详见上一篇博客),但是下拉框怎么也显示不出来 找了四个小时的问题 ...

IE9&plus;的树状下拉菜单，支持多选

//JS核心代码function treeBox(Config){var el=eval(Config.el);var w=Config.width;var h=Config.height;var d ...

【Layui】当Layui数据表格和Layui下拉框组合时发生的问题

关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...

随机推荐

jQuery：详解jQuery中的事件(一)

之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

从客户端中检测到有潜在危险的 Request&period;Form 值。

使用富文本编辑器是经常会遇到这个问题,在MVC中解决方法很简单只要在对应的action上添加[ValidateInput(false)]即可

第二百一十五、六天 how can I 坚持

昨天刷机刷到很晚,博客都忘写了,刷了个flyme,用着没什么感觉,今天打电话试了下还有破音,有点小后悔.不行过两天再刷回来. 今天.mysql ifnull函数. 两条熊猫鱼都死了,这两天雾霾那么严重 ...

音频播放&lpar;iOS开发&rpar;

音频处理 一.录音 录音应用场景 语音聊天 即时通讯软件中,都包含语音发送功能 语音备忘录 录一段音频,来记录某件事情 录音功能实现 导入AVFoundation框架 作用:一些多媒体的处理,基本上都 ...

转： 【Java并发编程】之三：线程挂起、恢复与终止的正确方法(含代码)

转载请注明出处:http://blog.csdn.net/ns_code/article/details/17095733 挂起和恢复线程     Thread 的API中包含两个被淘汰的方法,它们用 ...

Datatable转换为Json

/// /// Datatable转换为Json /// ///

C&sol;C&plus;&plus;预处理指令&num;define&comma;&num;ifdef&comma;&num;ifndef&comma;&num;endif… (转)

本文转自博文C/C++预处理指令#define,#ifdef,#ifndef,#endif….这篇博文写得特别好,特转载. 本文主要记录了C/C++预处理指令,常见的预处理指令如下: #空指令,无任何 ...

本地访问虚拟机redis

1.开放端口号6379 iptables –I INPUT –p tcp –-dport 6379 –j ACCEPT 2.修改redis.conf 配置文件 ①修改redis绑定IP为虚拟机IP地址 ...

Python3基础 map&plus;lambda 将指定系列元素乘2

Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

Android中保存静态秘钥实践(转)

本文我们将讲解一个Android产品研发中可能会碰到的一个问题:如何在App中保存静态秘钥以及保证其安全性.许多的移动app需要在app端保存一些静态字符串常量,其可能是静态秘钥.第三方appId等. ...