📌  相关文章
📜  jQWidgets jqxKanban itemRenderer 属性(1)

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

jQWidgets jqxKanban itemRenderer 属性

jqxKanban 是一个交互式的看板组件，它允许你通过拖放来管理任务和项目。其中的 itemRenderer 属性是用来定义当看板中的卡片被渲染时使用的函数。通过设置这个属性，你可以自定义每个卡片的外观和行为。

语法
$(selector).jqxKanban({
    itemRenderer: function(item, defaultUI, expanded) {
        // 自定义的渲染代码
    },
    // 其他属性
});
参数

这个函数接受三个参数：

  • item: 当前渲染卡片的数据对象
  • defaultUI: 一个默认的卡片 UI 对象
  • expanded: 卡片是否处于展开状态
返回值

这个函数必须返回一个带有 DOM 元素的对象，用于表示这个卡片的外观。如果你希望保留默认的外观，可以返回默认的 UI 对象。

示例

下面是一个简单的示例，展示了如何使用 itemRenderer 来为卡片添加自定义图标和标题：

$(document).ready(function () {
    // 准备数据
    var source = {
        localData: [
            { id: "1", status: "new", text: "Task 1", icon: "icon1" },
            { id: "2", status: "new", text: "Task 2", icon: "icon2" },
            { id: "3", status: "done", text: "Task 3", icon: "icon3" }
        ],
        dataType: "array",
        dataFields: [
            { name: "id", type: "string" },
            { name: "status", type: "string" },
            { name: "text", type: "string" },
            { name: "icon", type: "string" }
        ]
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    // 初始化看板
    $("#kanban").jqxKanban({
        source: dataAdapter,
        columns: [
            { text: "New", dataField: "status", filter: function (value) { return value === "new"; } },
            { text: "Done", dataField: "status", filter: function (value) { return value === "done"; } }
        ],
        itemRenderer: function (item, defaultUI) {
            // 创建一个包含图标和标题的元素
            var $content = $("<div>")
                .addClass("my-card-content")
                .append($("<div>")
                    .addClass("icon " + item.icon))
                .append($("<div>")
                    .addClass("title")
                    .text(item.text));

            // 在默认 UI 上添加自定义内容
            defaultUI.find(".jqx-kanban-item-content").append($content);

            // 返回修改后的 UI
            return defaultUI;
        }
    });
});

在这个示例中，我们为每个卡片添加了一个图标和一个标题。我们先创建了一个包含这些内容的 HTML 元素，然后将它们添加到默认的卡片 UI 内容中。最后，我们返回修改后的 UI 对象。

相关链接