JQuery Datatables editor 本地编辑功能

最新推荐文章于 2024-08-30 07:23:18 发布

机械键盘侠

最新推荐文章于 2024-08-30 07:23:18 发布

阅读量1.7k

点赞数

分类专栏：前端插件

本文链接：https://blog.youkuaiyun.com/xuchen_wang/article/details/100661608

版权

本文介绍了如何在JQuery Datatables中实现本地编辑功能，通过去除Editor的ajax属性，使得表格能够直接处理本地数据。利用Editor的内部方法自动生成唯一ID，并展示如何获取每行的DT_RowId以进行编辑和删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

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

最低0.47元/天解锁文章