背景

很多项目需求中，不需要表格自己进行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为行号

JQuery Datatables editor 本地编辑功能相关推荐

JQuery Datatables editor 在编辑前刷新数据
背景在同一时间,可能很多人在编辑修改同一数据,这会导致在一个人还在在修改的过程中另一人在完成了修改并保存了数据.editor在button插件的扩展中可以有效的缓解这个问题:自定义一个编辑按钮,此编 ...
JQuery Datatables editor 行内编辑功能
背景 ERP软件中,能进行行内编辑的表单是常用功能,行内编辑功能能让用户在表格中自己填写.修改.删除数据或者选择数据,可以说表格控件是ERP软件的核心控件,而行内编辑功能是核心中的关键. 本文会继续接 ...
JQuery Datatables editor进行增删改查操作(一)
背景 editor作为Datatables的插件之一,功能十分强大,有全行编辑模式.泡泡编辑模式.行内编辑模式.个人觉得,除了泡泡编辑模式外,其他两种模式功能在实际项目中会经常使用到,泡泡模式提供了模 ...
JQuery Datatables editor进行增删改查操作(二)
背景上一篇对editor进行了一个基本功能的初始化操作演示,本文进一步了解下editor在上一篇文章功能的基础上添加了部分常用基本功能. 整体界面如下图所示: 新增界面: 新增界面增加了单选按钮,下 ...
jquery Datatables 行数据删除、行上升、行下降功能演示
Datatables 是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 官方网站:http://www.datatables.net Datatables ...
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据.实现分页和查询功能一.部分技术选型二.项目结构三.功能需求和效果展示四.关键代码 4.1页 ...
前端控件JQuery Datatables使用——常用功能初始化
本文用于自己记录,忘记时可以用来回顾.点击这里进入JQuerydatatable官网API地址 JQuery Datatables初始化个人比较喜欢JQueryDatatables的Bootstra ...
Jquery实现无限级树状结构并动态添加增删改等编辑功能
点击打开链接源:http://www.56gee.com/Detail/2012/04/11/8AEB74E423/ <!DOCTYPE html PUBLIC "-//W3C//D ...
Hex Editor实现Notepad++16进制编辑功能
Hex Editor实现Notepad++16进制编辑功能 Hex Editor使用说明解压缩后把HexEditor.dll文件复制到安装目录(如C:\Program Files\Notepad+ ...

JQuery Datatables editor 本地编辑功能

背景

JQuery Datatables editor 本地编辑功能相关推荐

最新文章

热门文章