Question

我正在使用jquery的DataTables，它真的很棒。然后我遇到的唯一问题是，我面对（在非编辑视图中）select-field的值（这是一个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

请参阅columns.render

上的文档

您想要修改priority

的列选项

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

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

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

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

render

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

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

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

Answer 2

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

jquery DataTables编辑器：＆＃34;选择＆＃34;字段显示选项值而不是标签

2 个答案: