376 lines
12 KiB
JavaScript
376 lines
12 KiB
JavaScript
|
layui.define(['table', 'laypage', 'jquery', 'element', 'laytpl'], function (exports) {
|
|||
|
|
"use strict";
|
|||
|
|
var filePath = layui.cache.modules.cardTable
|
|||
|
|
.substr(0, layui.cache.modules.cardTable.lastIndexOf('/'));
|
|||
|
|
// 引入tablePlug.css
|
|||
|
|
layui.link(filePath + '/cardTable.css');
|
|||
|
|
var MOD_NAME = 'cardTable',
|
|||
|
|
$ = layui.jquery,
|
|||
|
|
element = layui.element,
|
|||
|
|
laytpl = layui.laytpl,
|
|||
|
|
laypage = layui.laypage;
|
|||
|
|
var _instances = {}; // 记录所有实例
|
|||
|
|
/* 默认参数 */
|
|||
|
|
var defaultOption = {
|
|||
|
|
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 (res, curr, count) {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
toolbar: null
|
|||
|
|
};
|
|||
|
|
var card = function (opt) {
|
|||
|
|
_instances[opt.elem.substring(1)] = this;
|
|||
|
|
this.reload(opt);
|
|||
|
|
};
|
|||
|
|
/** 参数设置 */
|
|||
|
|
card.prototype.initOptions = function (opt) {
|
|||
|
|
this.option = $.extend(true, {}, defaultOption, opt);
|
|||
|
|
if (!this.option.limit || this.option.limit == 0) {
|
|||
|
|
this.option.limit = this.option.linenum * 2;
|
|||
|
|
}
|
|||
|
|
if (!this.option.limits || this.option.limits.length == 0) {
|
|||
|
|
this.option.limits = [this.option.limit];
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
card.prototype.init = function () {
|
|||
|
|
var option = this.option;
|
|||
|
|
var url = option.url;
|
|||
|
|
var html = "";
|
|||
|
|
html += option.loading == true ? ' <div class="ew-table-loading">' : ' <div class="ew-table-loading layui-hide">';
|
|||
|
|
html += ' <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>';
|
|||
|
|
html += ' </div>';
|
|||
|
|
$(option.elem).html(html);
|
|||
|
|
// 根 据 请 求 方 式 获 取 数 据
|
|||
|
|
html = "";
|
|||
|
|
if (!!url) {
|
|||
|
|
if (url.indexOf("?") >= 0) {
|
|||
|
|
url = url + '&v=1.0.0';
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
url = url + '?v=1.0.0';
|
|||
|
|
}
|
|||
|
|
if (!!option.page) {
|
|||
|
|
url = url + '&' + option.request.limitName + '=' + option.limit;
|
|||
|
|
url = url + '&' + option.request.pageName + '=' + option.currentPage;
|
|||
|
|
}
|
|||
|
|
if (!!option.where) {
|
|||
|
|
for (let key in option.where) {
|
|||
|
|
url = url + '&' + key + '=' + option.where[key];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var data = getData(url);
|
|||
|
|
data = initData(data, option);
|
|||
|
|
if (data.code != option.response.statusCode) {
|
|||
|
|
option.data = [];
|
|||
|
|
option.count = 0;
|
|||
|
|
} else {
|
|||
|
|
option.data = data.data;
|
|||
|
|
option.count = data.count;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
if (!option.alldata) {
|
|||
|
|
option.alldata = option.data;
|
|||
|
|
}
|
|||
|
|
if (option.page) {
|
|||
|
|
var data = [];
|
|||
|
|
option.count = option.alldata.length;
|
|||
|
|
for (var i = (option.currentPage - 1) * option.limit; i < option.currentPage * option.limit && i < option.alldata.length; i++) {
|
|||
|
|
data.push(option.alldata[i]);
|
|||
|
|
}
|
|||
|
|
option.data = data;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 根据结果进行相应结构的创建
|
|||
|
|
if (!!option.data && option.data.length > 0) {
|
|||
|
|
html = createComponent(option.linenum, option.data, option.toolbar, option.image);
|
|||
|
|
html += "<div id='cardpage'></div>";
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
html = "<p>没有数据</p>";
|
|||
|
|
}
|
|||
|
|
$(option.elem).html(html);
|
|||
|
|
if (option.page) {
|
|||
|
|
// 初始化分页组件
|
|||
|
|
laypage.render({
|
|||
|
|
elem: 'cardpage'
|
|||
|
|
, count: option.count, limit: option.limit, limits: option.limits, curr: option.currentPage
|
|||
|
|
, layout: option.layout
|
|||
|
|
, jump: function (obj, first) {
|
|||
|
|
option.limit = obj.limit;
|
|||
|
|
option.currentPage = obj.curr;
|
|||
|
|
if (!first) {
|
|||
|
|
_instances[option.elem.substring(1)].reload(option);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
typeof option.done === 'function' && option.done(option, option.curr, option.count);
|
|||
|
|
}
|
|||
|
|
card.prototype.reload = function (opt) {
|
|||
|
|
this.initOptions(this.option ? $.extend(true, this.option, opt) : opt);
|
|||
|
|
this.init(); // 初始化表格
|
|||
|
|
this.events(); //事件
|
|||
|
|
}
|
|||
|
|
//表单事件
|
|||
|
|
card.prototype.on = function (events, callback) {
|
|||
|
|
return layui.onevent.call(this, MOD_NAME, events, callback);
|
|||
|
|
};
|
|||
|
|
card.prototype.events = function () {
|
|||
|
|
var that = this;
|
|||
|
|
var option = that.option;
|
|||
|
|
var filter = $(option.elem).attr('lay-filter');
|
|||
|
|
var elem = option.elem.substring(1);
|
|||
|
|
let timer = null;
|
|||
|
|
$(option.elem).unbind();
|
|||
|
|
//行事件
|
|||
|
|
$(option.elem).on('click', 'div[type=card]', function () { //单击行
|
|||
|
|
clearTimeout(timer);
|
|||
|
|
var that = this;
|
|||
|
|
timer = setTimeout(function () {
|
|||
|
|
getCheckedData(that, elem);
|
|||
|
|
var reElem = that;
|
|||
|
|
layui.event.call(that, MOD_NAME, 'row(' + filter + ')', {
|
|||
|
|
elem: that
|
|||
|
|
, value: _instances[elem].option.checkedItem
|
|||
|
|
, othis: reElem
|
|||
|
|
});
|
|||
|
|
}, 300)
|
|||
|
|
}).on('dblclick', 'div[type=card]', function () { //双击行
|
|||
|
|
clearTimeout(timer);
|
|||
|
|
getCheckedData(this, elem);
|
|||
|
|
var reElem = this;
|
|||
|
|
layui.event.call(this, MOD_NAME, 'rowDouble(' + filter + ')', {
|
|||
|
|
elem: this
|
|||
|
|
, value: _instances[elem].option.checkedItem
|
|||
|
|
, othis: reElem
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
if (!!option.toolbar && !option.image) {
|
|||
|
|
$(option.elem).unbind('click');
|
|||
|
|
}
|
|||
|
|
//行工具条操作事件
|
|||
|
|
$(option.elem).on('click', '*[lay-event]', function () {
|
|||
|
|
getCheckedData(this, elem);
|
|||
|
|
layui.event.call(this, MOD_NAME, 'tool(' + filter + ')', { event: $(this).attr('lay-event'), value: _instances[elem].option.checkedItem });
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
function getCheckedData(obj, elem) {
|
|||
|
|
var item = {};
|
|||
|
|
if (!obj.id) {
|
|||
|
|
return getCheckedData(obj.parentElement, elem);
|
|||
|
|
}
|
|||
|
|
var reElem = obj;
|
|||
|
|
$(reElem).addClass('layui-table-click').siblings().removeClass('layui-table-click');
|
|||
|
|
item.id = reElem.id;
|
|||
|
|
if (!obj.id || obj.nodeName != "DIV") {
|
|||
|
|
item.id = item.id.replace('card_', '');
|
|||
|
|
}
|
|||
|
|
var option = _instances[elem].option;
|
|||
|
|
for (var i = 0; i < option.data.length; i++) {
|
|||
|
|
if (item.id == option.data[i].id) {
|
|||
|
|
item[option.request.idName] = option.data[i].id;
|
|||
|
|
item[option.request.imageName] = option.data[i].image;
|
|||
|
|
item[option.request.titleName] = option.data[i].title;
|
|||
|
|
item[option.request.remarkName] = option.data[i].remark;
|
|||
|
|
item[option.request.timeName] = option.data[i].time;
|
|||
|
|
item = $.extend(JSON.parse(JSON.stringify(option.data[i])), item);
|
|||
|
|
if (option.request.idName != "id") {
|
|||
|
|
delete item.id;
|
|||
|
|
}
|
|||
|
|
if (option.request.imageName != "image") {
|
|||
|
|
delete item.image;
|
|||
|
|
}
|
|||
|
|
if (option.request.titleName != "title") {
|
|||
|
|
delete item.title;
|
|||
|
|
}
|
|||
|
|
if (option.request.remarkName != "remark") {
|
|||
|
|
delete item.remark;
|
|||
|
|
}
|
|||
|
|
if (option.request.timeName != "time") {
|
|||
|
|
delete item.time;
|
|||
|
|
}
|
|||
|
|
_instances[elem].option.checkedItem = item;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return item;
|
|||
|
|
}
|
|||
|
|
function createComponent(linenum, data, toolbar, image) {
|
|||
|
|
var html = "<div class='cloud-card-component'>"
|
|||
|
|
var content = createCards(linenum, data, toolbar, image);
|
|||
|
|
var page = "";
|
|||
|
|
content = content + page;
|
|||
|
|
html += content + "</div>"
|
|||
|
|
return html;
|
|||
|
|
}
|
|||
|
|
/** 创建指定数量的卡片 */
|
|||
|
|
function createCards(linenum, data, toolbar, image) {
|
|||
|
|
var content = "<div class='layui-row layui-col-space30'>";
|
|||
|
|
for (var i = 0; i < data.length; i++) {
|
|||
|
|
content += createCard(linenum, data[i], i, toolbar, image);
|
|||
|
|
}
|
|||
|
|
content += "</div>";
|
|||
|
|
return content;
|
|||
|
|
}
|
|||
|
|
/** 创建一个卡片 */
|
|||
|
|
function createCard(linenum, item, index, toolbar, image) {
|
|||
|
|
var line = 12 / linenum;
|
|||
|
|
var tplData = $.extend(true, {
|
|||
|
|
LAY_INDEX: index
|
|||
|
|
}, item)
|
|||
|
|
var template = '';
|
|||
|
|
if (!!toolbar) {
|
|||
|
|
template = laytpl($('#' + toolbar).html() || '').render(tplData);
|
|||
|
|
}
|
|||
|
|
if (image) {
|
|||
|
|
return '<div type=card id=card_' + item.id + ' class="layui-col-md' + line + ' ew-datagrid-item" data-index="' + index + '" data-number="1"> <div class="project-list-item">' + (!!item.image ? ' <img class="project-list-item-cover" src="' + item.image + '">' : '') + ' </div > </div > ';
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
return '<div type=card id=card_' + item.id + ' class="layui-col-md' + line + ' ew-datagrid-item" data-index="' + index + '" data-number="1"> <div class="project-list-item">' + (!!item.image ? ' <img class="project-list-item-cover" src="' + item.image + '">' : '') + '<div class="project-list-item-body"> <h2>' + item.title + '</h2> <div class="project-list-item-text layui-text">' + item.remark + '</div> <div class="project-list-item-desc"> <span class="time">' + item.time + '</span>' + (!!template ? ' <div class="ew-head-list">' + template + '</div>' : '') + ' </div> </div > </div > </div > ';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
/** 格式化返回参数 */
|
|||
|
|
function initData(tempData, option) {
|
|||
|
|
var data = {};
|
|||
|
|
data.code = tempData[option.response.statusName];
|
|||
|
|
data.msg = tempData[option.response.msgName];
|
|||
|
|
data.count = tempData[option.response.countName];
|
|||
|
|
var dataList = tempData[option.response.dataName];
|
|||
|
|
data.data = [];
|
|||
|
|
for (var i = 0; i < dataList.length; i++) {
|
|||
|
|
var item = {};
|
|||
|
|
item.id = dataList[i][option.request.idName];
|
|||
|
|
item.image = dataList[i][option.request.imageName];
|
|||
|
|
item.title = dataList[i][option.request.titleName];
|
|||
|
|
item.remark = dataList[i][option.request.remarkName];
|
|||
|
|
item.time = dataList[i][option.request.timeName];
|
|||
|
|
item = $.extend(JSON.parse(JSON.stringify(dataList[i])), item);
|
|||
|
|
if (option.request.idName != "id") {
|
|||
|
|
delete item[option.request.idName];
|
|||
|
|
}
|
|||
|
|
if (option.request.imageName != "image") {
|
|||
|
|
delete item[option.request.imageName];
|
|||
|
|
}
|
|||
|
|
if (option.request.titleName != "title") {
|
|||
|
|
delete item[option.request.titleName];
|
|||
|
|
}
|
|||
|
|
if (option.request.remarkName != "remark") {
|
|||
|
|
delete item[option.request.remarkName];
|
|||
|
|
}
|
|||
|
|
if (option.request.timeName != "time") {
|
|||
|
|
delete item[option.request.timeName];
|
|||
|
|
}
|
|||
|
|
data.data.push(item);
|
|||
|
|
}
|
|||
|
|
return data;
|
|||
|
|
}
|
|||
|
|
/** 同 步 请 求 获 取 数 据 */
|
|||
|
|
function getData(url) {
|
|||
|
|
$.ajaxSettings.async = false;
|
|||
|
|
var redata = null;
|
|||
|
|
$.getJSON(url, function (data) {
|
|||
|
|
redata = data;
|
|||
|
|
}).fail(function () {
|
|||
|
|
redata = null;
|
|||
|
|
});
|
|||
|
|
return redata;
|
|||
|
|
}
|
|||
|
|
////卡片点击事件
|
|||
|
|
//window.cardTableCheckedCard = function (elem,obj) {
|
|||
|
|
// $(obj).addClass('layui-table-click').siblings().removeClass('layui-table-click');
|
|||
|
|
// var item = {};
|
|||
|
|
// item.id = obj.id;
|
|||
|
|
// item.image = $(obj).find('.project-list-item-cover')[0].src;
|
|||
|
|
// item.title = $(obj).find('h2')[0].innerHTML;
|
|||
|
|
// item.remark = $(obj).find('.project-list-item-text')[0].innerHTML;
|
|||
|
|
// item.time = $(obj).find('.time')[0].innerHTML;
|
|||
|
|
// _instances[elem.id].option.checkedItem = item;
|
|||
|
|
//}
|
|||
|
|
/** 对外提供的方法 */
|
|||
|
|
var tt = {
|
|||
|
|
/* 渲染 */
|
|||
|
|
render: function (options) {
|
|||
|
|
return new card(options);
|
|||
|
|
},
|
|||
|
|
/* 重载 */
|
|||
|
|
reload: function (id, opt) {
|
|||
|
|
_instances[id].option.checkedItem = null;
|
|||
|
|
_instances[id].reload(opt);
|
|||
|
|
},
|
|||
|
|
/* 获取选中数据 */
|
|||
|
|
getChecked: function (id) {
|
|||
|
|
var option = _instances[id].option;
|
|||
|
|
var data = option.checkedItem;
|
|||
|
|
if (!data) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
return data;
|
|||
|
|
},
|
|||
|
|
/* 获取表格数据 */
|
|||
|
|
getAllData: function (id) {
|
|||
|
|
var option = _instances[id].option;
|
|||
|
|
var data = [];
|
|||
|
|
for (var i = 0; i < option.data.length; i++) {
|
|||
|
|
var item = {};
|
|||
|
|
item[option.request.idName] = option.data[i].id;
|
|||
|
|
item[option.request.imageName] = option.data[i].image;
|
|||
|
|
item[option.request.titleName] = option.data[i].title;
|
|||
|
|
item[option.request.remarkName] = option.data[i].remark;
|
|||
|
|
item[option.request.timeName] = option.data[i].time;
|
|||
|
|
item = $.extend(JSON.parse(JSON.stringify(option.data[i])), item);
|
|||
|
|
if (option.request.idName != "id") {
|
|||
|
|
delete item.id;
|
|||
|
|
}
|
|||
|
|
if (option.request.imageName != "image") {
|
|||
|
|
delete item.image;
|
|||
|
|
}
|
|||
|
|
if (option.request.titleName != "title") {
|
|||
|
|
delete item.title;
|
|||
|
|
}
|
|||
|
|
if (option.request.remarkName != "remark") {
|
|||
|
|
delete item.remark;
|
|||
|
|
}
|
|||
|
|
if (option.request.timeName != "time") {
|
|||
|
|
delete item.time;
|
|||
|
|
}
|
|||
|
|
data.push(item);
|
|||
|
|
}
|
|||
|
|
return data;
|
|||
|
|
},
|
|||
|
|
on: function (events, callback) {
|
|||
|
|
return this.on(this, MOD_NAME, events, callback);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
exports(MOD_NAME, tt);
|
|||
|
|
})
|