JQuery Datatables editor 在编辑前刷新数据

背景

在同一时间,可能很多人在编辑修改同一数据,这会导致在一个人还在在修改的过程中另一人在完成了修改并保存了数据。editor在button插件的扩展中可以有效的缓解这个问题:自定义一个编辑按钮,此编辑按钮实现 点击按钮后,首先刷新数据,然后再弹出模态框的功能。详细信息点击这里查看官网说明


使用效果如下图所示:

点击刷新并编辑 按钮,按钮会有一个加载状态的动画效果,此刻正在刷新数据,刷新完成后弹出编辑框 。

                                                        


JS代码如下图所示:

    $.fn.dataTable.ext.buttons.editRefresh = {extend: 'edit',text: '刷新并编辑',action: function (e, dt, node, config) {this.processing(true);var selectedRowsIds = dt.rows({ selected: true }).ids();//获取每行在前端自动生成的id数组var selectedRows = dt.rows({ selected: true }).data();//获取选中数据var length = selectedRows.length;//得到选中数据的数组的长度var selectedRowsNames = "";for (var i = 0; i < length; i++) {selectedRowsNames += selectedRows[i].Name;if (i != length - 1){selectedRowsNames += ",";}}var that = this;var url = config.editor.ajax().edit.url;//获得editor中更新出操作的URL$.ajax({url: url,type: 'post',dataType: 'json',data: {refresh: 'rows',names:selectedRowsNames,ids: selectedRowsIds.toArray().join(','),},success: function (json) {// On success update rows with datafor (var i = 0 ; i < json.data.length ; i++) {dt.row('#' + json.data[i].DT_RowId).data(json.data[i]);}dt.draw(false);// And finally trigger editing on those rows$.fn.dataTable.ext.buttons.edit.action.call(that, e, dt, node, config);}});}};

然后在datatable 的 button属性中添加一个按钮即可,代码如下图所示:

{ extend: 'editRefresh', editor: editor },

 说明:

  1、在ajax中需要将每行的id (datatable默认的是存id字段是DT_RowId ) 传到后端,因为在成功回调函数里,会根据id刷新数据。本文中id是在前端动态生成的,单独返回给后端没什么用,必须加上另外一个属性,本文中我随便取了Name这个属性。在实际项目中可以自定义id,并且用那些前后端都能识别的字符串,那样就只需要传一个id到后端就可以了。

 

 

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

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

相关文章

JQuery Datatables 显示行的附加信息

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

初涉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按钮样式库

点击进入查看官网说明 不同颜色按钮&#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配置管理器

首先Win R &#xff0c;打开运行窗口&#xff0c;然后输入&#xff1a; SQLServerManager10.msc

机器学习中的相似性度量

在做分类时常常需要估算不同样本之间的相似性度量(Similarity Measurement)&#xff0c;这时通常采用的方法就是计算样本间的“距离”(Distance)。采用什么样的方法计算距离是很讲究&#xff0c;甚至关系到分类的正确与否。 本文的目的就是对常用的相似性度量作一个总结。 本文…

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

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

HTML5 FileReader API 测试(一)

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

Bootstrap模态框居中显示

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

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

如下图所示&#xff1a; 有遮罩层在&#xff0c;无法进行任何操作&#xff0c;只需修改默认 z-index 属性即可&#xff1a; .modal-backdrop{z-index:0;}

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)

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

Bootstrap-select使用说明

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

前端插件——Bootstrap Dual Listbox 简介

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

Fork()概念

对于刚刚接触Unix/Linux操作系统&#xff0c;在Linux下编写多进程的人来说&#xff0c;fork是最难理解的概念之一&#xff1a;它执行一次却返回两个值。 首先我们来看下fork函数的原型&#xff1a; &#xff03;i nclude <sys/types.h> &#xff03;i nclude <unistd.…

Nsis打包exe

2019独角兽企业重金招聘Python工程师标准>>> 这里用nsis的eclipse插件来打包exe。插件地址&#xff1a;http://eclipsensis.sf.net/update 安装完毕之后创建一个java程序&#xff0c;导出一个可执行的jar文件&#xff0c;名字JavaApp.jar。现在开始准备打包制作安装…

借助波音公司打造优秀按单制造(MTO II)管理系统

博主推荐延展咨询资深顾问王晓东文章近些年随着市场竞争的加剧&#xff0c;制造业产业链越来越关注客户的需求&#xff0c;针对客户个性化需求的按单制造&#xff08;MTO II&#xff09;生产模式在我国企业不断得到应用。按单制造&#xff08;MTO II&#xff09;企业在组织生产…

MyEclipes 设置代码自动提示

一、Window ——> Preferences 二、Java ——> Editor ——> Content Assist 三、更改内容为 【.qwertyuiopasdfghjklzxcvbnm 】&#xff0c;完成。

jQuery-input输入框下拉提示层

效果图 代码部分 // JavaScript Document (function($){$.fn.extend({"changeTips":function(value){value $.extend({divTip:""},value)var $this $(this);var indexLi 0;//点击document隐藏下拉层$(document).click(function(event){if($(event.targe…

MyEclipes 2016 CI 6 安装

一、双击安装包&#xff0c;打开&#xff0c;点击“Next” 二、 同意&#xff0c;Next 三、选择安装路径&#xff0c;然后点击Next 四、选择32位或者是64位后&#xff0c;点击Next开始安装。 五、去掉立即运行这个勾&#xff0c;点击完成。 六、找到破解目录文件&#xff0c;全…

WPF:从WPF Diagram Designer Part 1学习控件模板、移动、改变大小和旋转

欢迎转载&#xff0c;转载请注明&#xff1a;转载自周金根 [ http://zhoujg.cnblogs.com/ ] 由于上周主要做了项目组产品架构、给公司新员工培训以及其他会议等事情&#xff0c;在OpenExpressApp对建模支持的初步计划中我列了一些建模任务还没有开展&#xff0c;其中参考部分在…