bootstrap X-editable使用。

x-editable英文官网
参考 – 中文文档
demo

需求：如下图所示，我想要在点击 高于20 时，弹出框内只显示20（弹出框做数字验证）。修改为50后点击对号保存。表格内的高于20 变为 高于50 。

最终效果如下图：

修改其值为50，保存。

配合bootstrap-table使用

表格由js生成：

var _tableChartInitFun = function () {var column = [ {field : 'val1',title : '安全-绿灯(%)',align : "right",halign: "center",valign : "middle",editable: {type: 'text',title: '安全-绿灯(%)',validate: function (v) {if (isNaN(v)) {return '阈值必须为数字';}if (!v) {return '阈值不能为空';}}}}, {field : 'val2',title : "中等风险-黄灯(%)",align : "right",halign: "center",formatter: function (value, row, index) {if(row.field == 'XJLLPHL'){return row.val4 + '-' + row.val1}else {return row.val1 + '-' + row.val4}}}, {field : 'val4',title : "高风险-红灯(%)",align : "right",halign: "center",editable: {type: 'text',title: '高风险-红灯(%)',validate: function (v) {if (isNaN(v)) {return '阈值必须为数字';}if (!v) {return '阈值不能为空';}}},formatter: function (value, row) {return row.val3 + value}}];$('#table').bootstrapTable({columns: column,toolbar: "#toolbar",idField: "Id",mergeCellField: 'ZWLX,ZB',stickyHeader : true,stickyHeaderOffsetY: '0px',fixedColumns : true,fixedNumber : 1,pagination: false,sidePagination: 'client',//前台分页pageSize: 10,pageList: [10, 25, 50, 100],// onEditableSave 是修改完成，保存触发的事件。onEditableSave: function (field, row, oldValue, $el) {for (let i = that.model.qujian.source.length - 1; i >= 0; i--) {if(that.model.qujian.source[i]['field'] == row.field){that.model.qujian.source[i].field = row.field}}that.view.tableChart.dom.bootstrapTable("load", {data: that.model.qujian.source});},// onEditableShown 事件是弹出框显示时触发的事件.onEditableShown: function (field, row, $el, editable) {// field 是点击单元格所在列的field字段名// row  是点击单元格所在行的所有数据// $el 点击的元素// editable 包含弹出框一些元素$(editable.input.$input[0]).val(row[field])}});}

单独使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="../../accumulate/plugin/x-editable-develop/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /><script src="e:/accumulate/plugin/jquery/jquery-3.3.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script src="../../accumulate/plugin/x-editable-develop/bootstrap3-editable/js/bootstrap-editable.min.js"></script></head><body><div class="container"><div class="row"><div class="col-md-12"><div><span id="cel">ceel</sp></div></div></div></div><script>$('#cel').editable({type: 'text',title: 'mrceel',disabled: false,           //是否禁用编辑mode: 'inline', //popup | inlinevalidate: function (value) { //字段验证if (!$.trim(value)) {return '不能为空';}},display: function(value){ // 格式化显示 $(this) == $('#cel')// value 原始值$(this).text(value + '$');},});$('#cel').on('save', function(e, params) { // 保存时触发alert('Saved value: ' + params.newValue);});$('#cel').on('shown', (e, editable) => { //弹出框显示时触发console.log('shown,', e, editable)})</script></body></html>

bootstrap X-editable使用。相关推荐

bootstrap editable有默认值
function listEditor(data,productCode) {$('#tab1').bootstrapTable('load', data);$('#tab1').bootstrapT ...
bootstrap editable
function list(data) {$('#tab').bootstrapTable('load', data);$('#tab').bootstrapTable({method:'POST', ...
bootstrap editable 动态改变列的编辑状态
$('#table a[data-name=name].editable').editable('toggleDisabled');
bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
基于jquery的bootstrap在线文本编辑器插件Summernote （转）
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
Bootstrap的x-editable行编辑
x-editable插件支持行编辑首先,引入Jquery的JS,Bootstrap的CSS和JS 然后,引入插件的CSS和JS <link type="text/css" ...
bootstrap table使用参考
https://www.cnblogs.com/landeanfen/p/5821192.html 转载阅读目录一.x-editable组件介绍二.bootstrapTable行内编辑初始方案 ...
黄聪： 50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...
12 Essential Bootstrap Tools for Web Designers
12 Essential Bootstrap Tools for Web Designers Posted by vikas on June 6, 2014, filed in: Tools, Web ...
50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...

bootstrap X-editable使用。

配合bootstrap-table使用

单独使用

bootstrap X-editable使用。相关推荐

最新文章

热门文章