错误：无法读取未定义的属性“样式”

Question

我正在尝试通过对控制器的 ajax 调用加载数据表。 在调用 ajax 时 .. 它会执行并返回数据，但在控制台中会出现“无法读取未定义的属性 'style'”这样的错误。

我正在尝试以下代码

        var editor; // use a global for the submit and return data rendering in the examples

        //$(document).ready(function () {
        debugger;
        editor = new $.fn.dataTable.Editor({
            ajax: "PRC/PRCGenerate",
            table: "#example",
            fields: [{
                label: "PQTY",
                name: "PQTY"
            }, {
                label: "PRCReadyDT",
                name: "PRCReadyDT"
            }, {
                label: "REMARKS:",
                name: "REMARKS"
            }
            ]
        });

        // Activate an inline edit on click of a table cell
        $('#example').on('click', 'tbody td.editable', function (e) {
            editor.inline(this);
        });

        $('#example').DataTable({
            dom: 'Bfrtip',
            ajax: 'PRC/PRCGenerate',
            columns: [
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
                { data: 'OANO' },
                { data: 'ID' },
                { data: 'PONO' },
                { data: 'POLI' },
                { data: 'MOULDCODE' },
                { data: 'DESCRIPTION' },
                { data: 'Drg' },
                { data: 'Rev' },
                { data: 'METALCODE' },
                { data: 'METALNAME' },
                { data: 'WEIGHT' },
                { data: 'QTY' },
                { data: 'PQTY', className: 'editable' },
                { data: 'Machining' },
                { data: 'PRC' },
                { data: 'DELIVERYDT' },
                { data: 'PRCReadyDT', className: 'editable' },
                { data: 'PRCNO' },
                { data: 'REMARKS', className: 'editable' }
                //render: $.fn.dataTable.render.number(',', '.', 0, '$'),
            ],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
                { extend: 'remove', editor: editor }
            ]
        });
        //});

<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@model IEnumerable<RedICMVC.Models.sp_PRC_Record_Result>
<div class="card">
    <table id="example" class="table display">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.OANO)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ID)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PONO)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.POLI)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.MOULDCODE)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.DESCRIPTION)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Drg)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Rev)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.METALCODE)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.METALNAME)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.WEIGHT)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.QTY)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PQTY)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Machining)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PRC)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.DELIVERYDT)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PRCReadyDT)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PRCNO)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.REMARKS)
                </th>
            </tr>
        </thead>
    </table>
</div>

并且输出显示如下错误 我该如何解决这个问题。？ 请帮我.. 在此先感谢。:-)

Answer 1

您似乎正在尝试在数据表创建 td 元素之前对其进行查询。您可以将表生成后需要运行的任何代码添加到 initComplete 回调中，如下所示：

$('#example').DataTable({
        dom: 'Bfrtip',
        ajax: 'PRC/PRCGenerate',
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: 'OANO' },
            { data: 'ID' },
            { data: 'PONO' },
            { data: 'POLI' },
            { data: 'MOULDCODE' },
            { data: 'DESCRIPTION' },
            { data: 'Drg' },
            { data: 'Rev' },
            { data: 'METALCODE' },
            { data: 'METALNAME' },
            { data: 'WEIGHT' },
            { data: 'QTY' },
            { data: 'PQTY', className: 'editable' },
            { data: 'Machining' },
            { data: 'PRC' },
            { data: 'DELIVERYDT' },
            { data: 'PRCReadyDT', className: 'editable' },
            { data: 'PRCNO' },
            { data: 'REMARKS', className: 'editable' }
            //render: $.fn.dataTable.render.number(',', '.', 0, '$'),
        ],
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit', editor: editor },
            { extend: 'remove', editor: editor }
        ],
        initComplete: function () {
            editor = new $.fn.dataTable.Editor({
                ajax: "PRC/PRCGenerate",
                table: "#example",
                fields: [{
                    label: "PQTY",
                    name: "PQTY"
                }, {
                    label: "PRCReadyDT",
                    name: "PRCReadyDT"
                }, {
                    label: "REMARKS:",
                    name: "REMARKS"
                }
                ]
            });

            // Activate an inline edit on click of a table cell
            $('#example').on('click', 'tbody td.editable', function (e) {
                editor.inline(this);
            });
        }
    });

除了 initComplete 之外，您还可以使用一些其他事件，它们可能适用于您的用例，可以在 here 找到它们。您可能还想考虑使用绘图事件，这取决于您的表格有多大以及您是否使用分页。