开源软件名称：

layui-cardTable

开源软件地址：

https://gitee.com/layui-extension/layui-card-table

开源软件介绍：

作者寄语

插件基本满足微端使用，基本可以满足微端使用，源码不复杂，可以给大家学习

演示地址

http://106.75.169.226:5000/page/cardTable.html
用于WaterCloud框架，地址：http://106.75.169.226:5000/ 账户：admin 密码：0000 模块：组件管理-卡片表格
WaterCloud框架，源码地址：https://gitee.com/qian_wei_hong/WaterCloud
前端框架文件在WaterCloud/WaterCloud.Web/wwwroot下，关键页面文件在WaterCloud/WaterCloud.Web/Views下

组件引用方法

    layui.config({      base: '../js/layui_exts/' //配置 layui 第三方扩展组件存放的基础目录    }).extend({      cardTable: 'cardTable/cardTable'     }).use(['cardTable'], function(){

整个扩展配置有以下配置参数，可灵活运用，满足不同需求

    {	        elem: "#currentTableId",// 构建的模型	url: "",// 数据 url 连接	loading: true,//是否加载	limit: 0, //每页数量默认是每行数量的双倍	linenum: 4, //每行数量 2,3,4,6	currentPage: 1,//当前页	data:[],       //静态数据	limits:[],     //页码	page: true, //是否分页	layout: ['count', 'prev', 'page', 'next','limit', 'skip'],//分页控件	request: {		pageName: 'page' //页码的参数名称，默认：page		, limitName: 'limit' //每页数据量的参数名，默认：limit		, idName: 'id'       //主键名称，默认：id		, titleName: 'title' //标题名称，默认：title		, imageName: 'image' //图片地址，默认：image		, remarkName: 'remark' //备注名称，默认：remark		, timeName: 'time' //时间名称，默认：time	},	response: {		statusName: 'code' //规定数据状态的字段名称，默认：code		, statusCode: 0 //规定成功的状态码，默认：0		, msgName: 'msg' //规定状态信息的字段名称，默认：msg		, countName: 'count' //规定数据总数的字段名称，默认：count		, dataName: 'data' //规定数据列表的字段名称，默认：data	},	// 完 成 函 数	done: function () {	},	toobar:null,//工具按钮    }

组件API方法

render渲染方法

     远程请求：cardTable.render({                         elem: '#currentTableId', 		url: '../json/card.json', 	})     本地数据：var currentTable = cardTable.render({                         elem: '#currentTableId', 						data: [{ 							"id": "1", 							"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png", 							"title": "Alipay", 							"remark": "那是一种内在的东西， 他们到达不了，也无法触及的", 							"time": "几秒前" 							},{                     		"id": "2",                     		"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",                     		"title": "Layui",                     		"remark": "生命就像一盒巧克力，结果往往出人意料",                     		"time": "几秒前"                     	}], 	})

reload重载方法（查询可用仅远程请求）

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

getChecked获取选中卡片参数（用于跟后端交互）
```
        cardTable.getChecked("currentTableId"）
```

getAllData获取当前页数据

        cardTable.getAllData("currentTableId"）

on扩展卡片点击事件

 //卡片单击事件 currentTable为render返回对象     currentTable.on('row(currentTableFilter)', function (obj) {         layer.msg("单击事件");         return false; 	});     //卡片双击事件     currentTable.on('rowDouble(currentTableFilter)', function (obj) {         layer.msg("双击事件");         return false;     });     //toolrow监听事件     currentTable.on('tool(currentTableFilter)', function (obj) {         if (obj.event === 'details') {             layer.msg("按钮事件");         }         return false;     });

返回数据默认格式

{"code": 0,"msg": "...","count": 2,"data": [{	"id": "1",	"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",	"title": "Alipay",	"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",	"time": "几秒前"},{	"id": "2",	"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",	"title": "Layui",	"remark": "生命就像一盒巧克力，结果往往出人意料",	"time": "几秒前"}]}