背景

ERP軟件中，能進行行內編輯的表單是常用功能，行內編輯功能能讓用戶在表格中自己填寫、修改、刪除數據或者選擇數據，可以說表格控件是ERP軟件的核心控件，而行內編輯功能是核心中的關鍵。

本文會繼續接著上一篇文章的介紹繼續增加功能。

editor同樣支持行內編輯，并且只需要幾句代碼即可，首先開啟行內編輯功能：

$('#example').on('click', 'tbody td.Editor', function (e) { //在表格中對打上Editor標簽的列才能開啟行內編輯功能editor.inline(this, { onBlur: 'submit' });//在修改數據后點擊任意處即可關閉表單保存修改后的數據 });

然后在datatable的初始化中，對需要進行行內編輯的列打上Editor標記，如下圖所示：

? ? ? ? ? ? ? ??

?

---

?完成上述兩個步驟后，看下頁面效果：

對Position字段進行編輯：

?

行內單選框可以選擇性別：

?

行內下拉框：

行內日期選擇：

?

---

因為是行內編輯，可以去掉表格左上角的其兩個按鈕：編輯按鈕、復制按鈕。?

可以看到，本來在模態框中的功能，全部移到了行內！?使用起來非常的方便。

最后，還是貼一下修改后的完整代碼吧，保留了datatable、editor的初始化代碼，editor的客戶端驗證代碼，別的都可以去掉了。

var table;var editor;$(document).ready(function () {editor = new $.fn.dataTable.Editor({table: "#example",fields: [{ label: "Name", name: "Name" },{ label: "Position", name: "Position"},{ label: "Office", name: "Office" },{ label: "Age", name: "Age" },{ label: "Salary", name: "Salary" },{label: "Gender", name: "Gender", type: "radio",options: [{ label: "男", value: "1" },{ label: "女", value: "0" },],def:"1"},{label: "Level", name: "Level", type: "select",options: [{ label: "1(highest)", value: "1" },{ label: "2", value: "2" },{ label: "3", value: "3" },{ label: "4", value: "4" },{ label: "5(lowest)", value: "5" },],def:"1" },{label: "Date", name: "Date", type: "datetime",def: function () { return new Date(); },fieldInfo: '請選擇時間',keyInput: false, //禁止用戶手動輸入}],i18n: {create: {button: "新建",title: "新增數據",submit: "保存"},edit: {button: "編輯",title: "修改數據",submit: "保存修改"},remove: {button: "刪除",title: "刪除數據",submit: "刪除",confirm: {_: "確定刪除這 %d 幾行數據?",1: "確定刪除這一行數據?"}},error: {system: "服務器或網絡發生錯誤,請聯系系統管理員或稍后再試..."},datetime: {previous: '上一頁',next: '下一頁',months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],weekdays: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']}}});$('#example').on('click', 'tbody td.Editor', function (e) {editor.inline(this, { onBlur: 'submit' });});table = $('#example').DataTable({ajax: {url: "/Home/GetData",type: "Get",dataType: "json",data: {},dataSrc: function (json) {$.each(json, function (k, v) {v.DT_RowId = GetRandomRowID();//在前端對服務端返回的數據生成隨機字符串作為主鍵});return json;},error: function () {alert("服務器未正常響應，請重試");},},dom: 'Bfrtip',select: {style: 'os',selector: 'td:first-child'},buttons: [{extend: "create",editor: editor,formButtons: ["新增",{ text: "取消", action: function () { this.close();}}]},{extend: "remove",editor: editor,formButtons: ["刪除",{ text: "取消", action: function () { this.close();}}]},],columns: [{data: null,defaultContent: '',orderable: false,className: 'select-checkbox',},{ title: "Name", data: "Name"},{ title: "Position", data: "Position",className:"Editor"},{ title: "Office", data: "Office",className:"Editor"},{ title: "Age", data: "Age",className: "Editor" },{ title: "Salary", data: "Salary", className: "Editor" },{title: "Gender", data: "Gender", className: "Editor",render: function (val, type, row) {return val == "1" ? "男" : "女";}},{ title: "Level", data: "Level", className: "Editor dt-body-center" },{ title: "Date", data: "Date", className: "Editor",}],language: {processing: "正在獲取數據，請稍后...",search: "搜索",lengthMenu: "顯示 _MENU_ 條",info: "當前顯示的第是 _START_ 到 _END_ 行數據,共 _TOTAL_ 行數據",infoEmpty: "記錄數為0",infoFiltered: "((全部記錄數 _MAX_ 條))",infoPostFix: "",loadingRecords: "系統處理中,請稍等...",zeroRecords: "沒有您要搜索的內容",emptyTable: "沒有數據",paginate: {first: "第一頁",previous: "上一頁",next: "下一頁",last: "最后一頁"},aria: {sortAscending: "以升序排列此列",sortDescending: "以降序排列此列"}}});editor.on('preSubmit', function (e, o, action) {if (action !== 'remove') {var firstName = this.field('Name');// Only validate user input values - different values indicate that// the end user has not entered a valueif (!firstName.isMultiValue()) {if (!firstName.val()) {firstName.error('Name不能為空');}if (firstName.val().length >= 20) {firstName.error('Name不能超過20個字母!');}}// ... additional validation rules// If any error was reported, cancel the submission so it can be correctedif (this.inError()) {return false;}}});});

?

總結

以上是生活随笔為你收集整理的JQuery Datatables editor 行内编辑功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。