layui表格的使用

0.创建；

引css

<link rel="stylesheet" href="../../../res/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

创建table

<table class="layui-hide" id="demo" lay-data="{ url: '', id:'demo1', escape: true}" lay-filter="demo1">
</table>
<!--lay-date  用来引静态数据，id标记的是数据内容-->
<!--lay-filter  与lay-date的id一致-->

编写js

<script>
layui.use(['table', 'util','layer','jquery'], function(){
  var table = layui.table
  ,util = layui.util
  ,layer = layui.layer
  ,$ = layui.jquery;
  
  table.render({
    elem: '#demo'
    ,url: '../demo/table/user/-page=1&limit=20.js'
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
      ,{field:'username', width:80, title: '用户名'}
      ,{field:'sex', width:80, title: '性别', sort: true ,  edit: 'text'}
      ,{field:'city', width:80, title: '城市'}
      ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ,{field:'experience', title: '积分', sort: true}
      ,{field:'score', title: '评分', sort: true}
      ,{field:'classify', title: '职业'}
      ,{field:'wealth', width:137, title: '财富', sort: true}
    ]]
    ,height: 'full-30'//固定高度-即固定表头固定第一行首行并设置数据空间大小
    ,skin: 'line' //表格风格
    ,even: true
    ,page: true //是否显示分页
    ,limits: [5, 7, 10]  //分页的数量选择
    ,limit: 10 //每页默认显示的数量
  });
    table.on('edit(demo1)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
	
	 var selector = obj.tr.find('[data-field=' + obj.field + ']');  //必须要
     var oldtext = $(selector).text();  //修改前的值
	
	if(check(value,field)){
		layer.msg('[户号: '+ data.NBH +'] ' + field + ' 字段更改值为：'+ util.escape(value));
	}else{
		//校验不通过，还原数据
		if(field == 'JMDL'){  //JMDL是列id
		   obj.tr.find('td[data-field=JMDL] input').val(oldtext);
            obj.update({ JMDL: oldtext });
		}else if(field == 'DZDL'){
			obj.tr.find('td[data-field=DZDL] input').val(oldtext);
            obj.update({ DZDL: oldtext });
		}
	}
});
//数据校验  如果是小数返回false;
function check(value,field){
    var rep=/[\.]/;  //小数判断
    var rep1=/^\d+$/g; //数字判断
    if(field == 'JMDL' ||field == 'DZDL' || field == 'SYDL' || field == 'NYDL' ){
        if(rep.test(value)){
            alert("请输入一个整数！")
            return false;
        }
    }
    return true;
}
});

</script>

1.第一行固定；

,height: 'full-30'//固定高度-即固定表头固定第一行首行并设置数据空间大小

2.分页；

,page: false //是否显示分页
,limits: [5, 7, 10]  //分页的数量选择
,limit: 10 //每页默认显示的数量

3.宽度自适应；

 ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增

4.单元格编辑并校验；

 ,{field:'sex', width:80, title: '性别', sort: true ,  edit: 'text'}
//  edit: 'text'  实现单元格可编辑

5.排序；

 ,{field:'wealth', width:137, title: '财富', sort: true}
 // sort: true  实现排序

6.指定列固定；

 {field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
 // fixed: 'left' 实现ID列固定在最左边

7.单元格编辑并校验；

table.on('edit(demo1)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
	
	 var selector = obj.tr.find('[data-field=' + obj.field + ']');  //必须要
     var oldtext = $(selector).text();  //修改前的值
	
	if(check(value,field)){
		layer.msg('[户号: '+ data.NBH +'] ' + field + ' 字段更改值为：'+ util.escape(value));
	}else{
		//校验不通过，还原数据
		if(field == 'JMDL'){  //JMDL是列id
		   obj.tr.find('td[data-field=JMDL] input').val(oldtext);
            obj.update({ JMDL: oldtext });
		}else if(field == 'DZDL'){
			obj.tr.find('td[data-field=DZDL] input').val(oldtext);
            obj.update({ DZDL: oldtext });
		}
	}
});
//数据校验  如果是小数返回false;
function check(value,field){
    var rep=/[\.]/;  //小数判断
    var rep1=/^\d+$/g; //数字判断
    if(field == 'JMDL' ||field == 'DZDL' || field == 'SYDL' || field == 'NYDL' ){
        if(rep.test(value)){
            alert("请输入一个整数！")
            return false;
        }
    }
    return true;
}