基于Layuimini的自己封装后台模板
基于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的自己封装后台模板的更多相关文章
- JYadmin-react-antd react+antd封装的优秀后台模板集成方案("^1.0.0")
版本:[ "JYadmin-react-antd": "^1.0.0"] 版权所有:微信公众号[微新悦] 原文链接:https://www.weixinyue. ...
- Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...
- 推荐几款基于Bootstrap的响应式后台管理模板
1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...
- 基于 Laravel-Admin 在十分钟内搭建起功能齐全的后台模板
http://laravelacademy.org/post/6468.html 1.简介 为 Laravel 提供后台模板的项目越来越多,学院君已陆续为大家介绍过Laravel Angular Ad ...
- Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述
挤一下: 一开始以为没有多少人用就没建群,但是加我的人太多了,好多问题都是重复的,所以建个群大家互相沟通交流方便点,但是建的有点晚,错过了好多人所以群里人有点少,QQ群: 157216616 小提示 ...
- Matrix Admin 后台模板笔记
一个后台模板用久了就想换一个.上次找到了Matrix Admin.和ACE一样都是Bootstrap风格,比较容易上手.Matrix要更健壮些.感觉拿去做用户界面也是可以的. 整体风格: 1.表单验证 ...
- 12个免费的 Twitter Bootstrap 后台模板
在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...
- 简洁AngularJS框架后台管理系统bootstrap后台模板
最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
随机推荐
- 1. git简介
1.1 版本控制理解 版本控制 工程设计领域中使用版本控制管理工程蓝图的设计过程,在 IT 开发过程中也可以使用版本控制思想管理代码的版本迭代 集中式版本控制工具 CVS.SVN.VSS等 分布式版本 ...
- Java蓝桥杯练习题——Huffman树
Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0, p1, -, pn-1},用这列数构造Huffman树的过程如下: 找到{pi}中 ...
- linux下安装python3.7.1
一.安装依赖环境 输入命令:yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readlin ...
- 解决 Zuul 中 OAuth2 报 unauthorized 错误
问题描述 微服务中使用 OAuth2 鉴权,直接访问正常,通过 Zuul 访问报错: { "error": "unauthorized", "erro ...
- MyBatis-01:环境搭建
MyBatis-01:环境搭建 1.搭建实验数据库 CREATE DATABASE `mybatis`; USE `mybatis`; DROP TABLE IF EXISTS `user`; CRE ...
- MongoEngine模块
今儿,接到老的的要求,要把新功能的数据存放在Mongo里.虽然一直都有听过Mango的鼎鼎大名,但是那也只是见过没用过,跟个小白没啥区别.在加上功能急需,没办法只能赶鸭子上架先上再说.下面这篇就是我赶 ...
- PyQt(Python+Qt)学习随笔:QToolBox工具箱的currentItemName和tabSpacing属性
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在Designer中,toolBox的属性中有currentItemName和tabSpacing属 ...
- 第14.18节 爬虫实战4: request+BeautifulSoup+os实现利用公众服务Wi-Fi作为公网IP动态地址池
写在前面:本文相关方法为作者独创,仅供参考学习爬虫技术使用,请勿用作它途,禁止转载! 一. 引言 在爬虫爬取网页时,有时候希望不同的时候能以不同公网地址去爬取相关的内容,去网上购买地址资源池是大部分人 ...
- 第14.9节 Python中使用urllib.request+BeautifulSoup获取url访问的基本信息
利用urllib.request读取url文档的内容并使用BeautifulSoup解析后,可以通过一些基本的BeautifulSoup对象输出html文档的基本信息.以博文<第14.6节 使用 ...
- PyQt(Python+Qt)学习随笔:Qt Designer中toolBar的movable属性
1.概述 movable属性用来确认toolBar是否可以移动,如果设置为可移动,则toolBar可以在主窗口范围内拖拽移动. 2.访问方法 通过isMovable().setMovable(bool ...