jQWidgets jqxKanban columnCollapsed 事件

jqxKanban 是 jQWidgets 提供的一种看板控件，用于在 Web 应用程序中创建看板。columnCollapsed 事件是 jqxKanban 控件一个事件，用于在看板中的列被折叠时触发。

事件

columnCollapsed 事件用于在看板中的列被折叠时触发。

// 监听 columnCollapsed 事件
$("#jqxKanban").on("columnCollapsed", function (event) {
    console.log("Column " + event.args.dataField + " collapsed.");
});

在上述代码中，我们使用 on() 方法监听 columnCollapsed 事件。当事件触发时，我们将被折叠的列的 dataField 输出到控制台。

示例

以下是两个示例，演示如何使用 columnCollapsed 事件在看板中的列被折叠时触发。

示例 1

在此示例中，我们创建了一个 jqxKanban 控件，并使用 columnCollapsed 事件在看板中的列被折叠时触发。当事件触发时，我们将被折叠的列的 dataField 输出到控制台。

<div id="jqxKanban"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxKanban 控件
        $("#jqxKanban").jqxKanban({
            source: new $.jqx.dataAdapter(source),
            columns: [
                { text: "Backlog", dataField: "new" },
                { text: "In Progress", dataField: "work" },
                { text: "Done", dataField: "done" }
            ]
        });

        // 监听 columnCollapsed 事件
        $("#jqxKanban").on("columnCollapsed", function (event) {
            console.log("Column " + event.args.dataField + " collapsed.");
        });
    });
</script>

在上述代码中，我们创建了一个 jqxKanban 控件，并使用 columnCollapsed 事件在看板中的列被折叠时触发。当事件触发时，我们将被折叠的列的 dataField 输出到控制台。

示例 2

在此示例中，我们创建了一个 jqxKanban 控件，并使用 columnCollapsed 事件在看板中的列被折叠时触发。我们还使用 expandColumn() 方法展开了被折叠的列。

<div id="jqxKanban"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxKanban 控件
        $("#jqxKanban").jqxKanban({
            source: new $.jqx.dataAdapter(source),
            columns: [
                { text: "Backlog", dataField: "new" },
                { text: "In Progress", dataField: "work" },
                { text: "Done", dataField: "done" }
            ]
        });

        // 监听 columnCollapsed 事件
        $("#jqxKanban").on("columnCollapsed", function (event) {
            console.log("Column " + event.args.dataField + " collapsed.");
            // 展开被折叠的列
            $("#jqxKanban").jqxKanban("expandColumn", event.args.dataField);
        });
    });
</script>

在上述代码中，我们创建了一个 jqxKanban 控件，并使用 columnCollapsed 事件在看板中的列被折叠时触发。当事件触发时，我们将被折叠的列的 dataField 输出到控制台，并使用 expandColumn() 方法展开被折叠的列。

以上是 jqxKanban 的 columnCollapsed 事件的详细说明，以及两个示例说明。在示例中，我们创建了一个 jqxKanban 控件，并使用 columnCollapsed 事件在看板中的列被折叠时触发。当事件触发时，我们将被折叠的列的 dataField 输出到控制台。在示例2中，我们还使用 expandColumn() 方法展开了被折叠的列。