php easyui tree 结构,Easyui和zTree两种方式分别实现树形下拉框

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

方式一，使用zTree

前端代码：

点击事件：

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

前端代码：

点击事件：

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两种方式分别实现树形下拉框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！