Авторское слово

• Плагин в основном удовлетворяет требованиям микротерминала, может удовлетворить требованиям микротерминала. Исходный код не сложный, можно изучать.

Адрес демонстрации

• 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, //разбиение на страницы
	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. Метод рендеринга

        Удаленный запрос: 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. Метод перезагрузки (перезагрузка доступна только для удалённых запросов)

            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, это может решить проблему.
• Когда активируется событие кнопки, компонент автоматически закрывает событие щелчка.