bootstrap编辑行内元素

最新推荐文章于 2025-09-06 09:29:37 发布

原创最新推荐文章于 2025-09-06 09:29:37 发布 · 760 阅读

0 ·

CC 4.0 BY-SA版权

boostrap 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在动态表格中实现字段的在线编辑与数据验证，包括引入必要的css和js文件，配置字段属性如类型、标题、空文本提示及验证规则，以及通过ajax提交更新后的数据并刷新表格。

1.引入css 和 js

 <th:block th:include="include :: bootstrap-editable-css" />
 <th:block th:include="include :: bootstrap-table-editable-js" />

2.在动态表格处加上

onEditableSave: onEditableSave,

在这里插入图片描述
3.添加方法

 {
                    field : 'test', 
                    title : '字段名',
                    editable : {
                        type : 'text',
                        title : '金额',
                        emptytext : "无",
                        validate : function(value) {
                            if(!value.match(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9][0-9])?$)/)){
                                return '请输入合法金额';
                            }
                            if (value.length > 30) {
                                return '金额不能大于10亿';
                            }
                            if (value.length == 0) {
                                return '金额不能为空';
                            }
                        },
                    }
                },

4.添加方法

function onEditableSave (field, row, oldValue, $el) {
            // alert("字段名：" + field + "，当前值：" + row[field]  + "，旧值：" + oldValue+",当前工单号"+row.woNum);
            $.ajax({
                url: ,
                data: {
                    //下面这个是用来直接获取 field 值
                    [`${field}`]: row[field],
                },
                type:"post",
                success: function (data) {
                //成功就销毁原表格 重新加载新的
                    $("#bootstrap-table").bootstrapTable('destroy');
                    $.table.init(tablee);
                },
                error: function (data) {
                    $.modal.alertError("出错啦！");
                }
            })

        }