bootstrap X-editable使用。

article/2025/9/13 17:22:21

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>