700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > editable组件_表格行内编辑事件

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

时间:2022-07-05 06:11:53

相关推荐

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

1.简介

x-editable组件是一个适用于bootstrap(目前只更新到bootstrap3),jquery,jquery UI三种风格样式的弹出框编辑插件。本文根据项目需求主要介绍它在bootstrap-tabe中的应用。

x-editable开源地址:/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);}});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。