# layui-cardTable

**Repository Path**: layui-extension/layui-card-table

## Basic Information

- **Project Name**: layui-cardTable
- **Description**: 简单了封装了一个卡片式的表格，参考pear-admin的卡片界面，在此感谢；
组件目前用于WaterCloud框架中，后端Net6，前端layui-mini框架，深度封装layui各种组件，开源MIT协议。
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://106.75.169.226:5000/page/cardTable.html
- **GVP Project**: No

## Statistics

- **Stars**: 106
- **Forks**: 40
- **Created**: 2021-03-22
- **Last Updated**: 2025-03-26

## Categories & Tags

**Categories**: layui-components

**Tags**: layui组件

## README

# 作者寄语
- 插件基本满足微端使用，基本可以满足微端使用，源码不复杂，可以给大家学习

# 演示地址
- 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下
![输入图片说明](example/image.png)
# 组件引用方法
         

        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, //是否分页
		image:false,//图片模式
		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方法
1. 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": "几秒前"
                            	}],
			})

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



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

3. getChecked获取选中卡片参数（用于跟后端交互）



               cardTable.getChecked("currentTableId"）

4. getAllData获取当前页数据



               cardTable.getAllData("currentTableId"）

5. 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": "几秒前"
	}]
    }

# 常见问题
- 显示异常，组件使用div，即可解决
- 当启用按钮事件时组件会自动关闭单击事件