jQWidgets jqxKanban addItem()方法

jqxKanban 是 jQWidgets 提供的一种看板控件，用于在 Web 应用程序中创建看板。addItem() 方法是 jqxKanban 控件一个方法，用于向看板中添加一个新的卡片。以下是 jqxKanban 的 addItem() 方法的详细说明：

方法

addItem() 方法用于向看板中添加一个新的卡片。

// 添加一个新的卡片
$("#jqxKanban").jqxKanban("addItem", {
    text: "New Card",
    state: "new",
    tags: ["tag1", "tag2"]
});

示例

以下是两个示例，演示如何使用 addItem() 方法向 jqxKanban 控件中添加新的卡片。

示例 1

在此示例中，我们创建了一个 jqxKanban 控件，并使用 addItem() 方法向看板中添加了一个新的卡片。

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

        // 添加一个新的卡片
        $("#jqxKanban").jqxKanban("addItem", {
            text: "New Card",
            state: "new",
            tags: ["tag1", "tag2"]
        });
    });
</script>

示例 2

在此示例中，我们创建了一个 jqxKanban 控件，并使用 addItem() 方法向看板中添加了一个新的卡片。我们还使用 getItem() 方法获取了新添加的卡片的信息，并将其输出到控制台。

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

        // 添加一个新的卡片
        $("#jqxKanban").jqxKanban("addItem", {
            text: "New Card",
            state: "new",
            tags: ["tag1", "tag2"]
        });

        // 获取新添加的卡片的信息
        var newItem = $("#jqxKanban").jqxKanban("getItem", $("#jqxKanban").find(".jqx-kanban-item").last().attr("data-id"));
        console.log(newItem);
    });
</script>

以上是 jqxKanban 的 addItem() 方法的详细说明，以及两个示例说明。