bootstrap X-editable使用。

最新推荐文章于 2024-09-13 22:00:46 发布

Mrceel

最新推荐文章于 2024-09-13 22:00:46 发布

阅读量2.8k

点赞数

分类专栏：前端 # JQuery 文章标签： bootstrap table x-editable

本文链接：https://blog.csdn.net/Mrceel/article/details/100523326

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JQuery

2 篇文章 0 订阅

订阅专栏

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 | inline
            validate: 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>