这篇文章给大家分享的是有关Easyui和zTree如何实现树形下拉框的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
方式一，使用zTree
前端代码：
计算
安全
数据库
网络和加速
企业服务
<div class="form-group">
<label>点击事件：</label>
<input id="selectActionType" class="form-control" onfocus="showActionTypeTree()" onclick="showActionTypeTree()" readonly="readonly" />
<input type="hidden" name="actionTypeId" id="actionTypeId"/>
<div id="actionTreeContent" class="menuContent" >
<ul id="actionTypeTree" class="ztree" ></ul>
</div>
</div>js代码：
/*
* 点击事件下拉树的设置
*/
var actionTypeSetting = {
view: {
dblClickExpand: true,
showIcon: false,
fontCss : {"font-weight":"400","font-size":"20px"}
},
data: {
key: {
name: "text",
children: "children"
},
simpleData: {
enable: true
}
},
callback: {
onClick: actionTypeOnClick
}
};
/*
* 点击事件下拉树的点击事件
*/
function actionTypeOnClick(e, treeId, treeNode) {
$("#actionTypeId").val(treeNode.id);
$("#selectActionType").val(treeNode.text);
}
/*
* 初始化点击事件类型
*
*/
function initActionType() {
$.ajax({
async: false,
cache: false,
type: 'POST',
dataType: "json",
url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2',
error: function () {//请求失败处理函数
alert('请求失败');
},
success: function (data) { //请求成功后处理函数
$.fn.zTree.init($("#actionTypeTree"), actionTypeSetting, data);
}
});
}
/*
* 展示点击事件SelectTree
*/
function showActionTypeTree() {
$.ajax({
url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2',
type: 'POST',
dataType: "json",
async: false,
success: function (data) {
$.fn.zTree.init($("#actionTypeTree"), actionTypeSetting, data);
var deptObj = $("#selectActionType");
var deptOffset = $("#selectActionType").offset();
$("#actionTreeContent").css({
left: deptOffset.left - 26 + "px",
top: deptOffset.top + "px"
}).slideDown("fast");
$('#actionTypeTree').css({width: deptObj.outerWidth() + "px"});
var zTree = $.fn.zTree.getZTreeObj("actionTypeTree");
var node = zTree.getNodeByParam("id", $('#actionTypeId').val(), null);
zTree.selectNode(node);
$("body").bind("mousedown", onBodyDownByActionType);
}
});
}
/*
* Body鼠标按下事件回调函数
*/
function onBodyDownByActionType(event) {
if (event.target.id.indexOf('switch') == -1) {
hideActionTypeMenu();
}
}
/*
* 隐藏点击事件Tree
*/
function hideActionTypeMenu() {
$("#actionTreeContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDownByActionType);
}方式二：使用easyui
前端代码：
<div class="form-group">
<label>点击事件：</label>
<input id="actionTypeId2" name="actionTypeId2" class="form-control" />
</div>js代码：
$("#actionTypeId2").combotree({
url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2',
textField:'name',
onClick: function (node) {
$("#actionTypeId").val(node.id);
},
onSelect: function (node) {
/**
* 当选中该节点时展开该节点，同时关闭其他节点
*/
if (node.state == "closed") {
$(this).tree('expand', node.target);
}
else {
var isLeaf = $(this).tree('isLeaf', node.target);
if (!isLeaf) {
$(this).tree("collapse", node.target);
}
}
}
});感谢各位的阅读！关于“Easyui和zTree如何实现树形下拉框”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
