😐 restructure card component
就眠仪式
parent
d0c8005acf
commit
ee09621156
|
|
@ -1,56 +1,57 @@
|
||||||
{
|
{
|
||||||
"code": 0,
|
"msg": "not data",
|
||||||
"msg": "...",
|
"count": 30,
|
||||||
"count": 3,
|
|
||||||
"data": [{
|
"data": [{
|
||||||
"id": "1",
|
"id": "1",
|
||||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
|
||||||
"title": "Alipay",
|
"title": "Alipay",
|
||||||
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
||||||
"time": "几秒前"
|
"time": "几秒前"
|
||||||
},{
|
}, {
|
||||||
"id": "2",
|
"id": "2",
|
||||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
|
||||||
"title": "Layui",
|
"title": "Layui",
|
||||||
"remark": "生命就像一盒巧克力，结果往往出人意料",
|
"remark": "生命就像一盒巧克力，结果往往出人意料",
|
||||||
"time": "几秒前"
|
"time": "几秒前"
|
||||||
},{
|
}, {
|
||||||
"id": "1",
|
"id": "3",
|
||||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
|
||||||
"title": "Angular",
|
"title": "Angular",
|
||||||
"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
|
"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
|
||||||
"time": "几秒前"
|
"time": "几秒前"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "1",
|
"id": "4",
|
||||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
|
||||||
"title": "React",
|
"title": "React",
|
||||||
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
||||||
"time": "几秒前"
|
"time": "几秒前"
|
||||||
},{
|
}, {
|
||||||
"id": "1",
|
"id": "5",
|
||||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
|
||||||
"title": "Alipay",
|
"title": "Alipay",
|
||||||
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
||||||
"time": "几秒前"
|
"time": "几秒前"
|
||||||
},{
|
}, {
|
||||||
"id": "2",
|
"id": "6",
|
||||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
|
||||||
"title": "Layui",
|
"title": "Layui",
|
||||||
"remark": "生命就像一盒巧克力，结果往往出人意料",
|
"remark": "生命就像一盒巧克力，结果往往出人意料",
|
||||||
"time": "几秒前"
|
"time": "几秒前"
|
||||||
},{
|
}, {
|
||||||
"id": "1",
|
"id": "7",
|
||||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
|
||||||
"title": "Angular",
|
"title": "Angular",
|
||||||
"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
|
"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
|
||||||
"time": "几秒前"
|
"time": "几秒前"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "1",
|
"id": "8",
|
||||||
"image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
|
||||||
"title": "React",
|
"title": "React",
|
||||||
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
||||||
"time": "几秒前"
|
"time": "几秒前"
|
||||||
}]
|
}
|
||||||
|
],
|
||||||
|
"code": 0
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -69,10 +69,25 @@
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pear-card-component {
|
.cloud-card-component {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pear-card-component .layui-laypage .layui-laypage-curr .layui-laypage-em {
|
.cloud-card-component .layui-table-click {
|
||||||
border-radius: 0px !important;
|
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;
|
||||||
|
}
|
||||||
|
|
@ -5,98 +5,263 @@ layui.define(['table', 'laypage','jquery', 'element'], function(exports) {
|
||||||
$ = layui.jquery,
|
$ = layui.jquery,
|
||||||
element = layui.element,
|
element = layui.element,
|
||||||
laypage = layui.laypage;
|
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 card = function(opt) {
|
||||||
var option = {
|
_instances[opt.elem.substring(1)] = this;
|
||||||
// 构建的模型
|
this.reload(opt);
|
||||||
elem: opt.elem,
|
};
|
||||||
// 数据 url 连接
|
card.prototype.initOptions = function (opt) {
|
||||||
url: opt.url,
|
this.option = $.extend(true, {}, defaultOption, opt);
|
||||||
// lineSize 每行的个数
|
if (!this.option.limit || this.option.limit == 0) {
|
||||||
lineSize: opt.lineSize ? opt.lineSize : 4,
|
this.option.limit = this.option.linenum * 2;
|
||||||
// 共多少个
|
}
|
||||||
pageSize: opt.pageSize ? opt.pageSize : 12,
|
if (!this.option.limits || this.option.limits.length == 0) {
|
||||||
// 当前页
|
this.option.limits = [this.option.limit];
|
||||||
currentPage: opt.currentSize ? opt.currentSize : 0,
|
}
|
||||||
// 完 成 函 数
|
};
|
||||||
done: opt.done ? opt.done : function() {
|
|
||||||
alert("跳转页面");
|
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];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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 += "<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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
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.elem.substring(1), option.linenum, option.data);
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 根 据 请 求 方 式 获 取 数 据
|
|
||||||
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) {
|
function createComponent(elem,linenum,data) {
|
||||||
var html = "<div class='pear-card-component'>"
|
var html = "<div class='cloud-card-component'>"
|
||||||
var content = createCards(data);
|
var content = createCards(elem, linenum,data);
|
||||||
var page = "<div id='cardpage'></div>"
|
var page = "";
|
||||||
content = content + page;
|
content = content + page;
|
||||||
html += content + "</div>"
|
html += content + "</div>"
|
||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function createCards(elem, linenum,data) {
|
||||||
/** 创建指定数量的卡片 */
|
|
||||||
function createCards(data) {
|
|
||||||
|
|
||||||
var content = "<div class='layui-row layui-col-space30'>";
|
var content = "<div class='layui-row layui-col-space30'>";
|
||||||
$.each(data, function(i, item) {
|
for (var i = 0; i < data.length; i++) {
|
||||||
|
content += createCard(elem, linenum,data[i],i);
|
||||||
content += createCard(item);
|
}
|
||||||
|
content += "</div>";
|
||||||
})
|
|
||||||
content += "</div>"
|
|
||||||
return content;
|
return content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function createCard(elem, linenum, item, no) {
|
||||||
/** 创建一个卡片 */
|
var line = 12 / linenum;
|
||||||
function createCard(item) {
|
|
||||||
|
|
||||||
var card =
|
var card =
|
||||||
'<div class="layui-col-md3 ew-datagrid-item" data-index="0" data-number="1"> <div class="project-list-item"> <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> <div class="ew-head-list"> <img class="ew-head-list-item" lay-tips="曲丽丽" lay-offset="0,-5px" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"> <img class="ew-head-list-item" lay-tips="王昭君" lay-offset="0,-5px" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"> <img class="ew-head-list-item" lay-tips="董娜娜" lay-offset="0,-5px" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"> </div> </div> </div> </div> </div>'
|
'<div id=' + item.id + ' onclick="cardTableCheckedCard(' + elem + ',this)" class="layui-col-md' + line + ' ew-datagrid-item" data-index="' + no+'" data-number="1"> <div class="project-list-item"> <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> <div class="ew-head-list"></div> </div> </div > </div > </div > '
|
||||||
|
|
||||||
return card;
|
return card;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 同 步 请 求 获 取 数 据 */
|
function initData(tempData, option) {
|
||||||
function getData(url) {
|
var data = {};
|
||||||
|
data.code = tempData[option.response.statusName];
|
||||||
$.ajaxSettings.async = false;
|
data.msg = tempData[option.response.msgName];
|
||||||
var data = null;
|
data.count = tempData[option.response.countName];
|
||||||
|
var dataList = tempData[option.response.dataName];
|
||||||
$.get(url, function(result) {
|
data.data = [];
|
||||||
data = result;
|
for (var i = 0; i < dataList.length; i++) {
|
||||||
});
|
var item = {};
|
||||||
|
item.id = dataList[i][option.request.idName];
|
||||||
$.ajaxSettings.async = true;
|
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;
|
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);
|
||||||
|
})
|
||||||
|
|
@ -105,7 +105,6 @@
|
||||||
|
|
||||||
// 重写消息回调 [消息列表点击事件]
|
// 重写消息回调 [消息列表点击事件]
|
||||||
// admin.message(function(id, title, context, form) {});
|
// admin.message(function(id, title, context, form) {});
|
||||||
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -2,58 +2,77 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title></title>
|
<title>数据卡片</title>
|
||||||
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
|
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="pear-container">
|
||||||
<body class="pear-container">
|
<div class="layui-card">
|
||||||
<div class="layui-card">
|
<div class="layui-card-body">
|
||||||
<div class="layui-card-body">
|
<form class="layui-form layui-form-pane">
|
||||||
<form class="layui-form" action="">
|
<div class="layui-form-item">
|
||||||
<div class="layui-form-item">
|
<label class="layui-form-label">卡片标题</label>
|
||||||
<label class="layui-form-label">卡片标题</label>
|
<div class="layui-input-inline">
|
||||||
<div class="layui-input-inline">
|
<input type="text" name="realName" id="realName" placeholder="" class="layui-input">
|
||||||
<input type="text" name="realName" placeholder="" class="layui-input">
|
</div>
|
||||||
</div>
|
<label class="layui-form-label">卡片名称</label>
|
||||||
<label class="layui-form-label">卡片名称</label>
|
<div class="layui-input-inline">
|
||||||
<div class="layui-input-inline">
|
<input type="text" name="username" id="username" placeholder="" class="layui-input">
|
||||||
<input type="text" name="username" placeholder="" class="layui-input">
|
</div>
|
||||||
</div>
|
<div class="layui-inline">
|
||||||
|
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i>
|
||||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
|
搜 索</button>
|
||||||
<i class="layui-icon layui-icon-search"></i>
|
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-btn"><i class="layui-icon"></i>
|
||||||
查询
|
获取数据</button>
|
||||||
</button>
|
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-checked-btn"><i class="layui-icon"></i>
|
||||||
<button type="reset" class="pear-btn pear-btn-md">
|
获取选中数据</button>
|
||||||
<i class="layui-icon layui-icon-refresh"></i>
|
</div>
|
||||||
重置
|
</div>
|
||||||
</button>
|
</form>
|
||||||
</div>
|
<div id="currentTableId"></div>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="layui-card">
|
|
||||||
<div class="layui-card-header">
|
|
||||||
卡片列表
|
|
||||||
</div>
|
|
||||||
<div class="layui-card-body">
|
|
||||||
<table id="user-table" lay-filter="user-table"></table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<script src="../../component/layui/layui.js"></script>
|
<script src="../../component/layui/layui.js"></script>
|
||||||
<script src="../../component/pear/pear.js"></script>
|
<script src="../../component/pear/pear.js"></script>
|
||||||
<script>
|
<script>
|
||||||
layui.use(['form','card'],function () {
|
layui.use(['table', 'layer', 'form', 'jquery', 'card'], function() {
|
||||||
let form = layui.form;
|
|
||||||
|
let table = layui.table;
|
||||||
|
let form = layui.form;
|
||||||
|
let $ = layui.jquery;
|
||||||
|
let layer = layui.layer;
|
||||||
let card = layui.card;
|
let card = layui.card;
|
||||||
|
|
||||||
card.render({
|
card.render({
|
||||||
elem: '#user-table',
|
elem: '#currentTableId',
|
||||||
url:'../../admin/data/card.json',
|
url: '../../admin/data/card.json', // 接口数据
|
||||||
|
data: [], // 静态数据
|
||||||
|
page: true, // 是否分页
|
||||||
|
limit: 8, // 每页数量
|
||||||
|
linenum: 4, // 每行数量
|
||||||
|
clickItem: function(data){ // 单击事件
|
||||||
|
console.log(data)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
})
|
// 监听搜索操作
|
||||||
|
form.on('submit(data-search-btn)', function(data) {
|
||||||
|
queryJson = data.field;
|
||||||
|
card.reload("currentTableId", {
|
||||||
|
where: queryJson,
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
form.on('submit(data-checked-btn)', function() {
|
||||||
|
var data = card.getChecked("currentTableId");
|
||||||
|
layer.msg(JSON.stringify(data));
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
form.on('submit(data-btn)', function() {
|
||||||
|
var data = card.getAllData("currentTableId");
|
||||||
|
layer.msg(JSON.stringify(data));
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue