Javascript jquery数据表编辑器：“选择”字段显示选项值而不是标签

我使用的是jquery的DataTables，它工作得非常好。然后我得到的唯一问题是，我在非编辑视图中面临选择字段的值，它是一个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
            });
        });

它在显示模式下的外观

它在编辑模式下的外观

请参阅上的文档

您想修改列选项的优先级

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

这是最好的选择，因为您不希望有两个具有这种业务逻辑的地方。不要让它出现在客户端代码中

此外，您还需要修改编辑器，以便从服务器动态检索所使用的选项，从而将此业务逻辑也排除在客户端之外。这是留给读者的练习

由于您没有提供有关数据结构外观的详细信息，因此我假设它是一个对象，并且它有一个属性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`;
}

---

不完全确定你想做什么。我不知道你这样说是什么意思：我在非编辑视图中，选择字段的值是一个隐藏列的id，非常简单，但不确定你想做什么。我不想隐藏列。当我没有处于内联编辑模式时，我会看到下拉列表，这是完全正确的。但在显示模式下，dataTable会显示id，而不是标签值。。。所以我根本不想看到id…你有没有想过？是的，我当时用的是Bae的option 2渲染功能。希望有帮助！

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

        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`;
}