combotree可输入搜索
时间: 2023-05-12 12:01:59 浏览: 65
Combotree是一种常用的组合控件,它可以同时具备下拉选框和树形结构的功能。而其中的输入搜索功能,指的是在下拉选框的输入框中可以自由输入内容进行搜索筛选的操作。
对于一些需要进行分类、归类的场景,Combotree的输入搜索功能尤其实用。例如,工资单套帐系统需要对员工进行分类筛选,可以通过输入搜索实现快速筛选工资单,节省大量的时间和精力。
在Combotree的输入搜索操作中,用户可以输入任意内容进行模糊匹配,而无需对类别或结构进行精准筛选,进一步加速了搜索操作。同时,Combotree的输入搜索功能还可以通过自定义参数对搜索结果进行相关性排序,提高匹配的准确性。
总体来说,Combotree的输入搜索功能更加科学、智能,给我们带来更多方便、快捷、高效的使用体验。
相关问题
easyui-combotree
easyui-combotree是一种基于EasyUI框架的组件,用于在网页中创建一个带有树状结构的下拉菜单。它可以用于选择树状结构中的某个节点。通过设置相关参数,可以实现默认选中多项、选择节点以及获取节点信息等功能。你可以使用HTML代码来创建一个easyui-combotree,如下所示:
```
<input id="ProjectTree" class="easyui-combotree" style="width: 300px;" />
```
在后端代码中,你可以通过获取区域节点信息的方式来提供easyui-combotree所需的数据。例如,在后端代码中可以使用以下方法来获取三级区域菜单的数据:
```csharp
public ActionResult GetThreeRegionTree(string parentRegionCode = "") {
List<TreeRegionOne> treeOneList = new List<TreeRegionOne>();
var treeListModel = Sys_RegionServer.GetRegionChildList(parentRegionCode);
foreach (var oneTreeItem in treeListModel) {
TreeRegionOne treeOne = new TreeRegionOne();
treeOne.id = Convert.ToInt32(oneTreeItem.Value);//下拉框value值
treeOne.text = oneTreeItem.Text;//显示文本
treeOne.state = "open";//显示的是文件夹样式还是文档样式,也就是是否最后一级
//是否有子节点
var childList = Sys_RegionServer.GetRegionChildList(oneTreeItem.Value);
if (childList != null && childList.Count() > 0) {
treeOne.state = "closed";
}
treeOneList.Add(treeOne);
}
return Json(treeOneList);
}
```
上述代码中,通过遍历区域节点信息,构建一个TreeRegionOne对象列表,包含了节点的id、显示文本和是否有子节点等信息。最后,通过Json方法返回这个列表作为easyui-combotree的数据源。这样,easyui-combotree就会显示出相应的树结构,并且可以根据你的需求进行选择和操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [easyui combotree(树形下拉框)使用收获总结](https://blog.csdn.net/weixin_44311648/article/details/118654862)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [easyui学习记录:combotree的使用](https://blog.csdn.net/weixin_30319153/article/details/97892869)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
easyui ComboTree模糊查询
好的,您可以直接使用easyui提供的filter方法来实现ComboTree的模糊查询功能。具体步骤如下:
1. 首先给ComboTree添加一个text属性,用于用户输入查询关键字。
2. 然后在onBeforeLoad事件中添加filter函数,该函数会将符合关键字的节点筛选出来并返回给ComboTree。
3. 在filter函数中使用RegExp方法对节点文本进行模糊匹配,将匹配成功的节点添加到一个新数组中。
4. 最后将新的节点数组返回给ComboTree,就实现了模糊查询的功能。
注意,提供的代码仅供参考,需要根据实际情况进行修改和调整。
示例代码如下:
```
$('#comboTree').combotree({
url: 'data.php',
text: '请输入关键字查询',
onBeforeLoad: function(node, param) {
if (node) { // 如果当前节点不是根节点
param.id = node.id;
}
param.filter = function(q, row) {
var opts = $(this).combotree('options');
return row[opts.textField].indexOf(q) >= 0;
}; // 添加filter函数
}
});
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)