javascript - jquery 数据表编辑器 : "select" field displays option value instead of label

Question

我正在使用 jquery 的 DataTables，它确实工作得很好。那么我遇到的唯一问题是，我面临(在非编辑 View 中)选择字段的值(这是一个 id)。用户当然不想看到id。因此，我正在寻找一种可能性来配置该列，以始终显示标签属性的值。

这里有一些片段:

$(document).ready(function() {

        var table = $('#overviewTable').DataTable({
            dom: "Tfrtip",
            ajax: "/Conroller/GetTableData",
            columns: [
                { data: "Id", className: "readOnly", visible: false },
                {
                    data: "LoanTransactionId",
                    className: "readOnly readData clickable",
                    "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<a href='#'>" + oData.LoanTransactionId + "</a>");
                    }
                },
                { data: "Id", className: "readOnly" },
                { data: "property_1", className: "readOnly" },
                { data: "Priority" },
                { data: null, className: "action readOnly", defaultContent: '<a href="#">Info</a>' }
            ],
            order: [1, 'asc'],
            tableTools: {
                sRowSelect: "os",
                sRowSelector: 'td:first-child',
                aButtons: []
            }
        });

        // data reload every 30 seconds
        setInterval(function() {
            table.ajax.reload();
        }, 30000);

        editor = new $.fn.dataTable.Editor({
            ajax: "PostTable",
            table: "#overviewTable",
            fields: [
                {
                    label: "Id",
                    name: "Id"
                },
                {
                    label: "Column 1",
                    name: "property_1"
                }, 
                {
                    label: "Priority",
                    name: "Priority",
                    type: "select",
                    options: [
                        { label: "low", value: 0 },
                        { label: "mid", id: 1 },
                        { text: "high", id: 2 }
                    ]
                }
            ]
        });

        // Inline Edit - only those who are not readOnly
        $('#overviewTable').on('click', 'tbody td:not(:first-child .readOnly)', function(e) {
            editor.inline(this, {
                submitOnBlur: true
            });
        });

显示模式下的外观

编辑模式下的外观

Answer 1

请参阅 columns.render 上的文档

您想要修改优先级的列选项

首选选项:您的数据源有一个优先级为字符串的字段

这是最好的选择，因为您不希望有两个具有此业务逻辑的地方。将其排除在客户端代码之外。

此外，您还需要修改编辑器，以便从服务器动态检索所使用的选项，以使此业务逻辑也远离客户端。这留给读者作为练习。

由于您没有提供有关数据结构的详细信息，我假设它是一个对象，并且它有一个属性priorityAsString，因此使用string 渲染的选项类型。

        columns: [
            ...
            { 
              data: "Priority" ,
              render: "priorityAsString",
            },

选项 2)您编写一个函数将优先级映射到字符串

如果您无法从服务器获取数据，请执行此操作。但请记住，当优先级列表发生更改时，您将需要更新许多位置。

        columns: [
            ...
            { 
              data: "Priority" ,
              render: renderPriorityAsString,
            },
        ...

function renderPriorityAsString(priority) {
  const priorityToString = {
     0: 'low',
     1: 'med',
     2: 'high',    
  };
  return priorityToString[priority] || `${priority} does not have a lookup value`;
}