<!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,
sidePagination: "client",
columns: [{
checkbox: true
},
{
field: 'index',
align: 'center',
title: "序号",
formatter: function (value, row, index) {
var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
var columnId = $.common.sprintf("<input type='hidden' name='goods[%s].id' value='%s'>", index, row.id);
return columnIndex + $.table.serialNumber(index) + columnId;
// return $.table.serialNumber(index) + columnId;
}
},
{
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:void(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, previewId, index) {
$("input[name='" + event.currentTarget.id + "']").val(data.response.url)
}).on('fileremoved', function (event, id, index) {
$("input[name='" + event.currentTarget.id + "']").val('')
})
function uploaddata(data) {
var url = ctx + "system/COMBINE/one7?index=" + data;
// $.modal.open('onetest', url)
$.modal.openOptions({
title: '上传文件',
url: url,
btn: 0
})
}
$(document).ready(function () {
// 接收子页面传来的消息
window.addEventListener("message", function (event) {
if (event.data && event.data.type === "uploadComplete") {
var url = event.data.value;
console.log(url);
// 设置对应商品的上传字段
$("input[name='goods[" + event.data.index + "].upload']").val(url);
}
});
});
</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, previewId, index) {
$("input[name='" + event.currentTarget.id + "']").val(data.response.url)
}).on('fileremoved', function (event, id, index) {
$("input[name='" + event.currentTarget.id + "']").val('')
})
// var url = ctx + "system/COMBINE/one7?index=" + index;
// 获取父页面传入的 index（例如通过URL参数）
const urlParams = new URLSearchParams(window.location.search);
// console.log(urlParams);
const rowIndex = urlParams.get('index'); // URL参数中传入当前行索引
console.log(rowIndex);
function chuli() {
var url = $("#inputfile").val();
if (!url) {
alert("请先上传文件");
return;
}
// 使用 postMessage 向父页面发送消息
window.parent.postMessage({
type: 'uploadComplete',
value: url,
index: rowIndex // 传回当前行索引
}, '*');
$.modal.close();
}
</script>
</body>
</html>
这是我的两段代码，我这个使用的是ruoyi，bootstrap版本的，我使用 // 使用 postMessage 向父页面发送消息
window.parent.postMessage({
type: 'uploadComplete',
value: url,
index: rowIndex // 传回当前行索引
}, '*'); 和$(document).ready(function () {
// 接收子页面传来的消息
window.addEventListener("message", function (event) {
if (event.data && event.data.type === "uploadComplete") {
var url = event.data.value;
console.log(url);
// 设置对应商品的上传字段
$("input[name='goods[" + event.data.index + "].upload']").val(url);
}
});
});
没有用
本文介绍了一种通过点击事件实现页面跳转的方法,使用JavaScript控制窗口定位到指定URL：Add.aspx。此技术常见于网页应用中，以实现用户交互和导航。
扫一扫
2819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
