📌  相关文章
📜  jQWidgets jqxListBox 选择事件(1)

📅  最后修改于: 2023-12-03 14:43:24.942000             🧑  作者: Mango

jQWidgets jqxListBox 选择事件

jQWidgets jqxListBox 是一个基于 jQuery 的列表框组件，它提供了多种功能，如单选、多选、搜索、分组等。在 jqxListBox 中，可以通过选择事件来响应用户选择列表项的动作。

选择事件

选择事件是 jqxListBox 中最常用的事件之一，它会在用户选择列表项时触发。jqxListBox 提供了两个选择事件：选中事件和取消选中事件。它们分别对应用户在列表框中选中或取消选中一个或多个项时所触发的事件。

$("#listbox").on("select", function (event) {
    var args = event.args;
    var item = $("#listbox").jqxListBox("getItem", args.index);
    console.log(item.label);
});

$("#listbox").on("unselect", function (event) {
    var args = event.args;
    var item = $("#listbox").jqxListBox("getItem", args.index);
    console.log(item.label);
});

上述代码中，我们通过 on 方法为列表框绑定了 select 和 unselect 事件的处理函数。

select 事件的处理函数中，我们首先通过 event.args.index 获取用户所选中的列表项的索引值，然后通过 getItem 方法获取该项的完整信息，最后输出该项的标签。

unselect 事件的处理函数与 select 事件的处理函数类似，只是将 index 改为 key。

使用示例

下面是一个使用 select 事件的完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQWidgets jqxListBox 选择事件示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets\jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets\jqxlistbox.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/styles\jqx.base.css">
</head>
<body>
    <h1>jQWidgets jqxListBox 选择事件示例</h1>
    <div id="listbox"></div>

    <script>
        $(document).ready(function () {
            var data = [
                { label: "选项1", value: 1 },
                { label: "选项2", value: 2 },
                { label: "选项3", value: 3 }
            ];

            $("#listbox").jqxListBox({ 
                width: 200, 
                height: 170, 
                source: data, 
                multiple: true,
                checkboxes: true
            });

            $("#listbox").on("select", function (event) {
                var args = event.args;
                var item = $("#listbox").jqxListBox("getItem", args.index);
                console.log("选中了：" + item.label);
            });
        });
    </script>
</body>
</html>

上述代码中，我们首先在 HTML 文件中引入了 jQuery 和 jQWidgets jqxListBox 相关的 JavaScript 和 CSS 文件。然后在 <body> 中创建一个 <div> 作为列表框的容器。在 JavaScript 部分，我们定义了一个数据源 data，该数据源包含了三个列表项，每个列表项都包含了一个 label 和一个 value。接下来，我们通过 jqxListBox 方法初始化列表框，并将数据源 data 作为其参数。在初始化时，我们设置了列表框的宽度、高度、允许多选和显示复选框。在 select 事件处理函数中，我们输出了用户所选中的列表项的标签。

资源链接