Question

我在项目中使用了datatables插件，并且在使用免费的cellEdit。自从应用以来，我已经添加了此错误Cannot read property 'MakeCellsEditable' of undefined。我试图在此post中添加一个table.MakeCellsEditable('destroy');，但是它不起作用。

HMTL脚本：

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="{{ asset('js/plugins/DataTables/dataTables.altEditor.free.js') }}"></script>
<script src="{{ asset('js/plugins/DataTables/dataTables.cellEdit.js') }}"></script>

JS：

var table;

table = $('#datatable').DataTable({
    "sPaginationType" : "full_numbers",
    "createdRow" : function ( row, data_use, dataIndex ) {
        $(row).attr('id', 'line-' + dataIndex);
    },
    'columnDefs' : [{
        'targets': "_all",
        'createdCell' : function (td, cellData, rowData, row, col) {
              $(td).attr('id', 'cell-' + col);
         }
    }],
    data : data_use,
    columns : column_name,
    dom : 'Bfrtip',
    select : 'single',
    responsive : true,
    altEditor : true,
    destroy : true,
    searching: true,
    buttons : [{
        extend : 'selected',
        text : 'Edit',
        name : 'edit'
    }],
});

table.MakeCellsEditable({
       "onUpdate" : myCallbackFunction,
});

function myCallbackFunction (updatedCell, updatedRow, oldValue) {
        console.log("The new value for the cell is: " + updatedCell.data());
        console.log("The old value for that cell was: " + oldValue);
        console.log("The values for each cell in that row are: " + updatedRow.data());
}

解决方案：

在我的项目中，单击按钮时会显示该表，因此尚未创建table变量，为解决此问题，我添加了s：

$("#datatable").on("click", function () {
    table.MakeCellsEditable({
        "onUpdate" : myCallbackFunction,
        "columns" : [2],
        "inputTypes" : [{
            "column" : 2,
            "type" : "number",
            "option" : null,
        }],
    });
});

Answer 1

看来$('#datatable').DataTable({...})不起作用。您是否通过html或js将datatbles插件添加到项目中？

Answer 2

如果未正确导入库，则可能导致此问题。尝试console.log(table)以确保已正确导入。

如何修复'无法读取属性'MakeCellsEditable'的未定义'错误

2 个答案: