1. 程式人生 > >layUI-資料表格

layUI-資料表格

挺棒的,這是官網文件:

這是我自己用的效果:

HTML:

<div th:include="/common/header :: html"></div>
<div class="layui-body">
	<!-- 內容主體區域 -->
	<div style="padding: 15px;margin-top:60px;">
		<table id="user_table"></table>
	</div>
</div>

JS:

layui.use('table', function(){
  var table = layui.table;
  //第一個例項
  table.render({
    elem: '#user_table',
    title:'使用者資訊表',//table 的大標題(在檔案匯出等地方會用到)
//    width:1000,//table容器的預設寬度是跟隨它的父元素鋪滿
    height: 450,
    url: '',//資料介面
    data:[
    	{
    		id:1,username:'小明'
    	},
    	{
    		id:2,username:'小紅'
    	},
    	{
    		id:3,username:'小蒼'
    	},
    	{
    		id:4,username:'小澤'
    	},
    	{
    		id:5,username:'小空'
    	},
    	{
    		id:6,username:'小麗'
    	},
    	{
    		id:7,username:'小王'
    	},
    	{
    		id:8,username:'小柏'
    	},
    	{
    		id:9,username:'阿嬌'
    	},
    	{
    		id:10,username:'小巖'
    	},
    	{
    		id:11,username:'小蒼'
    	},
    	{
    		id:12,username:'小澤'
    	},
    	{
    		id:13,username:'小蒼'
    	},
    	{
    		id:14,username:'小澤'
    	}
    ],
    page: true, //開啟分頁,支援 laypage的引數哦
    limit:10,//每頁顯示的條數(預設:10)
    limits:[10,20,30,40,50,60,70,80,90],//每頁條數的選擇項
    loading:true,//url時,進度條顯示
    totalRow:false,//合計行
    toolbar:true,//若需要“列顯示隱藏”、“匯出”、“列印”等功能,則必須開啟該引數
    defaultToolbar:['filter', 'print', 'exports'],//['filter', 'print', 'exports']
    cols: [[ //表頭
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
      {field: 'username', title: '使用者名稱', width:80}
    ]],
    text: {
    	//自定義一些文字提示
        none: '暫無相關資料' //預設:無資料。注:該屬性為 layui 2.2.5 開始新增
    },
    initSort: {
        field: 'id', //排序欄位,對應 cols 設定的各欄位名
        type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 預設排序
    },
    skin: 'line', //行邊框風格:line (行邊框風格) row (列邊框風格) nob (無邊框風格)
    even: true, //開啟隔行背景:true/false
    size: 'sm',//設定表格尺寸:sm (小尺寸) lg (大尺寸)
    done:function(res, curr, count){
    	//相應、當前頁碼、資料總量
    	//如果是非同步請求資料方式,res即為你介面返回的資訊。
        //如果是直接賦值的方式,res即為:{data: [], count: 99} data為當前頁資料、count為資料總長度
    	console.log(res+":"+curr+":"+count);
    }
  });
});

col:

cols: [[ //表頭
    	{field: '', title: '選擇', width:80,type:'checkbox',},
		{
			field: 'id', 
			title: 'ID', 
			width: 80,
			sort:  true,
//			type:  'checkbox',//複選框
//			LAY_CHECKED: true,//是否全選
//			fixed: 'left',//固定列
			hide:false,//隱藏
			totalRow:false,//合計本列
			totalRowText:'總共:',//合計文字
			unresize:true,//是否禁用拖拽列寬
			event:'',//繫結事件
//			style:'background-color: #5FB878; color: #fff;',//自定義單元格樣式
			align:'center',
//			colspan:3,
//			rowspan:2,
//			templet:'#templetname',//自定義模板,比如格式化日期,看文件去
//			toolbar:'default'//就是他,自定義操作的
		},

<!-- 定義模板 -->
<script type="text/html" id="user_table_template">
  <a href="/user/addOrEdit?id={{d.id}}" class="layui-table-link">編輯</a>
  <a href="/user/deleteUser?id={{d.id}}" class="layui-table-link">刪除</a>
</script>