RuoYi单体版Table行内编辑

已于 2024-04-02 15:34:06 修改
阅读量505 收藏 1
点赞数 6
分类专栏： RuoYi 文章标签： java
于 2024-04-02 14:25:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43910581/article/details/137267950
版权
本文详细描述了如何在RuoYi单体应用中集成BootstrapTable实现行内编辑功能，包括引入CSS和JS文件，配置表格选项，以及处理行内编辑数据的AJAX提交和验证过程。
摘要由CSDN通过智能技术生成

RuoYi单体版Table行内编辑

第一步：标签中引入

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

第二步：

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

第三步：

<div class="col-sm-12 select-table table-striped"><table id="bootstrap-table"></table></div>

第四步：

<script th:inline="javascript">
$(function() {
    var id = document.getElementById('id').value;
    var options = {
        url: prefix + "/forwardContainerData/"+id,
        modalNameDel: "用箱明细",
        showSearch: false,
        showRefresh: false,
        showToggle: false,
        showColumns: false,
        onEditableSave: onEditableSave,//开启行内编辑功能
        columns: [{
            checkbox: true
        },{
            title: "序号",
            formatter: function (value, row, index) {
                return $.table.serialNumber(index);
            }
        },
            {
                field: 'containerNo',
                title: '箱号',
                align: "center",
                sortable: true,
                editable : {//设置可以编辑的列
                    type : 'text',//弹框类型 文本
                    title : '箱号',//弹框标题
                    emptytext : "箱号为空",//无值 提示文字
                    validate : function(value) {
                        if (value.length == 0) {
                            return '箱号不能为空';
                        }
                    },
                }
            },
            {
                field: 'containerNo',
                title: 'XXXX',
                align: "center"
            },
            {
                field: 'containerNo',
                title: 'XXXX',
                align: "center"
            },
            {
                field: 'containerNo',
                title: 'XXXX',
                align: "center"
            },
        ]};
    $.table.init(options);
});

//行内编辑 提交数据
function onEditableSave (field, row, oldValue, $el) {
    var initValue = $el;
    $.ajax({
        type: "post",
        url: prefix + "/editableSave",//ajax提交数据接口    data封装各参数
        data: {
            "oldValue": initValue,//表格列表显示的老数据值
            "newValue": row[field]//行内编辑文本框内容
        },
        success: function (data, status) {
            if (status == 'success') {
                if(data =="SUCCESS"){
                    $.modal.msgSuccess("修改成功！");
                }else{
                    if(data =="ERROR"){
                        $.modal.msgError("修改失败！");
                    }else{
                        $.modal.msgError(data);
                    }
                    $("#bootstrap-table").bootstrapTable('refresh');
                }
            }else{
                $("#bootstrap-table").bootstrapTable('refresh');
                $.modal.msgError("修改失败！");
            }
        },
        error: function () {
            $("#bootstrap-table").bootstrapTable('refresh');
            return '编辑失败';
        },
        complete: function () {

        }
    });
}

第五步：

	function submitHandler() {
	   if ($.validate.form()) {
	       //获取选中行数据
	       var rowsData = $('#bootstrap-table').bootstrapTable('getSelections');
	       var business = document.getElementById('business').value;
	       var forwarderNo = document.getElementById('forwarderNo').value;
	       var config = {
	           url: prefix + "/confirmForwardContainer",
	           type: "post",
	           dataType: "json",
	      data{"business":business,"forwarderNo":forwarderNo,"rowsData":JSON.stringify(rowsData)},
	           beforeSend: function () {
	               $.modal.loading("正在处理中，请稍后...");
	               $.modal.disable();
	           },
	           success: function(result) {
	               $.operate.successCallback(result);
	           }
	       };
	       $.ajax(config)
	   }
	}

完整示例

<!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('选中用箱明细')"/>
    <link href="/ajax/libs/select2/select2.min.css" rel="stylesheet"/>
    <link href="/ajax/libs/select2/select2-bootstrap.css" rel="stylesheet"/>
    <th:block th:include="include :: bootstrap-editable-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-forwarder-edit" th:object="${forwarder}">
        <input name="id" type="hidden" th:field="*{id}"/>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">业务类型：</label>
            <div class="col-sm-8 paddingZero">
                <select class="form-control" name="business" id="business" required>
                    <option value="SOC正常用箱" th:field="*{business}">SOC正常用箱</option>
                    <option value="租箱" th:field="*{business}">租箱</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label  is-required">小单号：</label>
            <div class="col-sm-8 paddingZero">
                <input class="form-control" type="text" name="forwarderNo" id="forwarderNo" th:field="*{forwarderNo}"
                       required>
            </div>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-css"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-table-editable-js"/>
<script th:inline="javascript">
    $(function () {
        var id = document.getElementById('id').value;
        var options = {
            url: prefix + "/forwardContainerData/" + id,
            modalNameDel: "用箱明细",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            onEditableSave: onEditableSave,
            columns: [{
                checkbox: true
            }, {
                title: "序号",
                formatter: function (value, row, index) {
                    return $.table.serialNumber(index);
                }
            },
                {
                    field: 'containerNo',
                    title: '箱号',
                    align: "center",
                    sortable: true,
                    editable: {
                        type: 'text',//弹框类型 文本
                        title: '箱号',//弹框标题
                        emptytext: "箱号为空",//无值 提示文字
                        validate: function (value) {
                            if (value.length == 0) {
                                return '箱号不能为空';
                            }
                        },
                    }
                },
                {
                    field: 'containerNo',
                    title: 'XXXX',
                    align: "center"
                },
                {
                    field: 'containerNo',
                    title: 'XXXX',
                    align: "center"
                },
                {
                    field: 'containerNo',
                    title: 'XXXX',
                    align: "center"
                },
            ]
        };
        $.table.init(options);
    });

    //行内编辑 提交数据
    function onEditableSave(field, row, oldValue, $el) {
        var initValue = $el;
        $.ajax({
            type: "post",
            url: prefix + "/editableSave",//ajax提交数据接口    data封装各参数
            data: {
                "oldValue": initValue,//表格列表显示的老数据值
                "newValue": row[field]//行内编辑文本框内容
            },
            success: function (data, status) {
                if (status == 'success') {
                    if (data == "SUCCESS") {
                        $.modal.msgSuccess("修改成功！");
                    } else {
                        if (data == "ERROR") {
                            $.modal.msgError("修改失败！");
                        } else {
                            $.modal.msgError(data);
                        }
                        $("#bootstrap-table").bootstrapTable('refresh');
                    }
                } else {
                    $("#bootstrap-table").bootstrapTable('refresh');
                    $.modal.msgError("修改失败！");
                }
            },
            error: function () {
                $("#bootstrap-table").bootstrapTable('refresh');
                return '编辑失败';
            },
            complete: function () {

            }
        });
    }
</script>
<script type="text/javascript">
    var prefix = ctx + "business/forwarder";
    layui.use(['laydate'], function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#boxdate',
            type: 'date',
        });
        laydate.render({
            elem: '#eta',
            type: 'date',
        });
        laydate.render({
            elem: '#etd',
            type: 'date',
        });
        laydate.render({
            elem: '#surrenderTime',
            type: 'date',
            trigger: 'click',
        });
    })

    $("#form-forwarder-edit").validate({
        focusCleanup: true
    });

    //弹窗确定提交
    function submitHandler() {
        if ($.validate.form()) {
            //获取选中行数据
            var rowsData = $('#bootstrap-table').bootstrapTable('getSelections');
            var business = document.getElementById('business').value;
            var forwarderNo = document.getElementById('forwarderNo').value;
            var config = {
                url: prefix + "/confirmForwardContainer",
                type: "post",
                dataType: "json",
                data: {"business": business, "forwarderNo": forwarderNo, "rowsData": JSON.stringify(rowsData)},
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍后...");
                    $.modal.disable();
                },
                success: function (result) {
                    $.operate.successCallback(result);
                }
            };
            $.ajax(config)
        }
    }
</script>
</body>
</html>
<style>
    .paddingZero {
        padding-right: 0;
        padding-left: 0;
    }
</style>
自由的风~~
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap表格行内编辑
02-21
boostrap-table行内编辑功能，可以进行新行的添加-保存-删除-取消功能，也可对数据行进行修改-删除和取消编辑的功能。本资源为示例代码，依据boostrap-table的官方API进行操作
ruo-vue单体版本项目
04-08
前端后端都有 可以进行代码生成，生成简单的基础类 sql文件在java后端项目的sql文件夹里
若依行内编辑 X-editable搭配Bootstrap-DatePicker控件
test
01-07 3434
bootstrap-editable自带的DatePicker基础版：https://blog.csdn.net/torpidcat/article/details/103871641 -------------------------------------------------------------------------------------- 下面是结合Bootstr...
BootStrap Table行内编辑
2401_85112384的博客
05-25 817
///元素失去焦点事件//单元格修改后的的值})添加上面代码后，就可以看到单元格的可编辑效果了。如下图。修改后的数据，单元格失去焦点后控制台输出的数据。可以看出表格内容是修改了，但DOM中的当前行row内容却没有和表格中数据同步，需要通过表格的updateCell方法来更新一下单元格的数据。修改后代码如下。//元素失去焦点事件//单元格修改后的的值//updateCell更新某单元格数据index: index, //行索引。
若依行内编辑
test
09-25 3450
需求 实现参考 https://gitee.com/y_project/RuoYi/commit/c2e425aa1255c668d6daf5bb55df4d09200f485b#diff-8 1. 下载若依最新代码，拷贝git上绿色文件到本地项目对应目录下，或者这里下载(不是最新代码)https://pan.baidu.com/s/10HdguP_EXW3ynF_...
若依 ruoyi 分离版 vue 简单的行内编辑实现
最新发布
test
06-28 760
需要实现的效果：双击文本 - 修改文本 - 保存修改。后端数据集合对象中，新增属性 isEditing。在上面源码基础上进行编辑，新增如下。1. 想要一体版的，看这里。原码：仅文本显示文字内容。
ruoyi 若依行内编辑 提交修改 文本回滚 bootstrap-editable onEditableSave
test
01-03 3563
参考： https://www.cnblogs.com/zhuyeshen/p/11430605.html 引入相关文件 <link th:href="/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.css" rel="stylesheet"/> -------------...
若依 BootstrapTable 行内编辑组件：x-editable
test
01-07 2259
若依框架的行内编辑支持 文本、下拉、单选、文本域、select2等。 BootstrapTable 行内编辑 基于 x-editable 组件 https://www.cnblogs.com/landeanfen/p/5821192.html 官方demo http://vitalets.github.io/x-editable/demo-bs3.html 文本框 ...
RuoYi开发手册（离线版）
07-21
《RuoYi开发手册（离线版）》是一份专为开发者提供的详尽指南，主要涵盖了RuoYi框架的使用、配置、开发以及优化等多个方面。RuoYI是一个基于Spring Boot的企业级快速开发平台，旨在提高开发效率，减少重复工作。以下...
RuoYi-Vue全新Pro版本
10-09
RuoYi-Vue全新Pro版本，优化重构所有功能。基于Spring Boot + MyBatis Plus + Vue & Element实现的后台管理系统+微信小程序，支持RBAC动态权限、数据权限、SaaS多机场、Flowable工作流、三方登录、支付、短信、商城...
ruoyi-Oracle版本
11-11
"ruoyi-Oracle版本" 是一个专门针对Oracle数据库系统的软件版本，可能是一个基于Oracle数据库的应用框架或管理系统。从这个标题我们可以推测，它可能是Ruoyi框架的一个变体，优化了对Oracle数据库的支持。Ruoyi是一...
x-editable行内编辑bootstraptable所需包
03-13
x-editable行内编辑bootstraptable所需包，包括js文件和css文件
ruoyi框架 3.8.7 版本，升级到jdk21 springboot 3.2.5 初步测试可以运行通过
05-06
Ruoyi框架是一款基于Spring Boot和Vue.js开发的企业级后台管理系统，它提供了丰富的功能模块，如权限管理、内容管理、工作流等，旨在简化企业级应用的开发过程。标题提到的"ruoyi框架 3.8.7 版本"，意味着这是一个...
若依框架行类编辑
qq_46161815的博客
02-25 1603
若依框架行类编辑 <th:block th:include=“include :: bootstrap-editable-css” /> <th:block th:include=“include :: bootstrap-table-editable-js” /> { field : ‘userCode’, title : ‘用户编号’, editable: true }, { field : ‘userName’, title : ‘用户姓名’, editable : { t
JS组件系列——BootstrapTable 行内编辑解决方案：x-editable
weixin_33973609的博客
09-01 1181
前言：之前介绍bootstrapTable组件的时候有提到它的行内编辑功能，只不过为了展示功能，将此一笔带过了，罪过罪过！最近项目里面还是打算将行内编辑用起来，于是再次研究了下x-editable组件，遇到过一些坑，再此做个采坑记录吧！想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器：bootstrap table。 本文原创地址：http://www.cnblo...
Vue 实现 html 表格 (grid) 单元格编辑功能
yxp 的博客
02-09 3083
这里写自定义目录标题Vue 实现表格单元格的原位编辑起初功能问题期待天降大神前来解救。 Vue 实现表格单元格的原位编辑 这里是 Vue 初学者的笔记，老鸟请回避。如果你是热心的前辈，热切期盼您留下宝贵的意见。 起初 有一个小需求，我希望通过浏览器读入 excel 文件，并可以在网页上修改数据，查了一些 grid 编辑的 JS 插件，真是多如牛毛，导致了我的选择困难症发作。而为了编辑几个简单的数据，专门引入插件似乎有点不划算，我决定自己写。花一个小时认真阅读 Vue 介绍后开始动手码砖，成功如下： 功能
vue2中使用el-table实现直接编辑表格，鼠标点击空白处实现保存并传递给后端的简单方法
Chen__FY的博客
12-07 2765
需求实现如下：点击某个单元格实现整行数据高亮，并且可以修改，修改完成后鼠标点击空白处，实现保存修改后的整行数据并传递给后端。，当不点击单元格时显示值，点击单元格时显示编辑框，用。，意思就是选中某个数据行时,高亮该行。3. 在el-input中。1.首先我们需要用到。
Ruoyi框架/bootstrap-table 动态列+组合表头实现复杂统计表格
01-09 5629
Ruoyi框架/bootstrap-table 动态列+组合表头实现复杂统计表格
ruoyi table元素笔记
fgfg55666的博客
12-24 1424
.edtend() 合并方法，首选传进来的 参数执行 行内编辑函数 function onEditableSave (field, row, rowIndex, oldValue, $el) { $.ajax({ type: "post", url: prefix + "/edit", data: row, dataType: 'JSON',
ruoyi-fast行内编辑功能怎么实现？
05-27
Ruoyi-fast使用的是Vue.js作为前端框架，其行内编辑功能可以通过Vue.js提供的组件和指令实现。具体实现步骤如下： 1. 在需要编辑的元素上添加 `contenteditable` 属性，使其可编辑。 2. 使用 `v-model` 指令绑定数据，将编辑后的内容保存到变量中。 3. 监听元素的 `blur` 事件，当元素失去焦点时触发事件，将变量中的内容保存到数据库中。 以下是一个示例代码： ``` <template> <div> <span contenteditable v-model="content" @blur="saveContent" > {{ content }} </span> </div> </template> <script> export default { data() { return { content: '默认内容' } }, methods: { saveContent() { // 将编辑后的内容保存到数据库中 } } } </script> ``` 当用户编辑完内容并使元素失去焦点时，调用 `saveContent` 方法将编辑后的内容保存到数据库中即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值