<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.
thymeleaf.org" xmlns:shiro="http://www.pollix.at/
thymeleaf/shiro"> <head> <th:block th:include="include :: header('123456789')"/> <th:block th:include="include :: datetimepicker-css"/> <!-- <th:block th:include="include :: datetimepicker-css"/>--> <th:block th:include="include ::
bootstrap-fileinput-css"/> </head> <style> </style> <body> <form
id="form-add" class="form-horizontal"> <div class="row"> <div class="col-sm-12"> <button type="button" class="btn btn-white btn-sm"
onclick="addRow()"><i class="fa fa-plus"> 增加</i></button> <button type="button" class="btn btn-white btn-sm"
onclick="sub.delRow()"><i class="fa fa-minus"> 删除</i> </button> <div class="col-sm-12 select-table table-striped"> <table
id="
bootstrap-table"></table> </div> </div> </div> <div class="row"> <div class="col-sm-offset-5 col-sm-10"> <button type="button" class="btn btn-sm btn-primary"
onclick="submitHandler()"><i class="fa fa-check"></i>保 存 </button> <button type="button" class="btn btn-sm btn-danger"
onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button> </div> </div> </form> <!--style="opacity: 0;position: absolute;z-index: -1;"--> <!--<div>--> <!-- <div class='file-loading'>--> <!-- <input class='form-control file-upload' name='file' type='file'
id="filex">--> <!-- </div>--> <!--</div>-->
<th:block th:include=“include :: footer”/>
<th:block th:include=“include :: echarts-js”/>
<th:block th:include=“include :: datetimepicker-js”/>
<th:block th:include=“include ::
bootstrap-fileinput-js”/>
<script th:inline="javascript"> $(function () { // 初始化数据, 可以由后台
传过来 var data = [ {
id: "100", name: "商品名称", weight: "100", price: "12.5", date: "2021-02-01", upload: "", type: "1", }, {
id: "101", name: "商品名称2", weight: "50", price: "10.8", date: "2021-02-01", upload: "", type: "0", }]; var options = { data: data, pagination: false, showSearch: false, showRefresh: false, showToggle: false, showColumns: false, s
idePagination: "client", columns: [{ checkbox: true }, { field: 'index', align: 'center', title: "序号", formatter: function (value, row, index) { var columnIndex = $.common.sprintf("<input type='h
idden' name='index' value='%s'>", $.table.serialNumber(index)); var column
Id = $.common.sprintf("<input type='h
idden' name='goods[%s].
id' value='%s'>", index, row.
id); return columnIndex
+ $.table.serialNumber(index)
+ column
Id; // return $.table.serialNumber(index)
+ column
Id; } }, { field: 'name', align: 'center', title: '商品名称', formatter: function (value, row, index) { var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].name' value='%s' >", index, value); return html; } }, { field: 'weight', align: 'center', title: '商品重量', formatter: function (value, row, index) { var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].weight' value='%s' >", index, value); return html; } }, { field: 'date', align: 'center', title: '商品日期', formatter: function (value, row, index) { var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].date' value='%s' >", index, value); return html; } }, { field: 'price', align: 'center', title: '商品价格', formatter: function (value, row, index) { var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].price' value='%s' >", index, value); return html; } }, { field: 'type', align: 'center', title: '商品种类', formatter: function (value, row, index) { var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].type' value='%s' >", index, value); return html; } }, { field: 'upload', align: 'center', title: '上
传', formatter: function (value, row, index) { // var upload = $.common.sprintf("<input class='file-upload'
id='goods[%s].upload' name='file' type='file'>", index); var html = $.common.sprintf("<input type='text' name='goods[%s].upload' value='%s' >", index, row.upload); var button = $.common.sprintf("<input type='button'
onclick='uploaddata(%s)' value='上
传' class='btn btn-primary'></input>", index); return html
+ button; } }, { title: '操作', align: 'center', formatter: function (value, row, index) { var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index); return '<a class="btn btn-danger btn-xs" href="javascript:vo
id(0)"
onclick="sub.delRowByIndex(\''
+ value
+ '\')"><i class="fa fa-remove"></i>删除</a>'; } }] }; $.table.init(options); }); function addRow() { var count = $("#"
+ table.options.
id).
bootstrapTable('getData').length; var row = { index: $.table.serialNumber(count), name: "", weight: "", price: "", date: "", type: "", } sub.addRow(row); }; /* 主子表-提交 */ function submitHandler(index, layero) { var data = $("#form-add").serializeArray(); alert(JSON.stringify(data)) $.operate.saveModal("", data); } $(".file-upload").fileinput({ uploadUrl: ctx
+ 'common/upload', maxFileCount: 1, autoReplace: true, showPreview: false }).on('fileuploaded', function (event, data, preview
Id, index) { $("input[name='"
+ event.currentTarget.
id + "']").val(data.response.url) }).on('fileremoved', function (event,
id, index) { $("input[name='"
+ event.currentTarget.
id + "']").val('') }) // 在打开子页面前设置全局变量存储当前索引 let currentUploadIndex = null; function uploaddata(index) { currentUploadIndex = index; // 存储当前操作的行索引 var url = ctx
+ "system/COMBINE/one7"; $.modal.openOptions({ title: '上
传文件', url: url, btn: 0 }) } // 修改消息监听（确保在document ready前执行） window.addEventListener("message", function(event) { // 验证消息来源（提高安全性） // if (event.origin !== window.location.origin) return; console.log(event); if (event.data && event.data.type === "uploadComplete") { const url = event.data.value; const index = currentUploadIndex; // 使用全局存储的索引 console.log("收到上
传完成消息:", {url, index}); $("input[name='goods["
+ index
+ "].upload']").val(url); } }, false); </script> </body> </html> <!DOCTYPE html> <html lang="zh" xmlns:th="http://www.
thymeleaf.org" xmlns:shiro="http://www.pollix.at/
thymeleaf/shiro"> <head> <th:block th:include="include :: header('123456789')"/> <th:block th:include="include :: datetimepicker-css"/> <!-- <th:block th:include="include :: datetimepicker-css"/>--> <th:block th:include="include ::
bootstrap-fileinput-css"/> </head> <style> </style> <body> <div> <div> <input type="text" name="filex"
id="inputfile"> <div class='file-loading'> <input class='form-control file-upload' name='file' type='file'
id="filex"> </div> </div> <div> <button
onclick="chuli()">确定</button> </div> </div> <th:block th:include="include :: footer"/> <th:block th:include="include :: echarts-js"/> <th:block th:include="include :: datetimepicker-js"/> <th:block th:include="include ::
bootstrap-fileinput-js"/> <script th:inline="javascript"> $(".file-upload").fileinput({ uploadUrl: ctx
+ 'common/upload', maxFileCount: 1, autoReplace: true, showPreview: false }).on('fileuploaded', function (event, data, preview
Id, index) { $("input[name='"
+ event.currentTarget.
id + "']").val(data.response.url) }).on('fileremoved', function (event,
id, index) { $("input[name='"
+ event.currentTarget.
id + "']").val('') }) function chuli() { const url = $("#inputfile").val(); // console.log(url); if (!url) { alert("请先上
传文件"); return; } $.modal.close(); } </script> </body> </html>
这是我的两个页面的代码，我使用的是ruoyi框架是使用
bootstrap前端框架的版本 我现在需要
点击上
传按钮，跳转到使用ruoyi自带的openoptions打开的页面来上
传文件然后
点击确定按钮把url
传回原页面，进行处理
本文介绍了如何在SpringBoot项目中，利用Thymeleaf模板引擎和Bootstrap模态框，实现在点击按钮时将订单ID传送到模态框展示的详细步骤和代码示例。
最低0.47元/天 解锁文章
扫一扫
7446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
