首先，你需要在前端页面引入
Select2 插件和 jQuery 库。在 HTML 中添加一个
Select2 的
下拉框，并
设置 id 和 name 属性：
```html
<select id="tree-select" name="tree-select"></select>
```
然后，在 JavaScript 中初始化
Select2 插件，并使用 Ajax 加载树状数据：
```javascript
$("#tree-select").
select2({
placeholder: "请选择",
allowClear: true,
ajax: {
url: "/tree/search",
dataType: "json",
delay: 250,
data: function(params) {
return {
q: params.term, // 搜索关键字
page: params.page // 分页页码
};
},
process
Results: function(data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count // 是否还有更多数据
}
};
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
},
minimumInputLength: 1, // 最小输入长度
template
Result: format
Result, // 格式化
下拉框
选项
templateSelection: formatSelection // 格式化选中项
});
```
上面的代码中，我们使用了 Ajax 加载树状数据，后端的 Java 代码需要提供一个 `/tree/search` 的接口，接收搜索关键字和分页参数，返回 JSON 格式的数据。下面是一个简单的 Java 实现：
```java
@RequestMapping("/tree/search")
@ResponseBody
public Map<String, Object> searchTree(@RequestParam("q") String keyword, @RequestParam("page") int page) {
Map<String, Object>
result = new HashMap<>();
List<Node> nodes = nodeService.searchNodes(keyword, page, 30); // 查询节点数据
result.put("items", nodes);
result.put("total_count", nodeService.countNodes(keyword)); // 查询总数
return
result;
}
```
其中，`nodeService.searchNodes` 和 `nodeService.countNodes` 是自己实现的查询方法，返回节点列表和总数。最后，我们需要编写两个函数 `format
Result` 和 `formatSelection` 分别用于格式化
下拉框
选项和选中项的样式。
```javascript
function format
Result(node) {
if (node.loading) {
return node.text;
}
var markup = "<span class='
select2-
result-tree-node'>" + node.text + "</span>";
if (node.children && node.children.length > 0) {
markup += "<ul>";
for (var i = 0; i < node.children.length; i++) {
markup += "<li>" + format
Result(node.children[i]) + "</li>";
}
markup += "</ul>";
}
return markup;
}
function formatSelection(node) {
return node.text;
}
```
上面的代码中，`format
Result` 函数使用递归方式生成树状结构的 HTML，`formatSelection` 函数直接返回选中项的文本。至此，树状搜索
下拉框的实现就完成了。
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
