jQuery DataTables编辑器：“选择”字段显示选项值而不是标签

Question

我正在使用jquery的DataTables，它确实很好用。 然后，我得到的唯一问题是，我面对（在非编辑视图中）select字段的值（它是一个id）。 用户当然不希望看到ID。 因此，我正在寻找一种可能以始终显示label属性值的方式配置该列的可能性。

这里有一些片段：

$(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

请参阅关于column.render的文档

您要修改列选项的priority

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

这是最好的选择，因为您不想在此业务逻辑中占据两个位置。 将其保留在客户端代码之外。

此外，您还将需要修改编辑器，以便已从服务器动态检索使用的选项，以使该业务逻辑也不受客户端的影响。 这留给读者练习。

由于您没有提供有关数据结构看起来像什么的详细信息，因此我假设它是一个对象，并且具有属性priorityAsString因此请使用render的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`;
}

Answer 2

"render": function ( data, type, full ) { return label;}