layui知识梳理

layui数据表格增删改查demo

1.列表页
界面

代码

<div class="demoTable">
搜索昵称：
<div class="layui-input-inline">
<input type="text" id="search_key" class="layui-input" >
</div>
<button type="button" class="layui-btn layui-btn-sm" data-type="reload" id="searchbtn">搜索</button>
<button class="layui-btn layui-btn-normal" οnclick="add()"><i class="layui-icon">&#xe608;</i> 添加文章</button>
</div>
<div class="layui-btn-group demoTable">
<button class="layui-btn" data-type="getCheckData">删除选中</button>
</div>

<!--头工具栏按钮 id和table头的toolbar属性绑定-->
<script type="text/html" id="zq_toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delAll"><i class="layui-icon">&#xE640;</i>批量删除</button>
<button class="layui-btn layui-btn-sm" οnclick="add()"><i class="layui-icon">&#xE608;</i>添加</button>
</div>
</script>

<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<div class="layui-tab" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li lay-id="111">全部</li>
<li lay-id="222">待审核</li>
<li lay-id="333">已审核</li>
<li lay-id="444">回收站</li>
</ul>
</div>
<table id="demo" lay-filter="test"></table>
<script src="__CMS__/js/admins.js"></script>
<script src="__CMS__/js/moZhang.js"></script>

<script type="text/html" id="favoriteTpl">
<a href="{:url('admin/favorite/getFavoriteList')}?user_id={{d.id}}" class="layui-table-link" >{{ d.total_favorite }}</a>
</script>
<script type="text/html" id="avatarTpl">
<img src="{{ d.avatar}}" width="40px" height="40px">
</script>
<script type="text/html" id="sexTpl">
{{# if(d.gender == 1){ }}
男
{{# } else if(d.gender == 2) { }}
女
{{# } else { }}
未知
{{# } }}
</script>
<script>
layui.use(['table','element'], function(){
var table = layui.table
,element = layui.element;
//第一个实例
var tableIns = table.render({
elem: '#demo'
,url: '/admin/article/getArticleList' //数据接口
,method : 'post'
,toolbar: '#zq_toolbar' //开启头工具栏，此处default：显示默认图标，可以自定义模板，详见文档
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,page: true //开启分页
,parseData: function(res){ //res 即为原始返回的数据
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.data.total, //解析数据长度
"data": res.data.data //解析数据列表
};
}
,cols: [[ //表头
{type:'checkbox', fixed: 'left'}
,{field: 'id', title: 'ID', sort: true, fixed: 'left'}
,{field: 'title', title: '标题'}
,{field: 'user_id', title: '作者'}
,{field: 'catalog_id', title: '目录'}
,{field: 'wechat_id', title: '公众号'}
,{field: 'list_order', title: '排序',align:'center'}
,{field: 'picture', title: '封面',templet:'#avatarTpl'}
,{field: 'view', title: '浏览量'}
,{field: 'is_hot', title: '推荐'}
,{field: 'status', title: '状态'}
,{field: 'abstract', title: '摘要'}
,{field: 'source_url', title: '来源IP'}
,{field: 'create_time', title: '时间'}
,{fixed: 'right',title:'操作', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
]]
});
var $ = layui.$, active = {
reload: function(){
table.reload('demo', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
keyword:$('#search_key').val(),
}
});
},
getCheckData: function(){ //获取选中数据
var checkStatus = table.checkStatus('demo')
,data = checkStatus.data;
var ids = [];
for (var i = 0; i < checkStatus.data.length; i++) {
ids[i] = checkStatus.data[i].id;
}
delAdmin(ids);
tableIns.reload({
page: {
curr: 1 //重新从第 1 页开始
}
});
// layer.alert(JSON.stringify(data));
//layer.alert(JSON.stringify(ids));
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
$('#searchbtn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//监听表格复选框选择
table.on('checkbox(demo)', function(obj){
console.log(obj)
});
//监听工具条
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
var ids = [];
ids[0] = data.id;
//向服务端发送删除指令
delAdmin(ids)
});
} else if(obj.event === 'edit'){
//layer.alert('编辑行：<br>'+ JSON.stringify(data))
editAdmin(data.id);
}
});
//监听Tab切换，重载数据
element.on('tab(docDemoTabBrief)', function(){
var html = "<a class='layui-btn layui-btn-primary layui-btn-xs' lay-event='detail'>删除1</a>" +
" <a class='layui-btn layui-btn-danger layui-btn-xs' lay-event='del'>删除2</a>";
$("#barDemo").html(html);
//tab id
var status = this.getAttribute('lay-id');
tableIns.reload({
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
status:status,
}
});
var status = this.getAttribute('lay-id');
});
});
 增删改

<script>
//添加
function add() {
var toUrl = "{:url('admin/article/add')}";
ToOpenPopups(toUrl, '✚ 添加管理员', '60%', '80%');
}

//根据ID修改信息
function edit(id) {
var toUrl = "{:url('admin/admin/edit',['id'=>'AdminID'])}";
toUrl = toUrl.replace('AdminID', id);
ToOpenPopups(toUrl, '✎ 管理员修改', '48%', '65%');
}
//批量删除
function delAdmin(ids) {
var toUrl = "{:url('admin/admin/deleteMember')}";
toUrl = toUrl.replace('AdminID', ids);
var postData = {'ids':ids};
$.post(
toUrl,
postData,
function (result) {
if(result.code == 0){
layer.msg(result.msg);
}else{
//失败
layer.msg(result.msg);
}
},"JSON");

}

/**
* 导航菜单处理函数 包括 "添加"、"修改"
* @param op_url URL 地址
* @param tag 操作标识：add / edit
* @param title
* @constructor
*/
function ToOpenPopups(op_url,title,width,height) {
var widthTag = width?width:'70%';
var heightTag = height?height:'65%';
var openPopus = layer.open({
type: 2,
shade:0.61,
shadeClose:true,
anim:4,
moveOut: true,
title: title,
maxmin: true, //开启最大化最小化按钮
area: [widthTag, heightTag],
content: op_url, //可以出现滚动条
//content: [op_url, 'no'], //如果你不想让iframe出现滚动条
});
layer.style(openPopus, {
background: '#EEEEEE',
});
}
/**
* 对导航菜单的 ajax请求处理
* @param toUrl
* @param postData
* @constructor
*/
function ToPostPopupsDeal(toUrl,postData) {
$.post(
toUrl,
postData,
function (result) {
dialog.tip(result.message);
if(result.status == 1){
setTimeout(function(){
var index = parent.layer.getFrameIndex(window.name); //先得到当前 iframe层的索引
parent.layer.close(index); //再执行关闭
},2000);
}else{
//失败
//layer.msg(result.message);
}
},"JSON");
}
2添加 修改

 

代码

{extend name='layouts/cms'}
{block name='body-content'}
<form class="layui-form form-opAdmins layui-form-pane">
<div class="layui-form-item">
<label class="layui-form-label">标题：</label>
<div class="layui-input-inline">
<input type="text" name="name" required lay-verify="required"
placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请十个字以内</div>
</div>



<div class="layui-form-item">
<label class="layui-form-label">上级分类：</label>
<div class="layui-input-block">
<select name="parent_id" lay-verify="required">
<option value="0">顶级分类</option>
{volist name="catalog" id="vo"}
<option value="{$vo['id']}">{if condition="$vo['level'] neq 0"} |{/if}<?php echo str_repeat('-',$vo['level'] * 4) ?>{$vo['name']}</option>
{/volist}
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序：</label>
<div class="layui-input-inline">
<input type="number" name="list_order" value="0" required lay-verify="required"
placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">(数字越大，排序越靠前)</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">显示</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="显示" checked>
<input type="radio" name="status" value="0" title="不显示">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">SEO标题：</label>
<div class="layui-input-inline">
<input type="text" name="seo_title" required lay-verify="required"
placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请十个字以内</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">SEO关键字：</label>
<div class="layui-input-inline">
<input type="text" name="seo_keywords" required lay-verify="required"
placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">SEO描述：</label>
<div class="layui-input-inline">
<input type="text" name="seo_description" required lay-verify="required"
placeholder="" autocomplete="off" class="layui-input">
</div>

</div>

<div class="layui-form-item">
<label class="layui-form-label">个性头像：</label>
<div class="layui-upload layui-input-inline">
<button type="button" name="img_upload" class="layui-btn btn_upload_img">
<i class="layui-icon">&#xe67c;</i>上传图片
</button>
<img class="layui-upload-img img-upload-view layui-circle"
src="__CMS__/images/headshot/baZhaHei.png">
</div>
</div>
<input type="hidden" name="image" class="menu-icon"
value="__CMS__/images/headshot/baZhaHei.png">

{:token()}
<div class="layui-form-item">
<div class="layui-input-block div-form-op">
<button class="layui-btn" type="button" οnclick="add()"
lay-submit lay-filter="formDemo">添加
</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>

{/block}

{block name='single-content'}
<script src="__CMS__/js/moZhang.js"></script>
<script>

function add() {
var postData = $(".form-opAdmins").serialize();
var toUrl = "{:url('admin/catalog/add')}";
ToPostPopupsDeal(toUrl, postData);
}

layui.use('upload', function () {
var upload = layui.upload;
var tag_token = $(".tag_token").val();
//普通图片上传
var uploadInst = upload.render({
elem: '.btn_upload_img'
, type: 'images'
, exts: 'jpg|png|gif' //设置一些后缀，用于演示前端验证和后端的验证
//,auto:false //选择图片后是否直接上传
//,accept:'images' //上传文件类型
, url: "{:url('api/upload/img_file')}"
, data: {'_token': tag_token}
, before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('.img-upload-view').attr('src', result); //图片链接（base64）
});
}
, done: function (res) {
dialog.tip(res.message);
//如果上传成功
if (res.status == 1) {
$('.menu-icon').val(res.data.url);
}
}
, error: function () {
//演示失败状态，并实现重传
return layer.msg('上传失败,请重新上传');
}
});
});

</script>
{/block}




{extend name='layouts/cms'}
{block name='body-content'}
{extend name='layouts/cms'}
{block name='body-content'}
<form class="layui-form form-opAdmins layui-form-pane">
<div class="layui-form-item">
<label class="layui-form-label">标题：</label>
<div class="layui-input-inline">
<input type="text" name="name" required lay-verify="required" value="{$info['name']}"
placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请十个字以内</div>
</div>



<div class="layui-form-item">
<label class="layui-form-label">上级分类：</label>
<div class="layui-input-block">
<select name="parent_id" lay-verify="required">
<option value="0">顶级分类</option>
{volist name="catalog" id="vo"}
<option value="{$vo['id']}" {if $vo['id'] == $info['parent_id']}selected{/if}>{if condition="$vo['level'] neq 0"} |{/if}<?php echo str_repeat('-',$vo['level'] * 4) ?>{$vo['name']}</option>
{/volist}
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序：</label>
<div class="layui-input-inline">
<input type="number" name="list_order" value="{$info['list_order']}" required lay-verify="required"
placeholder="" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">(数字越大，排序越靠前)</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">显示</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="显示" {if ($info['status'] == 1)}
checked
{/if}>
<input type="radio" name="status" value="0" title="不显示"{if ($info['status'] == 0)}
checked
{/if}>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">SEO标题：</label>
<div class="layui-input-inline">
<input type="text" name="seo_title" required lay-verify="required" value="{$info['seo_title']}"
placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请十个字以内</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">SEO关键字：</label>
<div class="layui-input-inline">
<input type="text" name="seo_keywords" value="{$info['seo_keywords']}"
placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">SEO描述：</label>
<div class="layui-input-inline">
<input type="text" name="seo_description" value="{$info['seo_description']}"
placeholder="" autocomplete="off" class="layui-input">
</div>

</div>

<div class="layui-form-item">
<label class="layui-form-label">个性头像：</label>
<div class="layui-upload layui-input-inline">
<button type="button" name="img_upload" class="layui-btn btn_upload_img">
<i class="layui-icon">&#xe67c;</i>上传图片
</button>
<img class="layui-upload-img img-upload-view layui-circle"
src="{$info['image']}">
</div>
</div>
<input type="hidden" name="image" class="menu-icon"
value="{$info['image']}">

{:token()}
<div class="layui-form-item">
<div class="layui-input-block div-form-op">
<button class="layui-btn" type="button" οnclick="edit({$info['id']})"
lay-submit lay-filter="formDemo">添加
</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>


{/block}

{block name='single-content'}
<script src="__CMS__/js/moZhang.js"></script>
<script>

function edit(id) {
var postData = $(".form-opAdmins").serialize();
var toUrl = "{:url('admin/catalog/edit',['id'=>'AdminID'])}";
toUrl = toUrl.replace('AdminID', id);
ToPostPopupsDeal(toUrl, postData);
}

</script>
{/block}