《layUI 的数据表格》

最新推荐文章于 2022-12-15 14:01:46 发布

ξ答案℡

最新推荐文章于 2022-12-15 14:01:46 发布

阅读量314

点赞数

CC 4.0 BY-SA版权

分类专栏： layUI 文章标签： layUI

本文链接：https://blog.youkuaiyun.com/weixin_42585871/article/details/83869964

layUI 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何利用layUI插件在网页上实现数据表格功能，包括Action代码、JSP页面配置、JS交互逻辑及样式的详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Action

        private t_book_vo bookvo = new t_book_vo();
	private bookDao_vo bdv = new bookDao_vo();
	
	public String selBooksAll(HttpServletRequest req, HttpServletResponse resp) {
		try {
			List<t_book_vo> bookListAll = bdv.bookListAll(bookvo, null);
			Map<String, Object> booksMap = new HashMap<>();
			//layUI数据表格的四个参数
			booksMap.put("code", 0); //参数一
			booksMap.put("msg", ""); //参数二
			booksMap.put("count", bookListAll.size()); //参数三：数据长度（重要）
			booksMap.put("data", bookListAll); //参数四：数据（重要）
			ObjectMapper om = new ObjectMapper();
			JSonUtil.write(resp, om.writeValueAsString(booksMap));
		} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (NoSuchFieldException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SecurityException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (JsonProcessingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return "null";
	}

2.jsp引入插件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE>

<!-- layUI插件引用标签 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">

<!--  jQuery插件引用标签 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/zTree/js/jquery-1.4.4.min.js"></script>

<!-- 自定义js插件引用标签  -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/demo0.js"></script>

3.js

$(function() {
	
  var demo0URL=$("#demo0URL").val(); //绝对路径

layui.use(['table','layer'], function(){
  var table = layui.table,
      layer = layui.layer;
  
  //第一个实例
  table.render({
    elem: '#demo0', //容器id
    id: 'books',
    title: "书籍表",
    height: 680, //容器高度
    cellMinWidth:90, //全局定义所有常规单元格的最小宽度（默认：60）
    url: demo0URL+'/booksAction_vo.action?methodName=selBooksAll', //数据接口
    page: true, //开启分页
    totalRow:true, //是否开启合计行区域
//    limit:10, //每页最小条数
    limits:[10,20,30,40,50,100], //分页条数
    toolbar: '#addBookY', //开启表格头部工具栏区域
    defaultToolbar: ['filter', 'print', 'exports'], //自由配置头部工具栏右侧的图标，数组
    loading:true, //是否显示加载条（默认：true）
    cols: [[ //表头
       {field: 'checkboxBooks', title: 'checkbox', width: 90, align:'center', type:'checkbox', LAY_CHECKED:true, event:'checkbox', style:'background-color: #d2d2d2; color: #d2d2d2;'} //复选框
      ,{field: 'book_id', title: 'ID', width: 150, sort: true} //, fixed: 'left' 锁定列高
      ,{field: 'book_name', title: '书名', width:150, edit:'text', event:'edit'}
      ,{field: 'file_name', title: '图片', width: 150,minWidth: 100,templet:'<div><img src="{{ d.file_name}}"></div>',style:'height:50px!important;'}
      ,{field: 'book_author', title: '作者', width:130}
      ,{field: 'book_price', title: '价格', width: 90, align:'center', sort: true} 
      ,{field: 'sales_volume', title: '销量', width: 90, align:'center', sort: true, totalRow:true}
      ,{field: 'publishing', title: '出版社', width: 150}
      ,{field: 'book_state', title: '状态', width: 90, align:'center'}
      ,{field: 'book_desc', title: '简介', width: 240, unresize:true}
      ,{field: 'barBook', title: '操作', width: 160, fixed:'right', unresize:true, style:'background-color: #d2d2d2; color: #d2d2d2;', toolbar: '#barDemo'}
    ]]
  });
  


var checkStatus = table.checkStatus('books'); //idTest 即为基础参数 id 对应的值
console.log(checkStatus.data); //获取选中行的数据
console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ); //表格是否全选



table.on('checkbox(test)', function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});



table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
	  console.log(obj.value); //得到修改后的值
	  console.log(obj.field); //当前编辑的字段名
	  console.log(obj.data); //所在行的所有相关数据  
	});



//添加书籍
document.getElementById('ButtonAddY').onclick = function () {
    layer.open({
        type: 2, //弹出层类别:layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
        fixed: true, //即鼠标滚动时，层是否固定在可视区域(true/false是否开启)
        title: "书籍添加", //标题
        shade: 0, //弹框外的区域是否覆盖
        area: ['920px', '520px'], //弹出层大小
        resize: false, //是否允许拉伸,该参数对loading、tips层无效
        moveOut: true, // 是否允许拖拽到窗口外
        offset: 'auto', //坐标 
        anim: 2, //弹出方式0-6
        content: ['Demo4.jsp', 'no'], //iframe的url，no代表不显示滚动条
        cancel: function(index, layero){ 
      	            if(confirm('确定要放弃添加吗？')){ //只有当点击confirm框的确定时，该层才会关闭
      	                layer.close(index)
      	                layer.msg('窗口已关闭！');
      	              }
      	            return false; 
      	      }    
       });
}


//监听工具条
table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的DOM对象
 
  if(layEvent === 'detail'){ //查看
	  //do something
	  layer.open({
          type: 0, //弹出层类别
          title: "查看书籍信息", //标题
          closeBtn: 1, //关闭按钮显示
          btnAlign: 'c', //按钮居中对齐
          area: ['340px', '215px'], //弹出层大小
          offset: 'auto', //坐标
          cancel: function(index, layero){ 
        	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
        	    layer.close(index)
        	  }
        	  return false; 
        	}    
       });
	  
  } else if(layEvent === 'del'){ //删除
	  
    layer.confirm('真的删除行么', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
    
  } else if(layEvent === 'edit'){ //编辑
    //do something
	  layer.open({
          type: 0, //弹出层类别
          title: "书籍信息修改", //标题
          closeBtn: 1, //关闭按钮显示
          btnAlign: 'c', //按钮居中对齐
          area: ['340px', '215px'], //弹出层大小
          offset: 'auto', //坐标
          cancel: function(index, layero){ 
        	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
        	    layer.close(index)
        	  }
        	  return false; 
        	}    
       });
	  
    //同步更新缓存对应的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
    
  }
  
});



          });

})

4.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/demo0.jsp"%> <!-- 引入js插件引用标签 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layUI 数据表格</title>
</head>

<style type="text/css">
 .layui-table-fixed-r td{height:100px!important;} 
 .layui-table-fixed-r th{height:100px!important;} 
 .layui-table img { 
     max-width: 100%;min-height: 100%; 
     } 
     
 .laytable-cell-1-wx_headimg{ 
     width: 100%!important;
     padding:50px!important;
     height: 100%!important;
     line-height: 100%!important;
     } 
</style>

<body>

<!-- 模块化用法引用标签 -->
<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<!-- 非模块化用法引用标签（一次性加载所有插件，方便，但性能低） -->
<%-- <script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script> --%>

<!-- 路径 -->
<input type="hidden" id="demo0URL" value="${pageContext.request.contextPath}" />

<!-- 容器 -->
<table id="demo0" lay-filter="test"></table>

<!-- 按钮组 -->
<script type="text/html" id="barDemo">
  <div class="layui-btn-group">
  <button id="Buttons" type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
    <i class="layui-icon">&#xe640;</i>
  </button>
  <button id="Buttong" type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button id="Buttonc" type="button" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-disabled" lay-event="detail">
    <i class="layui-icon">&#xe602;</i>
  </button>
</div>
</script>


<!-- 添加书籍 -->
<script type="text/html" id="addBookY">
  <button id="ButtonAddY" type="button" class="layui-btn layui-btn-normal">
  <i class="layui-icon">&#xe608;</i> 添加书籍
  </button>
</script>
<!-- 禁止添加 -->
<script type="text/html" id="addBookN">
  <button id="ButtonAddN" type="button" class="layui-btn layui-btn-normal layui-btn-disabled">
  <i class="layui-icon">&#xe608;</i> 添加书籍
  </button>
  
  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
  {{#  } }}
</script>

</body>
</html>