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

背景

上一篇对editor进行了一个基本功能的初始化操作演示，本文进一步了解下editor在上一篇文章功能的基础上添加了部分常用基本功能。

整体界面如下图所示：

 

新增界面：

 新增界面增加了单选按钮，下拉框，和时间选择器，还有右下角的“取消”按钮：

                  

时间选择器： 

                     

 

在点击“新增”按钮保存数据时，可以对数据进行客户端验证 ：

            

 

点击“复制”按钮，可以对选中的某一行进行复制后新增，避免太多重复输入：

 

“编辑”界面还是可以对选中行修改所有字段，右下角增加了两个剪头按钮提供在编辑界面进行数据切换：

 

 选中多行还是可以进行对数据的批量修改：

 

可以对选中的一行或者多行进行删除： 

 

 editor的JS代码如下图所示：

        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_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.Salary;data.Gender = mydata.Gender;data.Level = mydata.Level;data.Date = mydata.Date;returndata.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;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: "DT_RowId", name: "DT_RowId" },{ 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: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']}}});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);}},'Save',{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);}}];

 

 datatable的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,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"},{ title: "Office", data: "Office"},{ title: "Age", data: "Age"},{ title: "Salary", data: "Salary"},{title: "Gender", data: "Gender",render: function (val, type, row) {return val == "1" ? "男" : "女";}},{ title: "Level", data: "Level", className: "dt-body-center" },{ title: "Date", data: "Date",}],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: "以降序排列此列"}}});

后端代码和上一篇中的一样，除了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; }public string Gender { get; set; }public string Level { get; set; }public string Date { get; set; }}

 

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

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

相关文章

《统一沟通-微软-实战》-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…
阅读更多...
Fork()概念

Fork()概念

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

Nsis打包exe

2019独角兽企业重金招聘Python工程师标准>>> 这里用nsis的eclipse插件来打包exe。插件地址&#xff1a;http://eclipsensis.sf.net/update 安装完毕之后创建一个java程序&#xff0c;导出一个可执行的jar文件&#xff0c;名字JavaApp.jar。现在开始准备打包制作安装…
阅读更多...
借助波音公司打造优秀按单制造（MTO II）管理系统

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

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

Copyright @ 2022~2023