bootstrap编辑行内元素

最新推荐文章于 2024-08-15 10:01:39 发布

羊驼是真的羊吗

最新推荐文章于 2024-08-15 10:01:39 发布

阅读量712

点赞数

分类专栏： boostrap

本文链接：https://blog.csdn.net/Jeremz/article/details/106657797

版权

boostrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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("出错啦！");
                }
            })

        }