jquery DataTables 编辑器："select" 字段显示选项值而不是标签

Question

我正在使用 jquery 的 DataTables，它确实工作得很好。然后我遇到的唯一问题是，我正面临（在非编辑视图中）select-字段（这是一个 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

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

Answer 2

请参阅 columns.render

上的文档

您想修改 priority

的列选项

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

这是最佳选择，因为您不希望有两个地方具有此业务逻辑。使其远离客户端代码。

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

的练习

因为你没有提供你的数据结构的详细信息，我假设它是一个对象，并且它有一个属性 priorityAsString 所以使用 string 选项类型render.

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

jquery DataTables 编辑器："select" 字段显示选项值而不是标签

jquery DataTables Editor: "select" field displays option value instead of label

javascript

jquery

datatables