微客导航 » 文章资讯 » Easyui和zTree两种方式分别实现树形下拉框

Easyui和zTree两种方式分别实现树形下拉框

2023-09-27 00:58:06 194

最近工作中需要用到树形下拉框，因为项目中树形结构使用的是zTree，然后就百度，结果出来效果不好看，后来就试着用了easyui的comboTree，虽然比较好看，但是跟整体的bootstrap风格有点儿不搭。现在贴出来两种方式及效果，以后备用。

方式一，使用zTree

前端代码：


点击事件：

js代码：

/*
*点击事件下拉树的设置
*/
varactionTypeSetting={
view:{
dblClickExpand:true,
showIcon:false,
fontCss:{"font-weight":"400","font-size":"20px"}
},
data:{
key:{
name:"text",
children:"children"
},
simpleData:{
enable:true
}
},
callback:{
onClick:actionTypeOnClick
}
};
/*
*点击事件下拉树的点击事件
*/
functionactionTypeOnClick(e,treeId,treeNode){
$("#actionTypeId").val(treeNode.id);
$("#selectActionType").val(treeNode.text);
}
/*
*初始化点击事件类型
*
*/
functioninitActionType(){
$.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
*/
functionshowActionTypeTree(){
$.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);
vardeptObj=$("#selectActionType");
vardeptOffset=$("#selectActionType").offset();
$("#actionTreeContent").css({
left:deptOffset.left-26+"px",
top:deptOffset.top+"px"
}).slideDown("fast");
$('#actionTypeTree').css({width:deptObj.outerWidth()+"px"});
varzTree=$.fn.zTree.getZTreeObj("actionTypeTree");
varnode=zTree.getNodeByParam("id",$('#actionTypeId').val(),null);
zTree.selectNode(node);
$("body").bind("mousedown",onBodyDownByActionType);
}
});
}
/*
*Body鼠标按下事件回调函数
*/
functiononBodyDownByActionType(event){
if(event.target.id.indexOf('switch')==-1){
hideActionTypeMenu();
}
}
/*
*隐藏点击事件Tree
*/
functionhideActionTypeMenu(){
$("#actionTreeContent").fadeOut("fast");
$("body").unbind("mousedown",onBodyDownByActionType);
}

方式二：使用easyui

前端代码：


点击事件：

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{
varisLeaf=$(this).tree('isLeaf',node.target);
if(!isLeaf){
$(this).tree("collapse",node.target);
}
}
}
});

总结

以上所述是小编给大家介绍的Easyui和zTree两种方式分别实现树形下拉框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

Easyui和zTree两种方式分别实现树形下拉框

热门推荐

随机推荐