jQWidgets jqxTree focus() 方法(1)

📌 相关文章

📜 jQWidgets jqxTree focus() 方法(1)

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

jQWidgets jqxTree focus() 方法

focus() 方法用于将焦点设置在 jQWidgets jqxTree 控件上。通过该方法，可以设置当前被选择的节点，以便进行一些操作。

语法

$('#jqxTree').jqxTree('focus', nodeId);

参数

nodeId：必填项，类型为string，表示要选择的节点 id。

返回值

该方法没有返回值。

示例

以下是一个简单的示例，展示如何使用 focus() 方法来选择 jQWidgets jqxTree 控件中的节点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQWidgets jqxTree focus() 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!--引入 jQWidgets jqxTree 相关的 js 和 css-->
    <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/jqxcore.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxtree.js"></script>
</head>
<body>
    <div id="jqxTree"></div>

    <script>
        $(function () {
            // 创建 jQWidgets jqxTree 控件
            let treeData = [
                { id: '1', parentid: '0', label: 'Node 1' },
                { id: '2', parentid: '0', label: 'Node 2' },
                { id: '3', parentid: '1', label: 'Node 1.1' },
                { id: '4', parentid: '1', label: 'Node 1.2' },
                { id: '5', parentid: '2', label: 'Node 2.1' },
                { id: '6', parentid: '2', label: 'Node 2.2' }
            ];

            $('#jqxTree').jqxTree({
                source: treeData,
                width: '250px'
            });

            // 通过 focus() 方法选择第一个节点
            $('#jqxTree').jqxTree('focus', '1');
        });
    </script>
</body>
</html>

运行该页面后，jQWidgets jqxTree 控件会被创建并显示，同时第一个节点“Node 1”会被选中高亮。