editable组件_表格行内编辑事件

1.简介
x-editable组件是一个适用于bootstrap（目前只更新到bootstrap3）,jquery，jquery UI三种风格样式的弹出框编辑插件。本文根据项目需求主要介绍它在bootstrap-tabe中的应用。
x-editable开源地址：https://github.com/vitalets/x-editable
x-editable文档地址：http://vitalets.github.io/x-editable/docs.html
x-editable在线Demo：http://vitalets.github.io/x-editable/demo-bs3.html

案例效果如下

官网地址：https://vitalets.github.io/x-editable/demo-bs3.html

开发汇总思路：

首先我们需要在我们当前的控制器所对应的JS文件头部添加依赖，追加一个editable，如下：

define(['jquery', 'bootstrap', 'backend', 'csmtable', 'form','upload','editable'], function ($, undefined, Backend, Table, Form, Upload)  {}

然后我们只需要在JS中的字段配置简单添加一个editable:true即可生效，例如：

{field: 'take_effect_status', title: '蓝牙生效状态', operate:false,editable: {type: 'select',pk: 1,source: [{value: '1', text: '有效'},{value: '2', text: '无效'},{value: '3', text: '待配置'},]},formatter: function (value, row) {return row.take_effect_status;}
},
{field: 'message', title: __('备注'),editable: {type: 'text',placeholder:"请输入蓝牙备注",emptytext : '空'
}},
//但其实editable参数还支持更多配置，例如：
{
field: 'SparePartName',title: '品名及规格型号',editable: {type: 'text',title: '品名及规格型号',validate: function (value) {if (!$.trim(value)) {return '不能为空';}}},halign: 'center',align: 'center'
},

新增编辑界面使用 edittable

$('.invoice_money').editable({type: 'text',title: '发票金额',success: function(response, newValue) {$(".invoice_money_s").val(newValue);}
});

editable组件_表格行内编辑事件相关推荐

bootstrap table 表格支持shirt 多选_bootstrap-table 表格行内编辑实现
这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能. 我的web前端学习交流群点击进入1045267283,欢迎加入! 先放一张效果图: 应用场景之前的项目也是采 ...
JS组件系列——BootstrapTable 行内编辑解决方案：x-editable
JS组件系列--BootstrapTable 行内编辑解决方案:x-editable 参考文章: (1)JS组件系列--BootstrapTable 行内编辑解决方案:x-editable (2)ht ...
python测试开发django-173.bootstrap实现table表格行内编辑
前言网上看了很多基于bootstrap的table表格行内编辑,需要基于bootstrap-table,bootstrap-table-edit,x-editable等插件,写的很复杂. 我想实现的 ...
Datatables实现表格行内编辑功能
表格行内编辑功能通过操作DOM来实现,最终实现效果如下代代码 html <table class="table table-striped table-bordered table-h ...
bootstrap表格行编辑状态_JS组件系列——BootstrapTable 行内编辑解决方案：x-editable...
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
datatables表格行内编辑的实现
Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...
表格行内编辑增删改查
前言最近在做一个OA系统,需要将大量excel中的数据录入,并且希望以后新建数据时,也能像excel那样方便.并且这个后台系统有非常多这样的表单.因此需要做一个内敛的表单控件. 上网找到一款编辑起来 ...
bootstrap表格行编辑状态_JS表格组件BootstrapTable行内编辑解决方案x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 参考文章: (1)js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable ...

editable组件_表格行内编辑事件

editable组件_表格行内编辑事件相关推荐

最新文章

热门文章