當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQuery Datatables editor进行增删改查操作(一)

發布時間：2025/3/11 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery Datatables editor进行增删改查操作(一) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

背景

editor作為Datatables的插件之一，功能十分強大，有全行編輯模式、泡泡編輯模式、行內編輯模式。個人覺得，除了泡泡編輯模式外，其他兩種模式功能在實際項目中會經常使用到，泡泡模式提供了模態框可以對表格內的數據進行增改刪功能，而行內編輯功能更是在一些單據編輯功能中是必不可少的。網上對editor插件使用描述的文章太少，可能由于editor插件是付費的緣故吧，很多文章描述十分簡單，或代碼不夠詳細。本文就來介紹editor的初始化基本功能，如果有更好的方法或建議，請留言。

本文使用到目前為止editor最新版1.9.0、datatables也是最新版本1.10.19。注意，不同版本的editor和datatables可能會產生兼容性問題，導致某些功能無法正常使用，盡量使用官方免費試用15天中搭配的版本，有興趣可以下載試試。

點擊這里下載試用版。

點擊這里進入editor官網

editor插件的使用效果圖如下所示：

新增數據功能：

編輯數據功能（選中數據進行編輯）：

批量修改數據功能(選中多行進行批量修改) ：

刪除數據功能（可以對選中數據進行批量刪除）：

總的來說是，editor外觀大氣，功能強大，使用方便。是表格控件的首選。只是有一點，這是收費的，最低的價格也要100多美元，可能這是導致editor使用人數少的原因吧。但是這并不妨礙這是一款優秀的表格控件。

本例使用ASP.NET MVC 進行演示。

使用editor需要以下幾個JS和CSS文件，本例中，使用了Bootstrap3樣式對表格進行了美化，和Bootstrap相關的文件非必需：

HTML代碼如下圖所示：

JS代碼如下圖所示，需要首先定義editor:

editor = new $.fn.dataTable.Editor({ajax: {create: {url: "/Home/AddData",type: "Post",dataType: "json",data: function (data) {var Person = {};mydata = data.data;Person.Name = mydata[0].Name;Person.Position = mydata[0].Position;Person.Office = mydata[0].Office;Person.Age = mydata[0].Age,Person.Salary = mydata[0].Salaryreturn Person;},success: function (json) {var DT_RowId = GetRandomRowID();console.log('new row id:' + DT_RowId);//前臺打印DT_RowIdjson.data[0].DT_RowId = DT_RowId;//對新增的數據生成隨機字符串作為主鍵},},edit: {type: 'Post',url: '/Home/UpdataData',dataType: 'json',data: function (data) {var returndata = { data: [] };var DT_RowId;var datas = data.data;for (var key in datas){console.log('editor row id:'+ key);//前臺打印DT_RowIdDT_RowId = key;//獲取DT_RowIdvar mydata = datas[DT_RowId];var data = {};data.DT_RowId = DT_RowId;data.Name = mydata.Name;data.Position = mydata.Position;data.Office = mydata.Office;data.Age = mydata.Age,data.Salary = mydata.Salaryreturndata.data.push(data);}return returndata;},success: function (json) {},},remove: {url: '/Home/DeleteData',type: 'Post',dataType: "json",data: function (data) {var returndata = {data:[]};var DT_RowId;var datas = data.data;for (var key in datas) {console.log('remove row id:' + key);//前臺打印DT_RowIdDT_RowId = key;//獲取DT_RowIdvar mydata = datas[DT_RowId];var data = {};data.DT_RowId = DT_RowId;data.Name = mydata.Name;data.Position = mydata.Position;data.Office = mydata.Office;data.Age = mydata.Age;data.Salary = mydata.Salary;returndata.data.push(data);}return returndata;},success: function (json) {},}},table: "#example",fields: [{ label: "Name", name: "Name" },{ label: "Position", name: "Position", multiEditable: false },//multiEditable:無法進行批量編輯{ label: "Office", name: "Office" },{ label: "Age", name: "Age" },{ label: "Salary", name: "Salary" },],i18n: {create: {button: "新建",title: "新增數據",submit: "保存"},edit: {button: "編輯",title: "修改數據",submit: "保存修改"},remove: {button: "刪除",title: "刪除數據",submit: "刪除",confirm: {_: "確定刪除這 %d 幾行數據?",1: "確定刪除這一行數據?"}},error: {system: "服務器或網絡發生錯誤,請聯系系統管理員或稍后再試..."},datetime: {previous: '上一頁',next: '下一頁',months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],weekdays: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']}}});

需要注意的是：

1、editor在進行新增時，需要對表格每一行指定一個(id)主鍵，editor默認的字段是DT_RowId。在本文中，我在新增操作成功的回調函數中，循環給表格中的每一行的DT_RowId賦一個隨機的唯一的字符串。以保證接下去的編輯和刪除操作可以依靠DT_RowId進行。當然，在后端生成DT_RowId返回給前端頁面也是可以的。生成隨機字符串的JS方法如下圖所示：

/*生成隨機字符串作為主鍵*/function GetRandomRowID() {//var key = Number(Math.random().toString().substr(3, 15) + Date.now()).toString(36);return randomRange(15);}/*隨機生成固定位數或者一定范圍內的字符串數字組合*//*min 范圍最小值*//*max 范圍最大值，當不傳遞時表示生成指定位數的組合*/function randomRange(min, max) {var returnStr = "",range = (max ? Math.round(Math.random() * (max - min)) + min : min),arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];for (var i = 0; i < range; i++) {var index = Math.round(Math.random() * (arr.length - 1));returnStr += arr[index];}return returnStr;}

2、如果不想用editor指定的DT_RowId字段作為(id)主鍵，也可以自己指定數據中的某一列，使用idSrc屬性配置即可，代碼如下圖所示：

idSrc: 'id名稱',

3、在后臺處理完新增、編輯、刪除操作后，editor會自動獲取success(json)回調函數執行完后的json字符串,并且只認這個json字符串，不需要return語句。可以在success回調函數中修改json數據，比如我在新增操作中回調函數中就給DT_RowId字段賦唯一值。返回給前端的JSON數據格式必須和下圖一樣，不然前端會報錯或者不正確顯示效果：

新增：

? ? ? ? ? ? ? ? ? ? ? ?

編輯：

? ? ? ? ? ? ? ? ? ? ???

刪除：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ???

在前端調試中查看返回的格式如下圖所示：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???

具體參見editor官網API返回值

datatables的JS前端代碼如下圖所示：

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 },{ extend: "edit", editor: editor },{ extend: "remove", editor: editor },],columns: [{data: null,defaultContent: '',orderable: false,className: 'select-checkbox',},{ title: "Name", data: "Name"},{ title: "Position", data: "Position",className:"canEditor"},{ title: "Office", data: "Office",className:"canEditor"},{ title: "Age", data: "Age",className: "canEditor" },{ title: "Salary", data: "Salary", className: "canEditor" },],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: "以降序排列此列"}}});

在第一次頁面加載的時候，對所有數據行中的DT_RowId進行賦值，方便之后對數據的增刪改查操作。

Model中的代碼如下圖所示：

public class Model{public List<Person> data { get; set; } = new List<Person>();//必須是集合類型}public class Person{public string DT_RowId { get; set; }public string Name { get; set; }public string Position { get; set; }public string Office { get; set; }public int Age { get; set; }public int Salary { get; set; }}

Control中的代碼如下圖所示，在真實場景中需要處理增刪改查的邏輯操作，本文只是為了演示效果而直接返回editor需要的json字符串：

public class HomeController : Controller{// GET: Homepublic ActionResult Index(){return View();}/// <summary>/// 數據加載/// </summary>/// <returns></returns>public ActionResult GetData(){GetData getData = new GetData();List<Person> Persons = getData.GetPersonList();return Json(Persons, JsonRequestBehavior.AllowGet);}/// <summary>/// 刪除操作/// </summary>/// <param name="model"></param>/// <returns></returns>public ActionResult DeleteData(Model model){List<Person> Persons = new List<Person>();return Json(Persons, JsonRequestBehavior.AllowGet);}/// <summary>/// 更新操作/// </summary>/// <param name="person"></param>/// <returns></returns>public ActionResult UpdataData(Model model){return Json(model, JsonRequestBehavior.AllowGet);}/// <summary>/// 新增操作/// </summary>/// <param name="person"></param>/// <returns></returns>public ActionResult AddData(Person person){Model model = new Model();model.data.Add(person);return Json(model, JsonRequestBehavior.AllowGet);}}

總結

以上是生活随笔為你收集整理的JQuery Datatables editor进行增删改查操作(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： C#中利用Expression表达式树进
下一篇： C#中的修饰符及其说明