色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery datatable 編輯行

傅智翔2年前10瀏覽0評論

JQuery DataTable是一款非常強大的JS表格插件,它可以快速而方便地處理數據表格的各種操作。其中,編輯行操作尤其常用,本文將帶領大家深入學習如何使用JQuery DataTable進行行編輯。

首先,我們需要使用datatable的編輯插件。具體示例如下:

var oTable = $('#myTable').dataTable();
var oTable2 = $('#myTable2').dataTable();
var oTable3 = $('#myTable3').dataTable({
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit",   "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
});

以上代碼中,“editor_create”、“editor_edit”和“editor_remove”為編輯插件,我們在使用datatable時需調用這些插件提供的方法來進行編輯功能的實現。

接下來,讓我們看一下如何使用以上插件實現行編輯。我們可以使用以下代碼生成編輯表格:

var editor = new $.fn.dataTable.Editor( {
"ajax": "../php/staff.php",
"table": "#example",
"fields": [ {
"label": "First name:",
"name": "first_name"
}, {
"label": "Last name:",
"name": "last_name"
}, {
"label": "Position:",
"name": "position"
}, {
"label": "Office:",
"name": "office"
}, {
"label": "Extension:",
"name": "extn"
}, {
"label": "Start date:",
"name": "start_date",
"type": "datetime"
}, {
"label": "Salary:",
"name": "salary"
}
]
} );

以上代碼中,我們使用了datatable.editor的構造函數方法生成一個可以編輯行的表格。其中,“ajax”為表格提交時的方法,具體可以根據項目需求進行設置;“table”為要編輯的表格的ID;“fields”為要編輯的行的各個字段,其中“label”為編輯表單中字段的名稱,“name”為表格中對應的字段名。

最后,我們還需要為表格綁定編輯事件,使用戶可以在表格上進行編輯操作。以下是一個示例代碼:

$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
} );

以上代碼中,我們使用了JQuery的“on”事件綁定方法,為表格綁定了“click”事件,當用戶點擊表格中除第一個單元格以外的單元格時,會調用“editor.inline()”方法進入編輯狀態。

至此,我們已經學習了JQuery DataTable的行編輯功能的實現方法。希望本文對大家的開發工作有所幫助。