layui使用经验总结（三）——数据表格的使用及其要注意的细节

数据表格的样子

基础代码示例

接触表格第一步了解其js代码

1. 在页面放置一个元素 ，然后通过 table.render() 方法指定该容器。
2. table.render()中元素作用。

表id：elem ，需与页面table中id值元素相同。

elem: '#demo',

路径：url ， 表格获取数据的路径，路径返回的格式要求在下面

url: '${base}/userList.json',

自定义返回分页参数：requset + pageName+ limitName
默认为 page，limit。

request:{
			pageName:'pageNo',
			limitName:'lows'
		},

最小宽度：cellMinWidth

cellMinWidth:120,

附加搜索条件：where 通过函数可以给where中参数赋值，下面有介绍

where:{filters::null}, //附件搜索条件

默认多少条/页：limit

limit:30,

可选条数：limits

limits:[50,100,500,1000,2000],

行高度设置：height

height: 'full-160',

是否分页：page

page:true,

工具栏：toolbar 其中自带简单的筛选、导出、打印功能

toolbar: true,
defaultToolbar:['filter','exports'],

可以自定义

toolbar: '
批量办理
',

table.on('toolbar(test)', function(obj){
	  	var checkStatus = table.checkStatus(obj.config.id);
	  	switch(obj.event){
			case 'allaudit':
				var data= table.checkStatus('handList').data;
				if(data.length>0){ 
			$.each(data,function(index,item){
				categoryType=item.PROCESS_DEFINITION_KEY;
				if(index==data.length-1){
					ids+=item.BUSINESS_ID;
				}else{
					ids+=item.BUSINESS_ID+",";
				}
			});
			break;

表格返回函数：done 这里res可以得到表格所有数据，可以渲染页面其他位置内容，如总数等。

done: function(res, curr, count){
			element.render('nav');
			$("#count").html(res.count);
		},

表头：cols

  ,cols: [[ //表头
  		{type:'checkbox',width:40},
		{type:'numbers',title:'序号',width:60},
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
    ]]

表头涉及参数

多选框及序号

{type:'checkbox',width:40},
{type:'numbers',title:'序号',width:60},

字段名：field 与json数据一致
表头名称：title
表字段宽度：width
是否排序sort
表头名称位置设置：align
模板函数：templet

{field:'CREATE_TIME',title:'创建时间',width:120,sort: true,align:'center',templet : "
{{layui.util.toDateString(d.CREATE_TIME, 'yyyy-MM-dd')}}
"},

实例

var option = {
    	elem: '#table',
		url: '${base}/projectRepository/projectList.json',
		request:{
			pageName:'page',
			limitName:'lows'
		},
		cellMinWidth:120,
		where:{filters:('${keywords}'!=null &&'${keywords}'!='')? '{"groupOp":"AND","rules":[{"field":"title","op":"cn","data":"${keywords}"}]}':null}, //附件搜索条件
		limit:30,
		height: 'full-160',
		page:true,
		done: function(res, curr, count){
			element.render('nav');
			$("#count").html(res.count);
		},
		 ,cols: [[ //表头
     	  {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
     	 ,{field: 'username', title: '用户名', width:80}
     	 ,{field: 'sex', title: '性别', width:80, sort: true}
     	 ,{field:'CREATE_TIME',title:'创建时间',width:120,align:'center',templet : "
{{layui.util.toDateString(d.CREATE_TIME, 'yyyy-MM-dd')}}
"}
		 ,{field:'ID',title:'操作',width:160,align:'center', templet: function(res){
				var str = '办理';
				return str;
			}}
		]]
	}

请求路径返回json格式要求

1. code返回的标识符，0为显示数据，1为不显示数据。
2. msg提示信息，在没有数据时显示提示信息。
   
3. count数据总数，非获取到当前页数据的总数，是数据库中符合条件的总数，数据表格分页的关键，分页介绍在下面。
4. data获取的当前页数据，字段与 {field: ‘sign’, title: ‘签名’, width: 177}中field对应。

{
	"code": 0,
	"msg": "",
	"count": 30,
	"data": [{
		"id": 10000,
		"rank":1,
		"username": "user-0",
		"sex": "女",
		"city": "城市-0",
		"sign": "签名-0",
		"experience": 255,
		"logins": 24,
		"wealth": 82830700,
		"classify": "作家",
		"score": 57
	}, {
		"id": 10001,
		"rank":2,
		"username": "user-1",
		"sex": "男",
		"city": "城市-1",
		"sign": "签名-1",
		"experience": 884,
		"logins": 58,
		"wealth": 64928690,
		"classify": "词人",
		"score": 27
	}]
}

分页操作的实现

数据表格根据json返回的数据来处理分页。

根据json中的count值自动分配页数

如count值为4668,30条一页，分156页。

如count值为4668,90条一页，分52页。

点击其中的一页会数据表格会自动在url请求中加上page=n，再次请求获取数据。
选择多少条/页数据表格会自动在url请求中加上limit=y，再次请求获取数据。
当然也可以重新定义参数，代码修改位置上面元素说明有介绍。

request:{
			pageName:'page',
			limitName:'lows'
		},

后台代码

最基础版，没有封装，可以自行封装。
其中ResultJsonVO对象，根据什么json格式要求写就行了。

@RequestMapping("/userList")
	@ResponseBody
	public ResultJsonVO projectList(String limit,String page){
		List userList =userService.findUserList(limit,page);
		int count =userService.usercount();
		return new ResultJsonVO(userlist,count);	
	}

搜索功能实现

通过按钮点击事件调用函数还实现搜索，更新渲染表格

//搜索按钮监听提交
var mytable = table.render(option);
	 form.on('submit(btn)', function(data){
		//option.where.title = data.field.title;
			/*更新渲染表格*/
			mytable.reload(option);
	 });

格式化数据

格式化时间

{field:'CREATE_TIME',title:'创建时间',width:120,align:'center',templet : "
{{layui.util.toDateString(d.CREATE_TIME, 'yyyy-MM-dd')}}
"},

function formatterDate(res) {
		if (res.SEND_BELOW_TIME) {
			var date = new Date(res.SEND_BELOW_TIME);
			return date.format("yyyy-MM-dd HH:mm:ss");
		} else {
				return "--";
		}
	}

格式化数据

通过后台传过来的Map集合数据字典格式化数据

{field:'INDUSTRY',title:'所属行业',width:100,align:'center',templet : industryFu},

	//格式化所属行业字段
	function industryFu(res) {
		var revalue = "-";
		
		if ("${entry.key}" == res.INDUSTRY) {
			revalue = "${entry.value}";
		}
		
		return revalue;
	}

添加操作功能

函数中res可以获取表格中所有字段信息

{field:'ID',title:'操作',width:160,align:'center', templet: function(res){
				var str = '办理';
				return str;
			}}

效果

点击事件异步请求数据

mytable.reload({
			where: { //设定异步数据接口的额外参数，任意设
				activityName:data.value
			},
			page: {
				curr: 1 //重新从第 1 页开始
			}
		});

方法型加按钮

{field:'operation', title:'操作', width:100,align:'center', templet:operation1}

function operation1(val,row){
	var html="";
	
		html = '办理';

	return html;
						}