茗哥网站建设,com域名注册量,网站怎么做流程,提交百度收录背景
ERP软件中#xff0c;能进行行内编辑的表单是常用功能#xff0c;行内编辑功能能让用户在表格中自己填写、修改、删除数据或者选择数据#xff0c;可以说表格控件是ERP软件的核心控件#xff0c;而行内编辑功能是核心中的关键。
本文会继续接着上一篇文章的介绍继续…背景
ERP软件中能进行行内编辑的表单是常用功能行内编辑功能能让用户在表格中自己填写、修改、删除数据或者选择数据可以说表格控件是ERP软件的核心控件而行内编辑功能是核心中的关键。
本文会继续接着上一篇文章的介绍继续增加功能。
editor同样支持行内编辑并且只需要几句代码即可首先开启行内编辑功能
$(#example).on(click, tbody td.Editor, function (e) { //在表格中对打上Editor标签的列才能开启行内编辑功能editor.inline(this, { onBlur: submit });//在修改数据后点击任意处即可关闭表单保存修改后的数据
});
然后在datatable的初始化中对需要进行行内编辑的列打上Editor标记如下图所示 完成上述两个步骤后看下页面效果
对Position字段进行编辑 行内单选框可以选择性别 行内下拉框 行内日期选择 因为是行内编辑可以去掉表格左上角的其两个按钮编辑按钮、复制按钮。
可以看到本来在模态框中的功能全部移到了行内 使用起来非常的方便。
最后还是贴一下修改后的完整代码吧保留了datatable、editor的初始化代码editor的客户端验证代码别的都可以去掉了。 var table;var editor;$(document).ready(function () {editor new $.fn.dataTable.Editor({table: #example,fields: [{ label: Name, name: Name },{ label: Position, name: Position},{ 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: [星期一, 星期二, 星期三, 星期四, 星期五, 星期六, 星期天]}}});$(#example).on(click, tbody td.Editor, function (e) {editor.inline(this, { onBlur: submit });});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: remove,editor: editor,formButtons: [删除,{ text: 取消, action: function () { this.close();}}]},],columns: [{data: null,defaultContent: ,orderable: false,className: select-checkbox,},{ title: Name, data: Name},{ title: Position, data: Position,className:Editor},{ title: Office, data: Office,className:Editor},{ title: Age, data: Age,className: Editor },{ title: Salary, data: Salary, className: Editor },{title: Gender, data: Gender, className: Editor,render: function (val, type, row) {return val 1 ? 男 : 女;}},{ title: Level, data: Level, className: Editor dt-body-center },{ title: Date, data: Date, className: Editor,}],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;}}});});
