添加项目文件。
This commit is contained in:
375
HT.Cloud.Web/wwwroot/js/lay-module/cardTable/cardTable.js
Normal file
375
HT.Cloud.Web/wwwroot/js/lay-module/cardTable/cardTable.js
Normal file
@ -0,0 +1,375 @@
|
||||
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);
|
||||
})
|
Reference in New Issue
Block a user