jQWidgets jqxTree incrementalSearch 属性(1)

📌 相关文章

📜 jQWidgets jqxTree incrementalSearch 属性(1)

📅 最后修改于: 2023-12-03 15:02:21.517000 🧑 作者: Mango

jQWidgets jqxTree incrementalSearch属性介绍

概述

jQWidgets jqxTree是一个基于jQuery的可扩展、交互式的TreeView控件，可以轻松的构建一个复杂的树形结构，并且支持大量的功能，例如拖拽、选中、展开、收缩等。

其中，incrementalSearch属性是一个重要的属性，可以在树形控件中实现增量搜索功能，能够通过用户输入的字符快速搜索到匹配的结果。

语法

$('#jqxTree').jqxTree({
    incrementalsearch: true,
    searchMode: "startswithignorecase",
    searchValue: ""
});

参数

incrementalSearch: boolean - 是否开启增量搜索，默认为false
searchMode: string - 搜索匹配模式。可选值为'startswithignorecase'，'containsignorecase'，'equalsignorecase'。默认为'startswithignorecase'。
searchValue: string - 搜索关键字，默认为空字符串。

代码示例

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxTree incrementalSearch Demo</title>
    <link rel="stylesheet"
          href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css"
          type="text/css"/>
    <script type="text/javascript"
            src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
</head>
<body>
<div id="jqxTree"></div>
<script type="text/javascript">

    var data = [
        {
            "id": "1",
            "parentid": "0",
            "text": "Root"
        },
        {
            "id": "2",
            "parentid": "1",
            "text": "Node 1"
        },
        {
            "id": "3",
            "parentid": "1",
            "text": "Node 2"
        },
        {
            "id": "4",
            "parentid": "2",
            "text": "Node 1.1"
        },
        {
            "id": "5",
            "parentid": "2",
            "text": "Node 1.2"
        },
        {
            "id": "6",
            "parentid": "3",
            "text": "Node 2.1"
        },
        {
            "id": "7",
            "parentid": "3",
            "text": "Node 2.2"
        }
    ];

    $('#jqxTree').jqxTree({
        source: data,
        height: 400,
        width: 200,
        incrementalsearch: true,  // 开启增量搜索
        searchMode: 'startswithignorecase',  // 设置搜索模式
        searchValue: ''  // 设置初始搜索值
    });
</script>
</body>
</html>

在上述代码中，我们通过设置incrementalSearch属性开启了增量搜索功能，并指定了搜索模式为'startswithignorecase'。运行上述代码可以看到生成的树形控件左侧会有一个搜索框，用户可以在其中输入关键字来实现增量搜索。

总结

在JQWidgets jqxTree控件中，incrementalSearch属性是实现搜索功能的重要属性，可以使用户快速找到所需的节点。其使用非常简单，只需设置incrementalSearch为true并指定搜索模式和搜索值即可。