📌  相关文章
📜  jQWidgets jqxDropDownList 完整参考(1)

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

jQWidgets jqxDropDownList 完整参考

概述

jQWidgets jqxDropDownList 是一款强大的下拉菜单插件，支持各种数据加载方式、多选、选择器、动态更新等功能。它是基于jQuery的UI控件，用于在Web应用程序中实现下拉菜单。

特性

  • 多种数据源加载方式：JSON、数组、CSV、XML、HTML和本地数据源。

  • 多选和勾选器

  • 动态更新DropDownList的数据

  • 支持列过滤和检索

  • 支持多语言

  • 多色主题：可自定义颜色

安装

jQWidgets都是JavaScript组件，可以使用标准JavaScript或TypeScript引入。可以从jqwidgets.com下载或使用CDN引入。

如果要使用jqxDropDownList，需要以下几步：

  1. 首先，下载jqwidgets最新版本并引入相关CSS和JavaScript文件。

  2. 在HTML代码中创建一个div元素，它将包含下拉菜单的jqxDropDownList对象。

<div id="jqxDropDownList"></div>
  1. 创建一个jqxDropDownList对象
$('#jqxDropDownList').jqxDropDownList(options);

  1. 选择DropDownList 的数据源，我们可以选择使用JSON、CSV、XML、HTML、数组或本地数据源。

  2. 定义DropDownList的样式和外观。

使用

使用jqxDropDownList的第一步是设置数据源。可以使用getData()-设置getItems()-和setSource()函数来获取和设置数据。

getData()函数将返回下拉菜单的inprocess状态，使用getItems()可以获取下拉菜单中的项，使用setSource()来设置下拉菜单的数据源。

// 设置DropDownList数据源
$('#jqxDropDownList').jqxDropDownList({
    source: ['Java', 'C#', 'Python', 'Javascript']
});

下面是一个展示如何使用jqxDropDownList的例子：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqxDropDownList</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/7.0.0/jqx-all.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/7.0.0/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/7.0.0/jqx.material.css" type="text/css" />

    <script>
        $(document).ready(function() {

            //设置数据源
            var data = ['Java', 'C#', 'Python', 'JavaScript'];
            $('#jqxDropDownList').jqxDropDownList({ source: data });
        });
    </script>

</head>
<body>
    <h2>Demo</h2>
    <div id="jqxDropDownList"></div>
</body>
</html>

显示结果如下图所示：

demo运行结果

可选项唯一化

如果需要下拉菜单中的项唯一，可以使用unique()函数。该函数将删除下拉菜单中除第一个之外的相同项目。

    // 设置相同项在下拉菜单中仅显示一次
    $('#jqxDropDownList').jqxDropDownList('unique');
多选

要启用多选，请设置下拉菜单的multiple属性为true。为了确保此选项工作正常，下拉菜单的选项必须在内部管理并始终可用。

    // 启用多选
    $('#jqxDropDownList').jqxDropDownList({
        source: ['Java', 'C#', 'Python', 'JavaScript'],
        multiple: true
    });
自定义

使用renderer()函数自定义不同状态下下拉菜单外观，例如，在悬停、选中和默认状态下，使用不同的颜色和形状。

// 自定义DropDownList的外观
$('#jqxDropDownList').jqxDropDownList({
    source: ['Java', 'C#', 'Python', 'JavaScript'],
    renderer: function (index, label, value) {
        var datarecord = this.getItem(index);
        var imgurl = 'https://www.jqwidgets.com/jquery-widgets-demo/images/' + label.toLowerCase() + '.png';
        var img = '<img height="25" width="25" src="' + imgurl + '"/>';
        var table = '<table><tr><td>' + img + '</td><td>' + label + '</td></tr></table>';

        return table;
    }
});

如果我们在如下页面上调用上述代码：

默认状态下的DropDownList

悬停时会产生以下效果：

悬停时的DropDownList

被选中时会产生以下效果：

选中时的DropDownList

事件

jqxDropDownList对象支持多种事件。一些常用的事件如下：

  • select：当下拉菜单中的项被选中时，触发该事件。

  • change：当下拉菜单中的值更改时，触发该事件。

$('#jqxDropDownList').on('change', function (event) {
    var args = event.args;
    var item = $('#jqxDropDownList').jqxDropDownList('getItem', args.index).label;

    alert('Selected Item: ' + item);
});
总结

jQWidgets jqxDropDownList 提供丰富的特性和灵活的自定义选项，是一个非常优秀的插件。开发者可以通过阅读完整文档和使用丰富的API实现强大、稳定的DropDowmList。