tabulator 通过设置列定义切换编辑与非编辑状态

//new column definition array
 var newColumns = [
     {title:"Name", field:"name", sorter:"string", width:200},
     {title:"Age", field:"age", sorter:"number", hozAlign:"right", formatter:"progress"},
     {title:"Height", field:"height", formatter:"star", hozAlign:"center", width:100},
     {title:"Favourite Color", field:"col", sorter:"string"},
     {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
 ],

table.setColumns(newColumns) //overwrite existing columns with new columns definition array

        <div>
            <button id="edit-table">Edit Table</button>
        </div>
        <div>
            <button id="cancel-edit-table">Cancel Edit Table</button>
        </div>

            document.getElementById("edit-table").addEventListener("click", function () {
                var newColumns = [
                    {formatter: "rowSelection", titleFormatter: "rowSelection", headerSort: false, cellClick: function (e, cell) {
                            cell.getRow().toggleSelect();
                        }},
                    {
                        title: "emp_name",
                        field: "emp_name",
                        sorter: "string",
                        headerFilter: "input",
                        editor: "input",
                    },
                    {
                        title: "email",
                        field: "email",
                        sorter: "string",
                        headerFilter: "input",
                        editor: "input", },
                    {
                        title: "gender",
                        field: "gender",
                        sorter: "string",
                        headerFilter: "input",
                        editor: "select",
                        editorParams: {
                            values: {
                                "male": "male",
                                "female": "female",
                            }},
                    },
                    {
                        title: "salary",
                        field: "salary",
                        sorter: "string",
                        headerFilter: "input",
                        editor: "input", },
                    {
                        title: "city",
                        field: "city",
                        sorter: "string",
                        headerFilter: "input",
                        editor: "input",
                    }
                ];
                table.setColumns(newColumns);
            });
            document.getElementById("cancel-edit-table").addEventListener("click", function () {
                var oldColumns = [
                    {
                        title: "emp_name",
                        field: "emp_name",
                        sorter: "string",
                        headerFilter: "input",
                    },
                    {
                        title: "email",
                        field: "email",
                        sorter: "string",
                        headerFilter: "input",
                    },
                    {
                        title: "gender",
                        field: "gender",
                        sorter: "string",
                        headerFilter: "input",
                    },
                    {
                        title: "salary",
                        field: "salary",
                        sorter: "string",
                        headerFilter: "input",
                    },
                    {
                        title: "city",
                        field: "city",
                        sorter: "string",
                        headerFilter: "input",
                    },
                ];
                table.setColumns(oldColumns);
            });