layui-mini+spring boot实现table搜索操作传参

5 篇文章 0 订阅
3 篇文章 0 订阅

项目场景:

layui-mini + spring boot
使用table.reload实现搜索操作的传参


问题描述:

layui向后端传的json格式数据

!](https://img-blog.csdnimg.cn/2021051814013589.png)

因table.reload在传参时默认携带page和limit参数,导致@requestParam、@requestBody和Servlet 无法接收到实体JSON数据。


解决方案:

使用最原始的方法,将json格式数据全部读入,在controller里做手动解析

// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
    var positions = [];
    $('input[type=checkbox]:checked').each(function() {
        positions.push($(this).val());
    });
    data = data.field;
    console.log(JSON.stringify(data))
    var result = {
        "positions":positions,
        "code":data.code,
        "name":data.name,
        "startTime":data.startTime,
        "endTime":data.endTime,
        "minSalary":data.minSalary,
        "maxSalary":data.maxSalary
    };
    result = JSON.stringify(result)
    console.log(result)
    //执行搜索重载
    table.reload('currentTableId', {
        url:"/stuff/search.do",
        contentType : "application/json",
        dataType:"JSON",
        traditional:true,//防止深度序列化
        method:"POST",
        where: {
            searchStuff: result
        }
    }, 'data');

    return false;
});

Controller

@RequestMapping("/search.do")
@ResponseBody
public Resp searchDo(@RequestBody JSONObject jsonParam){
	SearchStuff searchStuff = 	JSON.toJavaObject(JSON.parseObject(jsonParam.get("searchStuff").toString()), SearchStuff.class);
	if(searchStuff.getPositions().length==0)
	        searchStuff.setPositions(null);
	System.out.println(searchStuff);
	List<Stuff> list = stuffServer.searchByCodeNamePositionTimeAndSalary(searchStuff);
	Resp resp = new Resp(RespCode.SUCCESS, list, list.size());
	return resp;
	}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现在线预览 Word 文档,可以利用第三方库 Aspose.Words。Aspose.Words 是一个用于 .NET、Java、C++ 的 API,可以轻松地读取、写入和转换各种文档格式,包括 Word、PDF、HTML、Markdown 等。 在使用 Aspose.Words 时,需要先将 Word 文档转换为 HTML 格式,然后在网页中嵌入 HTML 代码即可。 下面是一个基于 Spring BootLayui 的在线预览 Word 文档的示例代码: 1. 引入 Aspose.Words 和 Layui 的依赖: ```xml <dependency> <groupId>com.aspose</groupId> <artifactId>aspose-words</artifactId> <version>21.5</version> </dependency> <dependency> <groupId>com.github.dkuang</groupId> <artifactId>layui</artifactId> <version>2.5.7</version> </dependency> ``` 2. 编写 Controller: ```java @RestController @RequestMapping("/word") public class WordController { @PostMapping("/preview") public String preview(@RequestParam("file") MultipartFile file) throws Exception { // 将 Word 文档转换为 HTML Document document = new Document(file.getInputStream()); HtmlSaveOptions saveOptions = new HtmlSaveOptions(); saveOptions.setExportImagesAsBase64(true); ByteArrayOutputStream outputStream = new ByteArrayOutputStream(); document.save(outputStream, saveOptions); String html = new String(outputStream.toByteArray(), StandardCharsets.UTF_8); // 生成预览页面 return "<!DOCTYPE html>\n" + "<html>\n" + "<head>\n" + " <meta charset=\"UTF-8\">\n" + " <title>预览</title>\n" + " <link rel=\"stylesheet\" href=\"/layui/css/layui.css\">\n" + "</head>\n" + "<body>\n" + " <div class=\"layui-container\">\n" + " <div class=\"layui-row layui-col-space15\">\n" + " <div class=\"layui-col-md12\">\n" + html + " </div>\n" + " </div>\n" + " </div>\n" + " <script src=\"/layui/layui.js\"></script>\n" + "</body>\n" + "</html>"; } } ``` 3. 编写 HTML 页面: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上 Word 文档</title> <link rel="stylesheet" href="/layui/css/layui.css"> </head> <body> <div class="layui-container"> <div class="layui-row layui-col-space15"> <div class="layui-col-md6"> <form class="layui-form" enctype="multipart/form-data"> <div class="layui-form-item"> <label class="layui-form-label">选择文件</label> <div class="layui-input-block"> <input type="file" name="file" class="layui-upload-file"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="button" class="layui-btn" lay-submit lay-filter="preview">预览</button> </div> </div> </form> </div> </div> </div> <script src="/layui/layui.js"></script> <script> layui.use(['form', 'upload'], function () { var form = layui.form; var upload = layui.upload; upload.render({ elem: '.layui-upload-file', url: '/word/preview', accept: 'file', done: function (res) { if (res.code === 0) { var index = layer.open({ type: 1, title: '预览', area: ['800px', '600px'], content: res.data }); } else { layer.msg(res.msg, {icon: 2}); } }, error: function () { layer.msg('上失败', {icon: 2}); } }); form.on('submit(preview)', function (data) { var file = $('.layui-upload-file')[0].files[0]; if (!file) { layer.msg('请选择文件', {icon: 2}); return false; } return true; }); }); </script> </body> </html> ``` 4. 运行程序并访问页面即可实现在线预览 Word 文档。 需要注意的是,由于 Aspose.Words 是第三方库,需要购买授权才能使用。如果不想购买授权,也可以使用其他的第三方库或者在线转换工具来实现 Word 转 HTML 的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值