diff --git a/admin/data/card.json b/admin/data/card.json index e531747..e238590 100644 --- a/admin/data/card.json +++ b/admin/data/card.json @@ -1,56 +1,57 @@ { - "code": 0, - "msg": "...", - "count": 3, + "msg": "not data", + "count": 30, "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": "几秒前" - },{ - "id": "1", - "image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png", - "title": "Angular", - "remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的", - "time": "几秒前" - }, - { - "id": "1", - "image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png", - "title": "React", - "remark": "那是一种内在的东西， 他们到达不了，也无法触及的", - "time": "几秒前" - },{ - "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": "几秒前" - },{ - "id": "1", - "image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png", - "title": "Angular", - "remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的", - "time": "几秒前" - }, - { - "id": "1", - "image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png", - "title": "React", - "remark": "那是一种内在的东西， 他们到达不了，也无法触及的", - "time": "几秒前" - }] + "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": "几秒前" + }, { + "id": "3", + "image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png", + "title": "Angular", + "remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的", + "time": "几秒前" + }, + { + "id": "4", + "image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png", + "title": "React", + "remark": "那是一种内在的东西， 他们到达不了，也无法触及的", + "time": "几秒前" + }, { + "id": "5", + "image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png", + "title": "Alipay", + "remark": "那是一种内在的东西， 他们到达不了，也无法触及的", + "time": "几秒前" + }, { + "id": "6", + "image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png", + "title": "Layui", + "remark": "生命就像一盒巧克力，结果往往出人意料", + "time": "几秒前" + }, { + "id": "7", + "image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png", + "title": "Angular", + "remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的", + "time": "几秒前" + }, + { + "id": "8", + "image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png", + "title": "React", + "remark": "那是一种内在的东西， 他们到达不了，也无法触及的", + "time": "几秒前" + } + ], + "code": 0 } diff --git a/component/pear/css/module/card.css b/component/pear/css/module/card.css index 1a7b68c..39b4ed2 100644 --- a/component/pear/css/module/card.css +++ b/component/pear/css/module/card.css @@ -69,10 +69,25 @@ margin-left: -10px; } -.pear-card-component { +.cloud-card-component { padding: 20px; } -.pear-card-component .layui-laypage .layui-laypage-curr .layui-laypage-em { - border-radius: 0px !important; +.cloud-card-component .layui-table-click { + border-radius: 6px!important; } + +.ew-table-loading { + padding: 10px 0; + text-align: center; +} +.ew-table-loading > i { + color: #999; + font-size: 30px; +} +.ew-table-loading.ew-loading-float { + position: absolute; + top: 0; + left: 0; + right: 0; +} \ No newline at end of file diff --git a/component/pear/module/card.js b/component/pear/module/card.js index 66c2b65..9cb32f1 100644 --- a/component/pear/module/card.js +++ b/component/pear/module/card.js @@ -5,98 +5,263 @@ layui.define(['table', 'laypage','jquery', 'element'], function(exports) { $ = layui.jquery, element = layui.element, 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, //是否分页 + 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 + }, + clickItem: function(data){}, + done: function () { - var pearCard = function(opt) { - this.option = opt; + } }; - - pearCard.prototype.render = function(opt) { - var option = { - // 构建的模型 - elem: opt.elem, - // 数据 url 连接 - url: opt.url, - // lineSize 每行的个数 - lineSize: opt.lineSize ? opt.lineSize : 4, - // 共多少个 - pageSize: opt.pageSize ? opt.pageSize : 12, - // 当前页 - currentPage: opt.currentSize ? opt.currentSize : 0, - // 完 成 函 数 - done: opt.done ? opt.done : function() { - alert("跳转页面"); + + 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 ? '
' : '
'; + html += ''; + html += '
'; + $(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]; + } + } + getData(url).then(function(data){ + data = initData(data, option); + if (data.code != option.response.statusCode) { + option.data = []; + option.count = 0; + } else { + option.data = data.data; + option.count = option.data.length; + } + + if (!!option.data && option.data.length > 0) { + html = createComponent(option.elem.substring(1), option.linenum, option.data); + html += "
"; + } + else { + html = "

没有数据

"; + } + $(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); + } + } + }); + } + }); + } + 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 0) { + html = createComponent(option.elem.substring(1), option.linenum, option.data); + html += "
"; + } + else { + html = "

没有数据

"; + } + $(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); + } + } + }); } } - // 根 据 请 求 方 式 获 取 数 据 - if (option.url != null) { - // 复制数据 - option.data = getData(option.url).data; - } - - // 根据结果进行相应结构的创建 - var html = createComponent(option.data); - - $(option.elem).html(html); - - // 初始化分页组件 - laypage.render({ - elem: 'cardpage' - ,count: 100 - ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] - ,jump: function(obj){ - console.log(obj) - } - }); - - return new pearCard(option); } + + card.prototype.reload = function (opt) { + this.initOptions(this.option ? $.extend(true, this.option, opt) : opt); + this.init(); // 初始化表格 + } - function createComponent(data) { - var html = "
" - var content = createCards(data); - var page = "
" + function createComponent(elem,linenum,data) { + var html = "
" + var content = createCards(elem, linenum,data); + var page = ""; content = content + page; html += content + "
" return html; } - - - /** 创建指定数量的卡片 */ - function createCards(data) { - + + function createCards(elem, linenum,data) { var content = "
"; - $.each(data, function(i, item) { - - content += createCard(item); - - }) - content += "
" + for (var i = 0; i < data.length; i++) { + content += createCard(elem, linenum,data[i],i); + } + content += "
"; return content; } - - - /** 创建一个卡片 */ - function createCard(item) { - + + function createCard(elem, linenum, item, no) { + var line = 12 / linenum; var card = - '

'+item.title+'

'+item.remark+'
'+item.time+'
' - + '

' + item.title + '

' + item.remark + '
' +item.time + '
' return card; } - - /** 同 步 请 求 获 取 数 据 */ - function getData(url) { - - $.ajaxSettings.async = false; - var data = null; - - $.get(url, function(result) { - data = result; - }); - - $.ajaxSettings.async = true; + + 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]; + data.data.push(item); + } return data; - } + } - exports(MOD_NAME, new pearCard()); -}) + function getData(url) { + var defer = $.Deferred(); + $.get(url + "?fresh=" + Math.random(), function(result) { + defer.resolve(result) + }); + return defer.promise(); + } + + 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; + _instances[elem.id].option.clickItem(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; + var item = {}; + if (!data) { + return null; + } + item[option.request.idName] = data.id; + item[option.request.imageName] = data.image; + item[option.request.titleName] = data.title; + item[option.request.remarkName] = data.remark; + item[option.request.timeName] = data.time; + return item; + }, + + 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; + data.push(item); + } + return data; + }, + } + + exports(MOD_NAME, tt); +}) \ No newline at end of file diff --git a/index.html b/index.html index feb2293..c211c09 100644 --- a/index.html +++ b/index.html @@ -105,7 +105,6 @@ // 重写消息回调 [消息列表点击事件] // admin.message(function(id, title, context, form) {}); - }) diff --git a/view/document/card.html b/view/document/card.html index b64ad9e..4f98816 100644 --- a/view/document/card.html +++ b/view/document/card.html @@ -2,58 +2,77 @@ - - + 数据卡片 + - - -
-
-
-
- -
- -
- -
- -
- - - -
-
-
-
-
-
- 卡片列表 -
-
-
-
-
- + +
+
+
+
+ +
+ +
+ +
+ +
+
+ + + +
+
+
+
+
+
- \ No newline at end of file +