首先，确保你已经引入了 jQuery 和 EasyUI 的相关文件。然后，可以按照以下步骤进行：
1. HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tree Combo Box</title>
<link rel="stylesheet" type="text/css" href="path/to/jquery-easyui/themes/default/easyui.css">
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div>
<label for="treeCombo">选择节点：</label>
<input id="treeCombo" />
</div>
<script>
// 在这里编写 JavaScript 代码
</script>
</body>
</html>
2. JavaScript 代码：
$(function(){
// 创建树形下拉框
$('#treeCombo').combotree({
url: 'path/to/your/tree-data.json', // 替换为实际的树形数据接口
required: true,
editable: false,
panelHeight: 'auto',
cascadeCheck: true, // 是否级联选择
onLoadSuccess: function (node, data) {
// 选择第一个节点
var rootNode = $(this).combotree('tree').tree('getRoot');
$(this).combotree('setValue', rootNode.id);
}
});
});
3. 树形数据接口（tree-data.json）：
确保你有一个能够提供树形数据的接口，例如一个 JSON 文件，内容格式类似下面的例子：
[
{
"id": 1,
"text": "Node 1",
"children": [
{
"id": 11,
"text": "Node 1.1"
},
{
"id": 12,
"text": "Node 1.2"
}
]
},
{
"id": 2,
"text": "Node 2",
"children": [
{
"id": 21,
"text": "Node 2.1"
},
{
"id": 22,
"text": "Node 2.2"
}
]
}
]
以上代码提供了一个简单的树形下拉框的创建示例。确保替换实际的 EasyUI 文件路径、树形数据接口以及相应的节点信息。
转载请注明出处：http://www.zyzy.cn/article/detail/13146/jQuery EasyUI