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相关的文件非必需：

    <script src="~/scripts/jquery-3.3.1.min.js"></script> //Jquery js文件<script src="~/scripts/js/bootstrap.min.js"></script> //bootstrap js文件<script src="~/scripts/js/jquery.dataTables.min.js"></script> //datatable js文件<script src="~/scripts/js/dataTables.bootstrap.min.js"></script> //datatbale的bootstrap样式JS文件<script src="~/scripts/js/dataTables.buttons.min.js"></script>//button插件<script src="~/scripts/js/buttons.bootstrap.min.js"></script>//button插件的bootstrap样式JS文件<script src="~/scripts/js/dataTables.select.min.js"></script>//select插件<script src="~/scripts/js/dataTables.editor.min.js"></script>//editor插件<link href="~/scripts/css/bootstrap.min.css" rel="stylesheet" /><link href="~/scripts/css/dataTables.bootstrap.min.css" rel="stylesheet" /><link href="~/scripts/css/buttons.dataTables.min.css" rel="stylesheet" /><link href="~/scripts/css/buttons.bootstrap.min.css" rel="stylesheet" /><link href="~/scripts/css/select.dataTables.min.css" rel="stylesheet" /><link href="~/scripts/css/select.bootstrap.min.css" rel="stylesheet" /><link href="~/scripts/css/editor.dataTables.min.css" rel="stylesheet" /><link href="~/scripts/css/editor.bootstrap.min.css" rel="stylesheet" />

 

HTML代码如下图所示：

<table id="example" class="table table-striped table-over table-bordered" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0"></table>

 

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);}}

 

 

 

 

 

 

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/548480.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

将C#中DateTime类型转化为JavaScript中的Date类型

将C#中DateTime类型转化为JavaScript中的Date类型

将C#中的DateTime类型数据返回到前端页面时&#xff0c;显示的样子如下图所示&#xff1a; 可以用JS前端操作转化成JS的Date格式&#xff0c;直接上代码 &#xff1a; // 对Date的扩展&#xff0c;将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季…
阅读更多...
FusionCharts V3图表导出图片和PDF属性说明

FusionCharts V3图表导出图片和PDF属性说明

百闻不如一见&#xff0c;狠狠点击&#xff0c;快快下载&#xff1a;&#xff08;演示文档有错误&#xff0c;不提供下载了。待新的演示文档出来。&#xff09; 许多朋友说上面的DEMO用不了。fusioncharts官方的演示非常不错&#xff0c;就是来不及整理&#xff0c;各位大侠们…
阅读更多...
JQuery Datatables editor进行增删改查操作(二)

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

背景 上一篇对editor进行了一个基本功能的初始化操作演示&#xff0c;本文进一步了解下editor在上一篇文章功能的基础上添加了部分常用基本功能。 整体界面如下图所示&#xff1a; 新增界面&#xff1a; 新增界面增加了单选按钮&#xff0c;下拉框&#xff0c;和时间选择器&am…
阅读更多...
《统一沟通-微软-实战》-6-部署-2-中介服务器-5-语音路由-语音策略

《统一沟通-微软-实战》-6-部署-2-中介服务器-5-语音路由-语音策略

创建语音策略和配置 PSTN 用法记录 如果要创建新的语音策略&#xff0c;请执行以下步骤。如果要编辑语音策略&#xff0c;请参阅修改语音策略和配置 PSTN 用法记录中的相关步骤。 注意&#xff1a; 每个语音策略必须至少具有一条关联的 PSTN 用法记录。要查看企业语音部署中提…
阅读更多...
JQuery Datatables editor 行内编辑功能

JQuery Datatables editor 行内编辑功能

背景 ERP软件中&#xff0c;能进行行内编辑的表单是常用功能&#xff0c;行内编辑功能能让用户在表格中自己填写、修改、删除数据或者选择数据&#xff0c;可以说表格控件是ERP软件的核心控件&#xff0c;而行内编辑功能是核心中的关键。 本文会继续接着上一篇文章的介绍继续…
阅读更多...
Shell图形化监控网络流量

Shell图形化监控网络流量

shell图形化监控网络流量 网络流量的监控工具有很多&#xff0c;如&#xff1a;Mrtg、Cacti、Zabbix等等&#xff0c;他们都有着各自的特点&#xff0c;不同的侧重&#xff0c;只为适合不同的应用场景的各种特殊需求。除了网络流量监控工具以外&#xff0c;还有Nagios这样的监控…
阅读更多...
JQuery Datatables editor 在编辑前刷新数据

JQuery Datatables editor 在编辑前刷新数据

背景 在同一时间&#xff0c;可能很多人在编辑修改同一数据&#xff0c;这会导致在一个人还在在修改的过程中另一人在完成了修改并保存了数据。editor在button插件的扩展中可以有效的缓解这个问题&#xff1a;自定义一个编辑按钮&#xff0c;此编辑按钮实现 点击按钮后&#x…
阅读更多...
JQuery Datatables 显示行的附加信息

JQuery Datatables 显示行的附加信息

点击这里查看datatables官网介绍 点击这里查看datatables中文网介绍 效果如下图所示&#xff1a; 点击首列调用ajax返回数据&#xff0c;并展开明细行如下图所示&#xff1a; CSS代码&#xff1a; td.details-control {background: url(../../scripts/datatables-1.10.19/ima…
阅读更多...
初涉c#设计模式-Iterator Pattern

初涉c#设计模式-Iterator Pattern

一、迭代器模式简介(Brief Introduction) 迭代器模式(Iterator Pattern)&#xff0c;提供一种方法顺序访问一个聚合对象中元素&#xff0c;而不暴露改集合对象的内部表示。 Provide a way to access the elements of an aggregate object sequentially without exposing its un…
阅读更多...
Buttons——CSS按钮样式库

Buttons——CSS按钮样式库

点击进入查看官网说明 不同颜色按钮&#xff1a; <button class"button button-3d button-primary">button1</button><button class"button button-3d button-action">button2</button><button class"button button-3d b…
阅读更多...
Win10中如何找到并打开SqlServer2008 R2配置管理器

Win10中如何找到并打开SqlServer2008 R2配置管理器

首先Win R &#xff0c;打开运行窗口&#xff0c;然后输入&#xff1a; SQLServerManager10.msc
阅读更多...
机器学习中的相似性度量

机器学习中的相似性度量

在做分类时常常需要估算不同样本之间的相似性度量(Similarity Measurement)&#xff0c;这时通常采用的方法就是计算样本间的“距离”(Distance)。采用什么样的方法计算距离是很讲究&#xff0c;甚至关系到分类的正确与否。 本文的目的就是对常用的相似性度量作一个总结。 本文…
阅读更多...
EF中DB First模式下数据库中表结构变化时如何快速同步到EF模型中

EF中DB First模式下数据库中表结构变化时如何快速同步到EF模型中

没想到什么好的精准的办法&#xff0c;持续的报错&#xff0c;然后定位报错很是头疼。我目前感觉较快方式有两种&#xff0c;如果有更好的方式&#xff0c;请大家指教。 一、先在数据库中修改表的结构属性&#xff0c;再删除edmx文件中对应的实体类模型&#xff0c;然后再是“从…
阅读更多...
HTML5 FileReader API 测试（一）

HTML5 FileReader API 测试（一）

2019独角兽企业重金招聘Python工程师标准>>> 参考文章 html5之FileReader接口 http://zhangyaochun.iteye.com/blog/1487900 1、FileReader接口的作用&#xff1a; 用来把文件读入内存&#xff0c;并且读取文件中的数据。 2、支持情况 FF3.6| Chrome6 Js代码 /*…
阅读更多...
Bootstrap模态框居中显示

Bootstrap模态框居中显示

Bootstrap默认的模态框不是居中显示的&#xff0c;需要稍微修改下源代码&#xff1a; 1、打开源码bootstrap.js&#xff0c;在里面找到如下代码&#xff1a; 2、在上述代码段落下面增加居中的代码即可&#xff1a; //使弹出框居中。。。var $modal_dialog $(this.$element[0]…
阅读更多...
Bootstrap模态框显示时有阴影遮罩层

Bootstrap模态框显示时有阴影遮罩层

如下图所示&#xff1a; 有遮罩层在&#xff0c;无法进行任何操作&#xff0c;只需修改默认 z-index 属性即可&#xff1a; .modal-backdrop{z-index:0;}
阅读更多...
JQuery Datatables 在Bootstrap tab中列名无法对齐的问题

JQuery Datatables 在Bootstrap tab中列名无法对齐的问题

如下图所示&#xff1a; 增加一句代码即可&#xff1a; $(a[data-toggle"tab"]).on(shown.bs.tab, function (e) {//当切换tab时&#xff0c;强制重新计算列宽$.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();});
阅读更多...
C# 值类型与引用类型(1)

C# 值类型与引用类型(1)

1. 主要内容 类型的基本概念 值类型深入 引用类型深入 值类型与引用类型的比较及应用 2. 基本概念 C#中&#xff0c;变量是值还是引用仅取决于其数据类型。 C#的基本数据类型都以平台无关的方式来定义&#xff0c;C#的预定义类型并没有内置于语言中&#xff0c;而是内置于.NET …
阅读更多...
Bootstrap-select使用说明

Bootstrap-select使用说明

背景 Bootstrap-select 是一款基于JQuery的 下拉菜单 插件&#xff0c;支持搜索和多项选择功能&#xff0c;支持Booststrap。 点击这里进入Bootstrap-select中文官方网站 使用效果如下图所示&#xff1a; 常用属性 初始化&#xff1a; <select class"selectpicker…
阅读更多...
前端插件——Bootstrap Dual Listbox 简介

前端插件——Bootstrap Dual Listbox 简介

背景 Bootstrap Dual Listbox是一款基于Bootstrap的双向select选择框控件&#xff0c;作为对multiple select的扩展&#xff0c;使用起来非常简单&#xff0c;功能也更强大。 参考文章一 参考文章二 使用效果如下图所示&#xff1a; 初始化HTML代码&#xff1a; <div cla…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023