jQWidgets jqxKanban资源属性

jQWidgets jqxKanban资源属性详解

jQWidgets jqxKanban 是一种看板控件，用于在 Web 应用程序中创建看板。source 属性是 jqxanban 控件的一个属性，用于指定看板的数据源。本文将详细讲解 source 属性的使用方法，并提供两个示例说明。

属性

source 属性用于指定看板的数据源。该属性接受一个数据适配器作为参数，数据适配器用于将数据源转换为 jqxKanban 控件所需的格式。

// 创建数据适配器
var source = {
    datatype: "json",
   fields: [
        { name: "id", type: "string" },
        { name: "status", type: "string" },
        { name: "text", type: "string" }
    ],
    url: "data.json"
};

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

在上述代码中，我们创建了一个数据适配器，并将其作为参数传递给 jqxanban 控件的 source 属性。在该示例中，我们使用 json 数据类型，并指定了数据源的字段名称和类型。

示例

以下是两个示例，演示如何使用 source 属性。

示例 1

在此示例中，我们创建了 jqxKanban 控件，并使用 source 属性指定了数据源。在该示例中，我们使用了一个简单的 JSON 数据源。

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

<script>
    $(document).ready(function () {
        // 创建数据适配器
        var source = {
            datatype: "json",
            datafields: [
                { name: "id", type: "string" },
                { name: "status", type: "string" },
                { name: "text", type: "string" }
            ],
            localdata: [
                { id: "1", status: "new", text: "Task 1" },
                { id: "2", status: "new", text: "Task 2" },
                { id: "3", status: "work", text: "Task 3" },
                { id: "4", status: "", text: "Task 4" }
            ]
        };

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

在上述代码中，我们创建了一个 jqxKanban 控件，并使用 source 属性定了数据源。在该示例中，我们使用了一个简单的 JSON 数据源。

示例 2

在此示例中，我们创建了一个 jqxKanban 控件，并使用 source 属性指定了数据源。在该示例中，我们使用了一个远程数据源。

<div id="jqxKan"></div>

<script>
    $(document).ready(function () {
        // 创建数据适配器
        var source = {
            datatype: "json",
            datafields: [
                { name: "id", type: "string" },
                { name: "status", type: "string" },
                { name: "text", type: "string" }
            ],
            url: "data.json"
        };

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

在上述代码中，我们创建了一个 jqxKanban 控件，并使用 source 属性指定了数据源。在该示例中，我们使用了一个远程数据源。

以上是 jqxKanban 的 source 属性的详细，以及两个示例说明。在示例中，我们使用 source 属性指定了看板的数据源。