最近工作中需要用到树形下拉框，因为项目中树形结构使用的是zTree，然后就百度，结果出来效果不好看，后来就试着用了easyui的comboTree，虽然比较好看，但是跟整体的bootstrap风格有点儿不搭。现在贴出来两种方式及效果，以后备用。
方式一，使用zTree
前端代码：
<div class="form-group">
<label>点击事件：</label>
<input id="selectActionType" class="form-control" onfocus="showActionTypeTree()" onclick="showActionTypeTree()" readonly="readonly" style="border-radius:5px;background-color: white;cursor: default;"/>
<input type="hidden" name="actionTypeId" id="actionTypeId"/>
<div id="actionTreeContent" class="menuContent" style="border-radius:5px;display: none; z-index:9999;position: absolute; border: 1px #CCC solid; background-color:#f9f9f9;">
<ul id="actionTypeTree" class="ztree" style="margin-top:0;height: 200px;overflow: auto"></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();
