layui是国人开发的一款简单的前端框架,今天给大家带来基础使用
html代码
<table class="layui-hide" id="demo" lay-filter="test"></table>
<!--需要提供的table表 -->
<!-- 工具栏 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" id='up1'>上传文件</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="select">查看图片</a>
</script>
js代码
layui .use('table',function() {//应用layui
var table= layui.table;//引用数据表格
table.render({
elem : '#demo',
height : 420,
url : '../BookAction.action?methodName=listBook&book_state=' + st // 数据接口
,
title : '用户表',
page : true // 开启分页
,
toolbar : 'default' // 开启工具栏,此处显示默认图标,可以自定义模板,详见文档
,
totalRow : true // 开启合计行
,
cols : [ [ // 表头
{
type : 'checkbox',//多选框
fixed : 'left'
}, {
field : 'book_id',//从后台传过来的数据项
title : '编号',
width : 90,
sort : true,
fixed : 'left'
}, {
field : 'book_name',
title : '书名',
width : 110
}, {
field : 'book_category_name',
title : '类型',
width : 90,
sort : true,
totalRow : true
}, {
field : 'book_author',
title : '作者',
width : 90,
sort : true
}, {
field : 'book_price',
title : '价格',
width : 90,
sort : true,
totalRow : true
}, {
field : 'publishing',
title : '出版社',
width : 100
}, {
field : 'book_desc',
title : '简介',
width : 160
}, {
field : 'book_image',
title : '图片',
width : 135,
sort : false,
totalRow : true
}, {//获取桌面的工具栏
fixed : 'right',
width : 165,
align : 'center',
toolbar : '#barDemo'
} ] ]
});
java代码
public class BookAction extends ActionSupport {
private IBookBiz ibBiz = new BookBizImpl(); //后台的数据
private PageBean pb = new PageBean();//分页
private Out o = new Out();//回调页面
public String listBook(HttpServletRequest request, HttpServletResponse response) {
pb.setPageBean(request);//初始化PageBean
Book book = new Book();//
List<Book> listBook = null;//定义list集合
try {
listBook = ibBiz.ListBook(book, pb);//拿到后台的数据
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
Map<String, Object> map = new HashMap<>();//传入前台所需要的数据格式也是这样
map.put("data", listBook);
map.put("code", 0);
map.put("count", 1);
map.put("msg", "");
String out = JSON.toJSONString(map);//回调会界面
try {
o.ptint(response, out);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}
html那里还需要导入layui包可以去官网下载