使用Table组件过程中遇到的问题解决

Table 的问题汇总

1.页面静态数据填充

<table lay-filter="testTable" lay-data="{id: 'testTable'}"></table>

<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="detail">操作部分</a>
  </div>
</script>

layui.use(['jquery','table'], function(){
  var $ = layui.jquery;
  var table = layui.table;
  var $view = $('#页面id');

  function initTable() {
      var tableData = {
          "code": 200,
          "msg": "",
          "count": 100,
          "data": [
              {
                  "id": 1,
                  "userName": "张三",
                  "userNO": "00000",
              },
              {
                  "id": 2,
                  "userName": "李四",
                  "userNO": "1111"
              },
              {
                  "id": 3,
                  "userName": "王五",
                  "userNO": "22222"
              }
          ]
      };

      var tableIns = table.init({
          elem: $view.find('table'),
          data: tableData.data,
          toolbar: '#toolbarDemo',
	      defaultToolbar: ['filter','print'],
		  even : true,
		  height: 'full-300',
	      lineStyle: 'height:auto',
          cols: [[
              {field: 'username', title: '姓名',align :'center',width : '8%'},
              {field: 'userNO', title: '工号',align :'center',width : '8%'},
              {fixed: 'right', title: '操作',align :'center',width : '10%', toolbar: '#barDemo'}
          ]],
		 done:function(){
			 var tds=$view.find('table').find('td');
			 tds.css({
		        'text-align': 'center'
		     });
		 }
      });
  }
  initTable();
    table.on('tool(testTable)', function(obj){
		var data = obj.data; // 获得当前行数据
	    if(obj.event === 'detail'){
	    	syn.modal.open('查看','syn/#',{
		    	  data:{
// 		    		  id: data.id,
		    	  },
		    	  btn: ['关闭'],
		    	  yes : function(index, layero) {
		    		  alert("你确定要关闭吗？");
		    		  layer.close(index);
		  			}
		      });
	    }
	});
});

2.表格字段填充日期时，对日期格式有需求

方法一：前端模板处理

table.init({
      cols: [[
          {field: 'flightDate', title: '日期',align :'center',width : '10%'
                ,templet:function(d){
                    return layui.util.toDateString(d.cDate,'yyyy-MM-dd');
                }
          }
      ]]
});

方法二：后端处理

import com.fasterxml.jackson.annotation.JsonFormat;
@JsonFormat(pattern = "yyyy-MM-dd")
private Date cDate;