組件引用方法

layui.config({
  base: '../js/layui_exts/' //配置 layui 第三方擴(kuò)展組件存放的基礎(chǔ)目錄
}).extend({
  cardTable: 'cardTable/cardTable' 
}).use(['cardTable'], function(){
.....

整個(gè)擴(kuò)展配置有以下配置參數(shù)，可靈活運(yùn)用，滿足不同需求

{	
	elem: "#currentTableId",// 構(gòu)建的模型
		url: "",// 數(shù)據(jù) url 連接
		loading: true,//是否加載
		limit: 0, //每頁數(shù)量默認(rèn)是每行數(shù)量的雙倍
		linenum: 4, //每行數(shù)量 2,3,4,6
		currentPage: 1,//當(dāng)前頁
		limits:[],     //頁碼
		page: true, //是否分頁
		layout: ['count', 'prev', 'page', 'next','limit', 'skip'],//分頁控件
		request: {
			pageName: 'page' //頁碼的參數(shù)名稱，默認(rèn)：page
			, limitName: 'limit' //每頁數(shù)據(jù)量的參數(shù)名，默認(rèn)：limit
			, idName: 'id'       //主鍵名稱，默認(rèn)：id
			, titleName: 'title' //標(biāo)題名稱，默認(rèn)：title
			, imageName: 'image' //圖片地址，默認(rèn)：image
			, remarkName: 'remark' //備注名稱，默認(rèn)：remark
			, timeName: 'time' //時(shí)間名稱，默認(rèn)：time
		},
		response: {
			statusName: 'code' //規(guī)定數(shù)據(jù)狀態(tài)的字段名稱，默認(rèn)：code
			, statusCode: 0 //規(guī)定成功的狀態(tài)碼，默認(rèn)：0
			, msgName: 'msg' //規(guī)定狀態(tài)信息的字段名稱，默認(rèn)：msg
			, countName: 'count' //規(guī)定數(shù)據(jù)總數(shù)的字段名稱，默認(rèn)：count
			, dataName: 'data' //規(guī)定數(shù)據(jù)列表的字段名稱，默認(rèn)：data
		},
		// 完 成 函 數(shù)
		done: function () {

		}
}

組件含有三個(gè)方法
1、render渲染方法

            cardTable.render({
                elem: '#currentTableId',
				url: '../json/card.json',
			})

2、reload重載方法（查詢可用）

                cardTable.reload("currentTableId", {
                    where: queryJson,
                });

3、getChecked獲取選中卡片參數(shù)（用于跟后端交互）

               cardTable.getChecked("currentTableId"）

返回?cái)?shù)據(jù)默認(rèn)格式

{
	"code": 0,
	"msg": "...",
	"count": 2,
	"data": [{
		"id": "1",
		"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
		"title": "Alipay",
		"remark": "那是一種內(nèi)在的東西， 他們到達(dá)不了，也無法觸及的",
		"time": "幾秒前"
	},{
		"id": "2",
		"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
		"title": "Layui",
		"remark": "生命就像一盒巧克力，結(jié)果往往出人意料",
		"time": "幾秒前"
	}
}