网站建设实训报告模板,销售类网站开发架构,为什么网站显示建设中,帮助做ppt的网站背景
很多项目需求中#xff0c;不需要表格自己进行AJax操作#xff0c;数据的交互需要另外写代码实现#xff0c;表格只需要提供本地编辑即可#xff0c;这该怎么办呢#xff1f;其实editor对这种实现很简单#xff0c;去掉editor中的ajax属性即可。可以点击这里查看ed…背景
很多项目需求中不需要表格自己进行AJax操作数据的交互需要另外写代码实现表格只需要提供本地编辑即可这该怎么办呢其实editor对这种实现很简单去掉editor中的ajax属性即可。可以点击这里查看editor官方网站对本地编辑的说明
我调用上一篇文章中的代码作为演示代码有点长只需要看到我注释了editor中的ajax属性即可 $(document).ready(function () {editor new $.fn.dataTable.Editor({//ajax: {// create: {// url: /Home/AddData,// type: Post,// dataType: json,// data: function (data) {// var Person {};// var id;// mydata data.data;// for (var key in mydata)// {// console.log(check create row id: key);// id key;// }// if (key 0)//新增模式// {// console.log(entry create mode:);// Person.Name mydata[0].Name;// Person.Position mydata[0].Position;// Person.Office mydata[0].Office;// Person.Age mydata[0].Age;// Person.Salary mydata[0].Salary;// Person.Gender mydata[0].Gender;// Person.Level mydata[0].Level;// Person.Date mydata[0].Date;// }// else {//复制模式// console.log(entry duplicate mode:);// Person.Name mydata[id].Name;// Person.Position mydata[id].Position;// Person.Office mydata[id].Office;// Person.Age mydata[id].Age;// Person.Salary mydata[id].Salary;// Person.Gender mydata[id].Gender;// Person.Level mydata[id].Level;// Person.Date mydata[id].Date;// }// return Person;// },// success: function (json) {// var DT_RowId GetRandomRowID();// console.log(new row id: DT_RowId);//前台打印DT_RowId// json.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_RowId// DT_RowId key;//获取DT_RowId// var 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;// data.Gender mydata.Gender;// data.Level mydata.Level;// data.Date mydata.Date;// returndata.data.push(data);// }// return returndata;// },// success: function (json) {// //var returnData {};// //returnData.data json.data;// //return returnData;// },// },// 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_RowId// DT_RowId key;//获取DT_RowId// var 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;// data.Gender mydata.Gender;// data.Level mydata.Level;// data.Date mydata.Date;// returndata.data.push(data);// }// //var returndata JSON.stringify(Persons)// return returndata;// },// success: function (json) {// //return json;// },// }//},table: #example,//idSrc: Name,fields: [{ label: Name, name: Name },{ label: Position, name: Position, multiEditable: false },//multiEditable:无法进行批量编辑{ 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: [星期一, 星期二, 星期三, 星期四, 星期五, 星期六, 星期天]}}});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: edit,//原编辑功能代码// editor: editor,// formButtons: [// 修改,// { text: 取消, action: function () { this.close(); }}// ]//},{extend: selected,text: 编辑,action: function () {var indexes table.rows({ selected: true }).indexes();editor.edit(indexes, {title: 编辑,buttons: indexes.length 1 ?backNext :保存});}},{extend: remove,editor: editor,formButtons: [删除,{ text: 取消, action: function () { this.close();}}]},{extend: selected,text: 复制,action: function (e, dt, node, config) {// Start in edit mode, and then change to createeditor.edit(table.rows({ selected: true }).indexes(), {title: 复制原数据,buttons: 新增复制}).mode(create);}},],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 },{title: Gender, data: Gender, className: canEditor,render: function (val, type, row) {return val 1 ? 男 : 女;}},{ title: Level, data: Level, className: canEditor dt-body-center },{ title: Date, data: Date, 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: 以降序排列此列}}});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;}}});// Buttons array definition to create previous, save and next buttons in// an Editor formvar backNext [{text: lt;,action: function (e) {// On submit, find the currently selected row and select the previous onethis.submit(function () {var indexes table.rows({ search: applied }).indexes();var currentIndex table.row({ selected: true }).index();var currentPosition indexes.indexOf(currentIndex);if (currentPosition 0) {table.row(currentIndex).deselect();table.row(indexes[currentPosition - 1]).select();}// Trigger editing through the buttontable.button(1).trigger();}, null, null, false);}},保存,{text: gt;,action: function (e) {// On submit, find the currently selected row and select the next onethis.submit(function () {var indexes table.rows({ search: applied }).indexes();var currentIndex table.row({ selected: true }).index();var currentPosition indexes.indexOf(currentIndex);if (currentPosition indexes.length - 1) {table.row(currentIndex).deselect();table.row(indexes[currentPosition 1]).select();}// Trigger editing through the buttontable.button(1).trigger();}, null, null, false);}}];});
去掉ajax属性后每次新增数据editor便会调用自己的内部的方法对新增行生成一个唯一的(id)主键存放在DT_RowId字段中以便接下去的可以对数据进行编辑和删除操作。可以通过如下方法获取每行的DT_RowId的值
var id table.row(editCurrentRow).id();//获取DT_RowId的值editCurrentRow为行号
