layui的表格使用

标签: js layui html mybatis springmvc
12人阅读 评论(0) 收藏 举报
分类:

第一步:引入必须的js文件和css文件,我的项目结构引入如下:

    <link id="lay-tabs" href="${ctxStatic}/plugin/layui/dist/css/layui.css" rel="stylesheet" />
    <script src="${ctxStatic}/plugin/layui/dist/layui.all.js"></script>
    <script src="${ctxStatic}/plugin/layui/dist/layui.js"></script>

第二步:定义一个table,我采用js渲染,如下

<div class="col-lg-12">
      <table id="waringDevicesTable"  class="layui-hide"></table>
</div>

第三步:渲染的js代码

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="com.zy.modules.sys.utils.UserUtils" %>//引入包
<% 
	String adcd = UserUtils.getUser().getOffice().getArea().getId();//全局参数
%>
$(document).ready(function() {
//   表格初始化 -------------------------------------------------
    	    var tableheight = document.documentElement.clientHeight - 330;
		layui.use('table', function(){
		var table = layui.table;//表格
		    //执行一个 table 实例
		    table.render({
			    elem: '#waringDevicesTable'
		    ,height: tableheight
			,text: {
			    none: '暂无相关数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
			  }
			    ,page: true //开启分页
			    ,cols: [[ 
				      {field: 'name', title: '名称', width:180,align:'center'}
				      ,{field: 'time', title: '时间', width:120,align:'center'}
				      ,{field:'town',title: '所属乡镇', width:130,align:'center'}
				      ,{field:'smallRiver',title: '所属小流域', width:210,align:'center'}
				      ]]
				,id: 'waringDevicesInfo'
				,url:'${ctx}/ia/getHistoryMTDisasterOfTable?adcd='+"<%=adcd %>"//此adcd是我传入的参数
				,limit:5//默认传入10
				,limits:[5,10]//默认是[10]
			    });
			});
});

第四步:后台server,我采用的是springmvc,此处不写controller,但是要注意controller的注解,

两个必须的注解:@ResponseBody定义返回后的数据直接转成json格式,  @RequestMapping映射

public Map<String, Object> getHistoryMTDisasterOfTable(String adcd, HttpServletRequest request,
			HttpServletResponse reponse) {
		Map<String,String> param=new HashMap<>();//构建传入的参数,mybatis采用map传入参数
		String limit=request.getParameter("limit");
		int page=(Integer.parseInt(request.getParameter("page"))-1)*Integer.parseInt(limit);//计算分页
		param.put("page", String.valueOf(page));
		param.put("adcd", adcd);
		param.put("limit", limit);
		List<Map<String, Object>> listst = mapper.getHistoryMTDisasterOfTable(param);//mybatis返回的参数格式为map
		Map<String,Object> resultMap=new HashMap<>();
		//layui要求默认返回的数据格式就是这样,一个也不能少。
		resultMap.put("code", 0);
		resultMap.put("msg", "msg");
		resultMap.put("count", mapper.getHistoryMTDisasterCount(param).get(0).get("count"));
		resultMap.put("data", listst);
		return resultMap;
	}

第五步:mybatis的xml文件:此处不写了,大概说下,我传入的是map参数,返回也是map参数,

还是写一下吧。数据库是sqlserver,这里的分页用的是下面这句话:

ORDER  BY h.ADDRESS  OFFSET ${page} ROWS FETCH NEXT ${limit} ROWS ONLY

其中一个点mybatis中的$#的区别,一句话记住$是变量不会加单引号,而#是会加单引号的,

一般能用#就不要用$,防止sql注入。

	<select id="getHistoryMTDisasterOfTable" resultType="map" parameterType="map">
		SELECT 
			h.ADDRESS AS name,h.OTIME AS time,a.ADNM as town,w.WSNM as smallRiver 
		FROM IA_C_HSFWATER AS h
			LEFT  JOIN IA_Z_ADDT as a on a.ADCD=h.ADCD
			LEFT  JOIN IA_C_WATA as w on w.WSCD=h.WSCD
		WHERE h.ADCD like #{adcd}+'%'
		ORDER  BY h.ADDRESS  OFFSET ${page} ROWS FETCH NEXT ${limit} ROWS ONLY
	</select>
第六步:注意:返回的数据格式是list套map格式:[{},{},{}],根据需求加工。


查看评论

如何快速创建一个LayUI 数据表格

最近LayUI API频繁更新 ,碰巧做了个Demo,准备把项目中的table给换个方式显示,就着手做了一个基础的表格,先上个效果图。 HTML: ...
  • nnn_net
  • nnn_net
  • 2017-09-04 11:21:46
  • 674

LayUI的表格在项目中的应用

layui的表格在.NET MVC中的应用,页面的主要代码-->                     查看         编辑         删除       ...
  • sosososolong
  • sosososolong
  • 2017-12-09 20:43:06
  • 273

php+layui创建表格使用实例

table模块快速使用 获取选中行数据 获取选中数目 验证是否全选 ID 用户名 性别 城市 ...
  • hai7425
  • hai7425
  • 2017-08-28 20:14:12
  • 1908

关于layui数据表格的分页操作的学习笔记。

-----初识layui,一个强大的前端框架。 在使用layui框架的时候需要引用layui相关文件。这里不做叙述直接传送门:layui官网 在官方文档中介绍了三种初始化渲染方式 ...
  • qq_16767917
  • qq_16767917
  • 2017-09-19 10:58:44
  • 1708

layui数据表格

发现一个问题,layui数据表格赋值已知数据时,若赋值‘test’这种类型的数据,它会自动把标签去掉。显示test...
  • jdd19971109
  • jdd19971109
  • 2017-12-19 15:02:09
  • 781

Layui 的数据表格,在调用Ajax请求后的关闭弹窗和刷新父窗口js

$.ajax({ url:'/content/addJctt', ...
  • huangbaokang
  • huangbaokang
  • 2017-12-26 14:46:55
  • 624

Layui数据表格调整行高

同时设置数据表格单元格的height和line-height样式,且属性值必须一致 .layui-table-cell{ height:36px; line-height: 36...
  • cccmercy
  • cccmercy
  • 2018-01-20 17:22:41
  • 1024

Layui给数据表格动态添加一行并跳转到添加行所在页

Layui数据表格动态添加一行问题 Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现。 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按...
  • cccmercy
  • cccmercy
  • 2018-01-20 01:48:53
  • 1780

TP5 layui 数组表格的排序问题

layui 数组表格的排序问题 html代码 加上这段代码,把排序的字段和升降方式传到后台 //排序 table.on('sort(demo)', function(obj){ //注...
  • haibo0668
  • haibo0668
  • 2017-10-26 16:15:40
  • 1759
    个人资料
    持之以恒
    等级:
    访问量: 3万+
    积分: 947
    排名: 5万+
    最新评论