博客

jQWidgets jqxKanban columnAttrClicked事件

  • Post category:jquery

jqxKanban 是 jQWidgets 提供的一种看板控件，用于在 Web 应用程序中创建看板。columnAttrClicked 事件是 jqxKanban 控件一个事件，用于在看板列属性被单击时触发。以下是 jqxKanban 的 columnAttrClicked 事件的详细说明：

事件

columnAttrClicked 事件用于在看板列属性被单击时触发。

// 监听 columnAttrClicked 事件
$("#jqxKanban").on("columnAttrClicked", function (event) {
    var args = event.args;
    var column = args.column;
    var attribute = args.attribute;
    var item = args.item;

    console.log("Column: " + column.text + ", Attribute: " + attribute + ", Item: " + item.text);
});

示例

以下是两个示例，演示如何使用 columnAttrClicked 事件在 jqxKanban 控件中监听看板列属性的单击事件。

示例 1

在此示例中，我们创建了一个 jqxKanban 控件，并使用 columnAttrClicked 事件监听看板列属性的单击事件。当看板列属性被单击时，我们将列的文本、属性和卡片的文本输出到控制台。

<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" }
            ]
        });

        // 监听 columnAttrClicked 事件
        $("#jqxKanban").on("columnAttrClicked", function (event) {
            var args = event.args;
            var column = args.column;
            var attribute = args.attribute;
            var item = args.item;

            console.log("Column: " + column.text + ", Attribute: " + attribute + ", Item: " + item.text);
        });
    });
</script>

示例 2

在此示例中，我们创建了一个 jqxKanban 控件，并使用 columnAttrClicked 事件监听看板列属性的单击事件。当看板列属性被单击时，我们将列的文本、属性和卡片的文本输出到一个 div 元素中。

<div id="jqxKanban"></div>
<div id="output"></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" }
            ]
        });

        // 监听 columnAttrClicked 事件
        $("#jqxKanban").on("columnAttrClicked", function (event) {
            var args = event.args;
            var column = args.column;
            var attribute = args.attribute;
            var item = args.item;

            // 将列的文本、属性和卡片的文本输出到一个 div 元素中
            $("#output").html("Column: " + column.text + ", Attribute: " + attribute + ", Item: " + item.text);
        });
    });
</script>

以上是 jqxKanban 的 columnAttrClicked 事件的详细说明，以及两个示例说明。在示例1中，我们创建了一个 jqxKanban 控件，并使用 columnAttrClicked 事件监听看板列属性的单击事件。当看板列属性被单击时，我们将列的文本、属性和卡片的文本输出到控制台。在示例2中，我们创建了一个 jqxKanban 控件，并使用 columnAttrClicked 事件监听看板列属性的单击事件。当看板列属性被单击时，我们将列的文本、属性和卡片的文本输出到一个 div 元素中。

Tags: