背景

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

JQuery Datatables editor 行内编辑功能相关推荐

Datatables实现表格行内编辑功能
表格行内编辑功能通过操作DOM来实现,最终实现效果如下代代码 html <table class="table table-striped table-bordered table-h ...
datatables表格行内编辑的实现
Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...
fastadmin框架里基于x-editable实现的表格无刷新行内编辑功能的插件的‘datetime‘时间类型无法使用的解决方法
问题描述: 当editable中的参数type设为为datetime的时候会出现以下报错. Uncaught TypeError: Cannot read property 'DPGlobal' of ...
JQuery Datatables editor进行增删改查操作(一)
背景 editor作为Datatables的插件之一,功能十分强大,有全行编辑模式.泡泡编辑模式.行内编辑模式.个人觉得,除了泡泡编辑模式外,其他两种模式功能在实际项目中会经常使用到,泡泡模式提供了模 ...
bootstrap table 表格支持shirt 多选_bootstrap-table 表格行内编辑实现
这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能. 我的web前端学习交流群点击进入1045267283,欢迎加入! 先放一张效果图: 应用场景之前的项目也是采 ...
bootstrap表格行编辑状态_JS表格组件BootstrapTable行内编辑解决方案x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
bootstrap表格行编辑状态_JS组件系列——BootstrapTable 行内编辑解决方案：x-editable...
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
bootstrapTable行内编辑----X-editable组件
阅读目录一.x-editable组件介绍二.bootstrapTable行内编辑初始方案三.bootstrapTable行内编辑最终方案 1.文本框 2.时间选择框 3.下拉框 4.复选框 5. ...
雷林鹏分享jQuery EasyUI 数据网格 - 启用行内编辑
可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本教程向您展示如何创建一个数据网格(datagrid)和内 ...

JQuery Datatables editor 行内编辑功能

背景

JQuery Datatables editor 行内编辑功能相关推荐

最新文章

热门文章