表格组件
异步加载数据信息,在js中发送请求后台数据,后台响应json数据,然后前台再进行解析。其中比较重要的是json数据格式
示例
前台页面js
layui.use('table', function () {
var table = layui.table;
var dataTable = table.render({
elem: '#lib'
, url: 'queryBookList'
, toolbar: '#toolbarDemo'
, page: true
, where: {'name': ''}
, cols: [
[
{type: 'checkbox', align: 'center'}
, {field: 'bookId', width: 80, title: 'ID', sort: true, align: "center"}
, {field: 'name', width: 180, title: '图书名称', align: 'center'}
, {field: 'author', width: 120, title: '作者', align: 'center'}
, {field: 'introduction', width: 270, title: '介绍', align: 'center'}
, {field: 'publish', width: 220, title: '出版社', align: 'center'}
, {field: 'pubDate', width: 120, title: '出版日期', align: 'center'}
, {
templet: '<div>{{createrFormat(d.bookclass.className)}}</div>',
width: 120,
title: '图书分类',
align: 'center'
}
, {field: 'number', width: 80, title: '数量', align: 'center'}
]
]
});
后台响应json数据
实现效果
layui文件上传组件
在页面中添加文件上传组件,选择文件后实现异步上传,获取后台响应
json
数据中src,显示上传后的图片。如果是在表单上传图片,可以在表单提交时将上传后的路径保存在数据库中
html
<div class="layui-form-item">
<label class="layui-form-label">图片:</label>
<div class="layui-upload-drag" id="test1">
<i class="layui-icon"></i>
<p>点击上传,或将文件拖拽到此处</p>
<div class="layui-hide" id="uploadDemoView">
<hr>
<img style="max-width: 196px" alt="上传成功后渲染" src="">
</div>
</div>
</div>
js
layui.use('upload', function() {
var $ = layui.jquery
, upload = layui.upload;
//普通图片上传
upload.render({
elem: '#test1'
,url: '/image/upload' //改成您自己的上传接口
,done: function(res){
console.log(res.data.src);
if(res.code == 0){
layer.msg("上传成功",{icon:1})
layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
}else{
layer.msg("上传失败",{icon:2})
}
}
});
});
后端接口,上传成功后返回json数据,包括状态码、信息提示、文件上传后的地址
@PostMapping("upload")
public String upload(@RequestParam("file") MultipartFile multipartFile){
String filePath = imageService.upload(multipartFile);
Map<String,String> srcMap = new HashMap<>();
srcMap.put("src",filePath);
return JsonUtil.buildImageJsonData(0,"上传成功",srcMap);
}
示例