📌  相关文章
📜  jQWidgets jqxListBox invalidate() 方法(1)

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

jQWidgets jqxListBox invalidate() 方法介绍

jQWidgets是一个面向企业级Web应用程序的专业JavaScript框架，提供了包括数据可视化、表单、布局、导航等各种组件，极大地提高了Web应用程序开发效率。

jqxListBox是jQWidgets提供的一个组件，它是一个可定制化的列表框，支持多选、虚拟滚动、自定义模板等功能。其中，invalidate() 方法是其中一个常用的方法。

方法介绍

**invalidate() **方法是用于重绘jqxListBox的，一般在修改数据后需要手动调用该方法，以便更新列表框中的数据。

语法
$("#listBox").jqxListBox('invalidate');
参数

该方法不接受任何参数。

返回值

该方法不返回任何值。

实例演示

下面是一个使用invalidate()方法的实例演示。

<!DOCTYPE html>
<html>
<head>
    <title>jqxListBox - invalidate方法示例</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/6.2.0/jqxcore.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/6.2.0/jqxbuttons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/6.2.0/jqxscrollbar.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/6.2.0/jqxlistbox.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/6.2.0/jqx.base.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/6.2.0/jqx.bootstrap.css"/>
    <script>
        $(document).ready(function () {
            var source =
                [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha",
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Doppio",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
                ];
           $("#listBox").jqxListBox({
                source: source,
                width: '100%',
                height: '300px',
                checkboxes: true
            });
            $("#addItem").on('click', function(){
              //模拟添加数据
              source.push("New Item")
              //重绘列表框
              $('#listBox').jqxListBox('invalidate');
            })
        });
    </script>
</head>
<body>
    <h2>jqxListBox - invalidate方法示例</h2>
    <div id="listBox">
    </div>
    <button id="addItem">添加新数据</button>
</body>
</html>

以上示例中，我们通过按钮点击事件模拟添加数据，然后手动调用invalidate()方法重绘列表框，以更新列表框中的数据。

参考链接