同步操作将从 jQ酷/jqadmin 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
修改目录结构,本次使用了服务端ssi功能,就是html包含文件,如何开启ssi功能,nginx的是在站点配置文件加上以下代码,其它们的请自行找度娘解决
location / {
ssi on;
ssi_silent_errors on;
ssi_types text/html;
index index.html index.htm index.php;
#autoindex on;
}
修正弹出窗口宽高设置过大,超出屏幕无法关闭错误
添中菜单卡右键弹出菜单
添加菜单卡可以按下左键拖动
添加切换菜单卡的时候是否刷新参数,在菜单模板参数上加上isFresh:true即可在点击右左边菜单时刷新页面
添加表单验证出错时跳转到出错的TAB页
修正提正表单成功后不关闭窗口BUG
一款由JQ酷为了省时间而打造的后台管理模板,封装了常用的JS方法,使得你可以写更少甚至不写js代码就可以完成整个后台的搭建。模板使用了layui,模块化开发,本套模板是按着本人这些年来的习惯编写,也为方便以后搭建项目的便捷而编写,当然,本人的能力是有限的,模板中难免会存在体验不好、BUG或是错误,欢迎朋友们提出,或是同为这份开源免费的模板做份贡献。
注:请在服务器环境中执行,不要直接打开文件,否则后果自负,哈哈...
喜欢的请到layui官方点个赞哈:http://fly.layui.com/case/2017/
本套模板使用了bootstrap基本样式,并容合了layui的风格,当然本人的意愿也不再想去兼容低版本的浏览器,一味的兼容也就意味着纵容,也许是时候抛掉那些坑人的浏览器的时候了,因此请使用IE9或以上的现代浏览器。
兼容IE9+ 、谷歌 、 火狐等现代浏览器
注意:本版本由于时间关系,暂没有支持移动端,当然会在下一个版本加入支持。
请先了解layui的使用方法,不懂者可以到官方看文档,还是比较轻松容易上手的,哈哈哈哈哈。。。
其实不看官方文档也可以用,前提是现在的模板的功能和交互都适合你使用...好吧,我承认这是费话...哈哈
要使用的每一个自定义模块都需要在html页面定义别名,方能引入。请注意后面的代码将省略本部份代码,请根据需求自行加上。
//引入layui框架
<script type="text/javascript" src="js/layui/layui.js"></script>
//定义js文件目录,定义别名,并调用文件(这个不熟请移动到layui官方文档)
<script>
layui.config({
base: 'js/' js文件的根目录
}).extend({
echarts: 'lib/echarts', 定义图型模块的别名,与在js根目录的位置
ajax: 'jqmodules/ajax', 定义异步模块的别名,与在js根目录的位置
modal: 'jqmodules/modal'定义弹窗模块的别名,与在js根目录的位置
}).use(['main', 'echart']); 使用mian模块与图形模块
</script>
先引入ajax模块,先引入ajax模块,先引入ajax模块...(记住哈)
1、ajax单击异步
在需要绑定异步提交的元素上加上class="ajax",再添加一个data-params属性,本属性值请严格按照格式填 写,否则出错,即用单引号‘在外面,每一个健与值用双引号“,中间用分号隔开,每一个健值对用逗号隔开,下面代码是单击删除按钮异步提交
<button class="layui-btn layui-btn-mini layui-btn-danger ajax" data-params='{"url":"/php/test.php","data":"id=1&name=jqcool"}'>
<i class="iconfont"></i>删除
</button>
参数:
参数 | 默认值 | 说明 |
---|---|---|
method | post | 提交的方法 |
data | 提交到服务端的数据,格式为id=1&name=jqcool | |
dataType | json | 服务器返回数据类型 |
complete | 服务器返回数据后调用的自定义方法(注意影响的域,建议全局)name=jqcool&complete=test | |
url | 请求的服务端地址 | |
loading | true | 是否启用loading图片 |
confirm | false | 是否弹出窗口确认操作(注:switch和文框不适用) |
返回操作只作了提示或跳转的功能能,如需求复杂的操作,请自定义回调方法。返回数据为json格式,需要包含几个参数,如果自定义了回调方法,请自行设定,参数不受影响。服务端返回代码
$data['status'] = 200;
$data['msg'] ="更新成功";
$data['url'] = "";
echo header("content-type:text/html; charset=utf-8");
echo json_encode($data);
参数 | 必填 | 说明 |
---|---|---|
msg | 否 | 返回的提示信息 |
url | 否 | 为空或不定义时不操作,为地址时跳转到相应地址,为reload是刷新页面 |
status | 是 | 状态,成功时为200,其它均为错误 |
2、ajax-all单击提交选中的复选框与设定的值,一般用于全选后,提交操作
在需要绑定异步提交的元素上加上class="ajax-all",再添加一个data-params属性,参数与上面ajax一样,但此处需要再添加一个data-name属性,该值为复选框的name值,该方法会把所有复选框为name值的值拼成字符串,如”checkbox=1,2,3",然后自动拼接到data属性提交。代码如下:
<button class="layui-btn layui-btn-small layui-btn-normal ajax-all" data-name="checkbox" data-params='{"url": "/php/test.php","data":"id=1&name=hao&va=23"}'>
<i class="layui-icon">စ</i> 审核
</button>
<input type="checkbox" name="checkbox" value="1" lay-skin="primary">
<input type="checkbox" name="checkbox" value="2" lay-skin="primary">
<input type="checkbox" name="checkbox" value="3" lay-skin="primary">
上面代码会以post的形式把参数id,name,va和checkbox传给/php/test.php
3、ajax-blur文本框失去焦点时提交操作,一般用于修改排序
在需要的文本框元素上添加class="ajax-blur",参数与ajax一样,不同的是,本方法会把文本框的name值和文本框的值拼接到data属性后,提交。当前文本框的值未发生变化是不会提交的。
<input type="text" class="layui-input ajax-blur" name="order" value="{{ item.id}}" data-params='{"url":"/php/test.php","data":"id=1&name=paco"}'>
4、绑定switch、select提交事件,这个需要先引入form模块,然后用一个含有layui-form样式的元素包含住switch、select(为何要这么做,请参考layui官方文档),然后设置属性lay-filter="ajax",如果元素为switch,那么on是为1,off时0,如on时传送的值为:switch=1,其中switch为switch input元素的name值,select则为选中的值。
<input type="checkbox" name="switch" lay-skin="switch" lay-filter="ajax" data-params='{"url":"/php/test.php","data":"id={{ item.id}}&name=paco"}'>
也许细心的同学会发现{{ item.id }},对这就是动态附值,不清楚,那请看官方文档,哈哈哈,我不会告诉你我很懒 的...
好了,ajax模块到此完结了,记得哦,全部事件的参数是一样的哦。。。所以只写了一遍。。。。
模态窗口有三个方法,modal-iframe,modal-catch,modal-photo,见名识义,iframe模式窗口,catch捕获窗口(本人比较喜欢用),photo就是相册,看不明白参数的意思的话,可以参考下官方文档。
1、modal-iframe。与ajax一样,只不过是参数有些不同而已,先上个代码
<button class="layui-btn layui-btn-small modal-iframe" data-params='{"content": "article-add.html", "title": "添加文章","full":"true"}'>
<i class="iconfont"></i> 添加
</button>
在元素上添加modal-iframe,记得先引入modal械模块,再添加data-params属性。
参数:
参数 | 默认值 | 说明 |
---|---|---|
title | false | 弹出窗口的标题 |
full | false | 是否全屏 |
shadeClose | true | 是否点击遮罩关闭 |
shade | false | 是否遮罩 |
content | 请填写打开页面的地址URL | |
area | auto | 弹出框的大小,格式:area=300px,600px |
2、modal-catch,在元素上添加class="modal-catch",设置data-params属性使用
<button class="layui-btn layui-btn-mini modal-catch" data-params='{"content": ".add-subcat","area":"600px,300px","title":"编辑{{ item.title}}分类","data":"pid=2&status=0&title=123","type":"1"}'>
<i class="iconfont"></i>编辑
</button>
<div class="add-subcat">
<form id="form1" class="layui-form layui-form-pane" action="add-cat">
<div class="layui-form-item">
<label class="layui-form-label">分类名称</label>
<div class="layui-input-block">
<input type="text" name="title" required jq-verify="required" jq-error="请输入分类名称" placeholder="请输入分类名称" autocomplete="off" class="layui-input ">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-inline">
<input type="text" name="title" required jq-verify="number" value="100" jq-error="排序必须为数字" placeholder="分类排序" autocomplete="off" class="layui-input ">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<input type="radio" name="status" title="启用" value="1" checked />
<input type="radio" name="status" title="禁用" value="0" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" jq-submit jq-filter="submit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
例子的data值,会按表单中字段的name名称赋值,单选框则根根据值选中,同理复选框根据值选中,下拉框会根据值选中,如果表单中没有该name字段的文本域,则会创建一个hidden域,如pid,在表单中没有,当单击出现窗口的时候,方法会在表单中创建一个隐藏域
<input type="hidden" name="pid" value="2" />
参数:
参数 | 默认值 | 说明 |
---|---|---|
title | false | 弹出窗口的标题 |
full | false | 是否全屏 |
shadeClose | true | 是否点击遮罩关闭 |
shade | false | 是否遮罩 |
content | html或dom | |
area | auto | 弹出框的大小,格式:area=300px,600px |
type | 1 | 窗出层的类型 |
data | 用于填充表单的数据 |
3、modal-photo 在元素上添加class="modal-photo",设置data-params属性使用
<div id="layer-photos-demo" class="modal-photo" data-params='{"content":"#layer-photos-demo","anim":5}'>
<img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
<img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
</div>
这里就两个参数,哈哈哈。。。忘了说了,这个没试过,不知能不能用哦。。。。
layui自带有一个表单验证的功能,不过本人不太喜欢那个方式,然后就借鉴并根据本人的习惯重写了,不喜勿喷,嘻嘻。注意哈,因为是基于layui的,如果需要引用form模块的话,请先引用form模块,然后再引入jqform模块,其实jqform已引入了form模块,所以是不需要再引入form模块了的。
特点
使用的步骤:
先给表单定义个ID,填写表单的action值
<form id="form1" class="layui-form layui-form-pane" action="/php/test.php">
...
</form>
引入表单模块并初始化,其实可以定义一些自己的规则
layui.define(['jquery', 'jqform'], function(exports) {
var $ = layui.jquery,
form = layui.jqform;
form.set({
"blur": true, //离开文本框时验证
"form": "#form1"
}).init();
//自定义
form.verify({
username: function(value) {
if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
return '文章标题不能有特殊字符';
}
if (/(^\_)|(\__)|(\_+$)/.test(value)) {
return '文章标题首尾不能出现下划线\'_\'';
}
if (/^\d+\d+\d$/.test(value)) {
return '文章标题不能全为数字';
}
},
pass: [
/^[\S]{6,12}$/, '密码必须6到12位,且不能出现空格'
]
});
exports('myform', {});
});
完成以上设置然后在元素上绑定规则,便可以实现验证了。注意了:每个验证都可以多个,但需要用|号隔开,同时提示信息也要用|隔开,且要与验证的方法对应,如果调用了自定义方法,那么提示信息相应位置可以留空,但|不能少。记得记得,用的是jq-verify,请与layui官方的区别开,哈哈哈。。。
<input type="text" name="title" required jq-verify="required|username" jq-error="请输入标题|这里可以不填" placeholder="请输入标题" autocomplete="off" class="layui-input ">
有些隐藏域也需要验证,然后提示信息如何显示呢,Ok,这里可以添加一个元素并定义id,然后在隐藏域添加属性error-id=“元素ID”来实现。此处的元素需自定义CSS来控制。
<input type="hidden" name="img" jq-verify="required" jq-error="请上传图片" error-id="img-error">
<p id="img-error" class="error">我是显示错误信息的元素</p>
最后在提交按钮上添加jq-submit,来实现提交验证表单,当然,如果你不打算用ajax提交,请写上lay-filter="submit",如果没这项就不能触发表单提交事件了。
<button class="layui-btn" jq-submit lay-filter="submit">立即提交</button>
初始化时可设置参数:
参数 | 默认值 | 说明 |
---|---|---|
blur | true | 失去焦点时验证 |
form | form | 需验证的表单 |
dataType | json | 服务器返回数据类型 |
complete | 服务器返回数据后调用的自定义方法(注意影响的域,建议全局)name=jqcool&complete=test | |
url | 请求的服务端地址 | |
loading | true | 是否启用loading图片 |
method | post | 表单提交 |
如果你是ajax提交,然后回调方法不能满足需求的话,可以自定义方法来解决。有两个方式定义,一个是在初始化参数时,定义complete:test,一个可以在表单添加属性complete="test"
form.set({
"change": true,
"form": "#form1"
}).init();
<form id="form1" class="layui-form layui-form-pane" complete="test" action="/php/test.php">
....
</form>
默认的回调方法请参考ajax,它们是一样的。
当然你用这个的时候 ,请先掌握layui的模板引擎,掌屋了,这里就不看了,直接用,哈哈,又费话了...
定义模板,使用一个script标签存放模板,模板定义好id,与data-params属性,具体参数后面见。
<script id="list-tpl" type="text/html" data-params='{"url":"/php/data.php","pageid":"#page"}'>
<table id="example" class="layui-table lay-even">
<thead>
<tr>
<th><input type="checkbox" id="checkall" lay-filter="check" lay-skin="primary"></th>
<th>序号</th>
<th>标题</th>
<th>连接</th>
<th>排序</th>
<th>审核</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<colgroup>
<col width="30">
<col width="60">
<col>
<col>
<col width="70">
<col width="80">
<col width="142">
</colgroup>
{{# layui.each(d.list, function(index, item){ }}
<tr>
<td><input type="checkbox" name="checkbox" value="{{ item.id}}" lay-skin="primary"></td>
<td>{{ item.id}}</td>
<td>{{ item.title}}</td>
<td>{{ item.url}}</td>
<td><input type="text" class="layui-input ajax-blur" name="order" value="{{ item.id}}" data-params='{"url":"/php/test.php","data":"id=1&name=paco"}'> </td>
<td><input type="checkbox" name="switch" lay-skin="switch" lay-filter="ajax" data-params='{"url":"/php/test.php","data":"id={{ item.id}}&name=paco"}'> </td>
<td>
<button class="layui-btn layui-btn-mini modal-iframe" data-params='{"content": "article-add.html", "title": "{{item.title}}","full":"true"}'>
<i class="iconfont"></i>编辑
</button>
<button class="layui-btn layui-btn-mini layui-btn-danger ajax" data-params='{"url": "/php/test.php","data":"id=1&name=ni"}'>
<i class="iconfont"></i>删除
</button></td>
</td>
</tr>
{{# }); }}
</tbody>
</table>
</script>
建立视图。用于呈现渲染结果,记得定义好ID。注:列表视图添加class="layui-form"是为了渲染列表中的表单元素
列表视图
<div id="list" class="layui-form"></div>
分页视图
<div class="text-right" id="page"></div>
初始化渲染参数,初始化时输入模板的id,然后方法会根据id,获取data-params参数,来初始化数据,并异步请求数据来渲染
layui.define(['jquery', 'dtable'], function(exports) {
var $ = layui.jquery,
list = layui.dtable;
oneList = new list();
oneList.init('list-tpl');
exports('list', {});
});
参数:
参数 | 默认值 | 说明 |
---|---|---|
method | get | ajax类型 |
dataType | json | 服务器返回数据类型 |
data | 请求的参数 | |
url | 请求数据的服务端地址URL | |
tplid | list-tpl | 模板的ID |
listid | list | 视图ID |
pageid | 分页视图id,如果留空则不分页 | |
curr | 1 | 当前 |
pages | 0 | 总页数,通过服务端获取 |
4.服务端返因参数格式,返回的json数据,装会放到对象d中
$msg['status'] =200;
$msg['data']['list'] = $list;列表数据
$msg['data']['title']="测试数据";
$msg['pages'] = 2;
echo header("content-type:text/html; charset=utf-8");
echo json_encode($msg);
5.列表搜索,定义好表单,重点是在表单按钮上,设置lay-filter="search",将通过ajax提交,获取数据,具体表单 数据请看源码
<button lay-submit class="layui-btn" lay-filter="search">查找</button>
6.复选框全选,设置lay-filter="check",并添加属性data-name="这里的值为需要操作的复选框 的name值"
全选框
<input type="checkbox" id="checkall" data-name="checkbox" lay-filter="check" lay-skin="primary">
列表中的复选框
<input type="checkbox" name="checkbox" value="{{ item.id}}" lay-skin="primary">
后台只需返回一个数组的json,前台就会自动渲染菜单,后台数组格式,
Array
(
[0] => Array
(
[id] => 1
[url] =>
[name] => 内容管理
[iconfont] => 
[sub] => Array
(
[0] => Array
(
[id] => 5
[url] =>
[name] => 内容管理
[iconfont] => 
[sub] => Array
(
[0] => Array
(
[id] => 6
[url] => article.html
[name] => 文章列表
[iconfont] => 
)
[1] => Array
(
[id] => 7
[url] => article-cat.html
[name] => 文章分类
[iconfont] => 
)
[2] => Array
(
[id] => 8
[url] => tag.html
[name] => 标签管理
[iconfont] => 
)
)
)
)
)
[1] => Array
(
[id] => 2
[url] =>
[name] => 产品管理
[iconfont] => 
[sub] => Array
(
[0] => Array
(
[id] => 9
[url] => product.html
[name] => 产品列表
[iconfont] => 
[sub] => Array
(
)
)
[1] => Array
(
[id] => 10
[url] => brand.html
[name] => 品牌管理
[iconfont] => 
[sub] => Array
(
)
)
[2] => Array
(
[id] => 11
[url] => product-cat.html
[name] => 分类管理
[iconfont] => 
[sub] => Array
(
)
)
)
)
[2] => Array
(
[id] => 3
[url] =>
[name] => 会员管理
[iconfont] => 
[sub] => Array
(
[0] => Array
(
[id] => 12
[url] =>
[name] => 会员管理
[iconfont] => 
[sub] => Array
(
[0] => Array
(
[id] => 13
[url] => member.html
[name] => 会员列表
[iconfont] => 
)
[1] => Array
(
[id] => 14
[url] => member-level.html
[name] => 会员等级
[iconfont] => 
)
[2] => Array
(
[id] => 15
[url] => member-statistics.html
[name] => 会员统计
[iconfont] => 
)
)
)
)
)
[3] => Array
(
[id] => 4
[url] =>
[name] => 网站设置
[iconfont] => 
[sub] => Array
(
[0] => Array
(
[id] => 16
[url] =>
[name] => 系统管理
[iconfont] => 
[sub] => Array
(
[0] => Array
(
[id] => 17
[url] => config.html
[name] => 系统设置
[iconfont] => 
)
[1] => Array
(
[id] => 18
[url] => sys-log.html
[name] => 系统日志
[iconfont] => 
)
[2] => Array
(
[id] => 19
[url] => menu.html
[name] => 栏目管理
[iconfont] => 
)
[3] => Array
(
[id] => 20
[url] => shielding.html
[name] => 屏蔽词
[iconfont] => 
)
)
)
[1] => Array
(
[id] => 21
[url] =>
[name] => 权限管理
[iconfont] => 
[sub] => Array
(
[0] => Array
(
[id] => 22
[url] => admin-role.html
[name] => 角色管理
[iconfont] => 
)
[1] => Array
(
[id] => 23
[url] => admin-permission.html
[name] => 权限设置
[iconfont] => 
)
[2] => Array
(
[id] => 24
[url] => admin.html
[name] => 管理员
[iconfont] => 
)
)
)
)
)
)
$msg['data']['list'] = $menu;
$msg['status']=200;
echo header("content-type:text/html; charset=utf-8");
echo json_encode($msg);
在index.html里面找到模板模块,替换到自己后台获取菜单的地址就OK了,如果顶部的菜单也想隐藏文字,可以在data-params加多一个属性,icon:true,就可以了
<script id="menu-tpl" type="text/html" data-params='{"url":"/php/menu.php","listid":"menu"}'>
{{# layui.each(d.list, function(index, item){ }}
<li class="layui-nav-item {{# if(index==0){ }}layui-this{{# } }}">
<a href="javascript:;"><i class="iconfont">{{item.iconfont}}</i> {{item.name}}</a>
</li>
{{# }); }}
</script>
记得哦,菜单数组里的字段名称不同时,要改模板中的字段名称
到此,差不多了哈,有不明白的地方可以加QQ群:114747233
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。