mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-07-09 19:42:47 +08:00
完成移动端表格卡片;
This commit is contained in:
@@ -519,3 +519,91 @@ table样式
|
|||||||
background: goldenrod;
|
background: goldenrod;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.data-item{
|
||||||
|
display: none;
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 450px) {
|
||||||
|
.data-item{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-form-item .layui-form-label {
|
||||||
|
float : unset;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.layuimini-form>.layui-form-item .required:after {
|
||||||
|
right : unset;
|
||||||
|
left : 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-input-block {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-anim-upbit {
|
||||||
|
min-width: unset !important;
|
||||||
|
width : calc(100% - 20px);
|
||||||
|
overflow : auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-table-page {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-form-pane .layui-form-item .layui-form-label {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-table-page {
|
||||||
|
height: 45px
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.layui-table-main .layui-table tr {
|
||||||
|
background-color: #eee;
|
||||||
|
border-radius : 15px;
|
||||||
|
padding : 15px;
|
||||||
|
margin-bottom : 15px;
|
||||||
|
display : block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.layui-table-main .layui-table {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-table-main tbody {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-table-main td {
|
||||||
|
display : flex;
|
||||||
|
align-items : flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-right : 0;
|
||||||
|
border-bottom : 1px solid #fff;
|
||||||
|
min-height : 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.layui-table-main .layui-table-cell {
|
||||||
|
width : auto;
|
||||||
|
padding : 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layuimini-container .layui-table-box {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-table-header{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -209,6 +209,33 @@ define(["jquery", "tableSelect", "ckeditor"], function ($, tableSelect, undefine
|
|||||||
extend: 'data-table-id="' + options.id + '"'
|
extend: 'data-table-id="' + options.id + '"'
|
||||||
}];
|
}];
|
||||||
|
|
||||||
|
options.done = function () {
|
||||||
|
|
||||||
|
if (admin.checkMobile()) {
|
||||||
|
var domTable = $('[lay-id="' + options.id + '"]');
|
||||||
|
|
||||||
|
var colsHeader = [];
|
||||||
|
domTable.find('.layui-table-header').first().find('.layui-table-cell').each(function (index, cell) {
|
||||||
|
|
||||||
|
if ($(cell).hasClass('laytable-cell-checkbox')) {
|
||||||
|
colsHeader.push('选择');
|
||||||
|
} else {
|
||||||
|
colsHeader.push($(cell).find('span').first().text())
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
domTable.find('.layui-table-main').find('tr').each(function (index, domTr) {
|
||||||
|
|
||||||
|
$(domTr).find('td').each(function (indexTd, domTd) {
|
||||||
|
|
||||||
|
$('<div class="data-item">' + colsHeader[indexTd] + '</div>').insertBefore($(domTd).find('.layui-table-cell'))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 判断是否为移动端
|
// 判断是否为移动端
|
||||||
if (admin.checkMobile()) {
|
if (admin.checkMobile()) {
|
||||||
options.defaultToolbar = !options.search ? ['filter'] : ['filter', {
|
options.defaultToolbar = !options.search ? ['filter'] : ['filter', {
|
||||||
@@ -217,6 +244,11 @@ define(["jquery", "tableSelect", "ckeditor"], function ($, tableSelect, undefine
|
|||||||
icon: 'layui-icon-search',
|
icon: 'layui-icon-search',
|
||||||
extend: 'data-table-id="' + options.id + '"'
|
extend: 'data-table-id="' + options.id + '"'
|
||||||
}];
|
}];
|
||||||
|
|
||||||
|
|
||||||
|
options.page = {
|
||||||
|
layout: ['first','prev', 'page', 'next','last','count']
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 判断元素对象是否有嵌套的
|
// 判断元素对象是否有嵌套的
|
||||||
@@ -538,6 +570,12 @@ define(["jquery", "tableSelect", "ckeditor"], function ($, tableSelect, undefine
|
|||||||
cols[i][index]['templet'] = admin.table.list;
|
cols[i][index]['templet'] = admin.table.list;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (admin.checkMobile()) {
|
||||||
|
if (val.fixed !== undefined) {
|
||||||
|
val.fixed = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return cols;
|
return cols;
|
||||||
|
|||||||
Reference in New Issue
Block a user