基于Layui的后台模板,正在开发中

交流qq群:1062635741 邮箱:zhangqueque.foxmail.com

GitHub:https://github.com/ZhangQueque/quewaner.Layui.git

借鉴框架

Layuimini

在Layuimini中iframe 多tab版 基础上修改,保留其动态渲染菜单(写的非常帮帮,作为后端的我表示没看懂)、tab打开iframe窗口、更换主题等功能。

为啥子要写呢

  • 方便,为了兼职等,快速的搭建一套搭建后台管理系统。
  • 给我母校学弟学妹们用一用
  • ayui的组件进行封装,以C#见名识义的方法进行调用。
  • 主模板是Layui,但是并不局限于使用Layui的组件及样式,也可以使用BootStrape、Vue等。这都得利于Layuimini框架的iframe窗口,再窗口中打开的是一个新页面,所以不受Layui局限。

样例

正常的Layui表格渲染

table.render({
elem: '#currentTableId',
url: '../api/table.json',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50},
{field: 'id', width: 80, title: 'ID', sort: true},
{field: 'username', width: 80, title: '用户名'},
{field: 'sex', width: 80, title: '性别', sort: true},
{field: 'city', width: 80, title: '城市'},
{field: 'sign', title: '签名', minWidth: 150},
{field: 'experience', width: 80, title: '积分', sort: true},
{field: 'score', width: 80, title: '评分', sort: true},
{field: 'classify', width: 80, title: '职业'},
{field: 'wealth', width: 135, title: '财富', sort: true},
{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
skin: 'line'
});

封装后

 /**
* 菜单初始化
* @param tableId string 表格ID
* @param url string 数据接口
* @param cols [{}] 表头
* @param page bool 是否启动分页,默认true
* @param limit int 每页显示数量,默认10
* @param skin string 皮肤,默认line
*/
LayuiHelper.TableRender('#currentTableId', '/api/table.json', [
{ type: "checkbox", width: 50 },
{ field: 'id', width: 80, title: 'ID', sort: true },
{ field: 'username', width: 80, title: '用户名' },
{ field: 'sex', width: 80, title: '性别', sort: true },
{ field: 'city', width: 80, title: '城市' },
{ field: 'sign', title: '签名', minWidth: 150 },
{ field: 'experience', width: 80, title: '积分', sort: true },
{ field: 'score', width: 80, title: '评分', sort: true },
{ field: 'classify', width: 80, title: '职业' },
{ field: 'wealth', width: 135, title: '财富', sort: true },
{ title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center" }
]);

基于Layuimini的自己封装后台模板的更多相关文章

  1. JYadmin-react-antd react+antd封装的优秀后台模板集成方案("^1.0.0")

    版本:[ "JYadmin-react-antd": "^1.0.0"] 版权所有:微信公众号[微新悦] 原文链接:https://www.weixinyue. ...

  2. Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板

    Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...

  3. 推荐几款基于Bootstrap的响应式后台管理模板

    1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...

  4. 基于 Laravel-Admin 在十分钟内搭建起功能齐全的后台模板

    http://laravelacademy.org/post/6468.html 1.简介 为 Laravel 提供后台模板的项目越来越多,学院君已陆续为大家介绍过Laravel Angular Ad ...

  5. Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述

    挤一下: 一开始以为没有多少人用就没建群,但是加我的人太多了,好多问题都是重复的,所以建个群大家互相沟通交流方便点,但是建的有点晚,错过了好多人所以群里人有点少,QQ群: 157216616 小提示 ...

  6. Matrix Admin 后台模板笔记

    一个后台模板用久了就想换一个.上次找到了Matrix Admin.和ACE一样都是Bootstrap风格,比较容易上手.Matrix要更健壮些.感觉拿去做用户界面也是可以的. 整体风格: 1.表单验证 ...

  7. 12个免费的 Twitter Bootstrap 后台模板

    在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...

  8. 简洁AngularJS框架后台管理系统bootstrap后台模板

    最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...

  9. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. 如何在苹果电脑下载器Folx中管理下载列表

    Folx是一款Mas OS专用的下载器,提供了便捷的下载管理.灵活的设置.今天小编准备跟大家聊一聊关于Folx中常见的几种下载管理方式. 一.管理任务状态栏 在Folx下载面板上,可以通过类别查看任务 ...

  2. python debug调试

    ------------恢复内容开始------------ 一.debug 1.step over f8(单步调试) 2.进入到下一个断点 3.运行到指定行 4.进入到对应的代码行,(和单步调试配合 ...

  3. 4 种高可用 RocketMQ 集群搭建方案!

    背景 笔者所在的业务线,最初化分为三个服务,由于业务初期业务复杂度相对简单,三个业务服务都能很好的独立完成业务功能. 随着产品迭代,业务功能越来越多后慢慢也要面对高并发.业务解耦.分布式事务等问题,所 ...

  4. DNS、IP地址、子网掩码和默认网关

    一.DNS服务器 DNS是指:域名服务器(Domain Name Server).在Internet上域名与IP地址之间是一一对应的,域名虽然便于人们记忆,但机器之间只能互相认识IP地址,它们之间的转 ...

  5. 基础篇:JAVA.Stream函数,优雅的数据流操作

    前言 平时操作集合数据,我们一般都是for或者iterator去遍历,不是很好看.java提供了Stream的概念,它可以让我们把集合数据当做一个个元素在处理,并且提供多线程模式 流的创建 流的各种数 ...

  6. 第8.29节 使用MethodType将Python __setattr__定义的实例方法与实例绑定

    一. 引言 在<第7.14节Python类中的实例方法解析>介绍了使用"实例对象名.方法名 = MethodType(函数, 对象)"将动态定义的方法与实例进行绑定 在 ...

  7. 第9.9节 Python文件随机读写定位操作方法seek

    类似于C语言,Python也提供了文件位置定位的操作方法seek. 一. 语法 seek(offset, whence=SEEK_SET) 语法释义: 1)offset :将文件当前操作位置移动偏移量 ...

  8. 常见的HTML元素及常见检查点

    1.<select>标签,可创建单选或多选菜单 检查点:下拉列表数据的正确性.数据被选中是否正确.是否变形.是否只读.多选/单选是否正确 2.<label>标签,相当于一个展示 ...

  9. Python追加文件内容

    测试中需要造几百个账号,写了个脚本可以自动生成账号,但想把生成的账号写入一个文件, 开始用的如下的write()方法,发下会先把原文件的内容清空再写入新的东西,文件里面每次都是最新生成的一个账号 mo ...

  10. vulnstack靶机实战01

    前言 vulnstack是红日安全的一个实战环境,地址:http://vulnstack.qiyuanxuetang.net/vuln/detail/2/最近在学习内网渗透方面的相关知识,通过对靶机的 ...