1 Star 2 Fork 2

我是超人/wubin-layerAdmin

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
nav.html 5.97 KB
一键复制 编辑 原始数据 按行查看 历史
我是超人 提交于 2018-03-01 21:06 . 增加导航批量删除
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="plugin/layui/css/layui.css">
<link rel="stylesheet" href="static/css/global.css">
<link rel="stylesheet" href="plugin/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/main.css">
</head>
<body>
<div class="childrenBody">
<blockquote class="layui-elem-quote">
<a href="javascript:;" class="layui-btn layui-btn-sm" id="add">
<i class="layui-icon"></i> 添加信息
</a>
<a class="layui-btn layui-btn-sm layui-btn-danger" id="delAll">
<i class="layui-icon"></i>批量删除
</a>
</blockquote>
<fieldset class="layui-elem-field">
<legend>数据列表</legend>
<div class="layui-field-box layui-form" id="content">
<table class="layui-hide" lay-filter="navDemo" id="test"></table>
</div>
</fieldset>
</div>
<script src="plugin/layui/layui.js"></script>
<script>
layui.use(['table'], function(){
var table = layui.table
,form = layui.form
,$ = layui.jquery;
//渲染表格
table.render({
elem: '#test'
,url:'./api/navTable.json'
,cellMinWidth: 30 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,cols: [[
{type:'checkbox'}
,{field:'id', title: 'ID', sort: true}
,{field:'nav_name', title: '导航名称'}
,{fixed: 'right',title:'操作', width: 220, align: 'center', toolbar: '#toolBar'}
]]
,page: true//开启分页
});
//添加导航事件
$('#add').on('click', function() {
$.get('addNav.html', null, function(navform) {
layer.open({
type: 1,
title: '添加导航',
area: ['600px', '350px'],
fixed: false, //不固定
maxmin: true,
shade: [0.3, '#000'],//遮罩
btn: ['保存', '取消'],
content: navform,
anim:0,//弹出动画
yes(index, layero){
//do something
$('form.layui-form').find('button[lay-filter=addNav]').click();
// layer.close(index); //如果设定了yes回调,需进行手工关闭
},
success(){
//弹出窗口成功后渲染表单
form.render();
},
cancel:function(index, layero) {
layer.confirm('未保存的数据可能会丢失,确定要关闭吗?', {icon: 3, title: '系统提示'}, function (item) {
layer.close(item);//关闭confirm
layer.close(index);//关闭弹出层
});
return false;
}
});
})
});
//监听工具条
table.on('tool(navDemo)', 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);
});
} else if(obj.event === 'edit'){
//layer.alert('编辑行:<br>'+ JSON.stringify(data))
$.post('editNav.html', data, function(navform) {
//弹出窗口成功后渲染表单
var index = layer.open({
type: 1,
content: navform,
area: ['100%', '100%'],
success(){
//弹出窗口成功后渲染表单
form.render();
//右上角tips
layer.tips('点击这里返回', '.layui-layer-close1', {
tips: 3
});
},
});
});
}
});
//全部删除事件
//获取所有选择的列
$('#delAll').on('click', function() {
var names = '';
$('#content .layui-form .layui-table-box .layui-table-main table tbody tr').each(function() {
var _this = $(this);
var $cbx = _this.children('td').eq(0).find('.layui-form-checkbox').hasClass('layui-form-checked');
if($cbx) {
var id = _this.children('td').eq(1).find('div').text();
names += id + ',';
}
});
layer.msg('你选择的ID有' + names);
});
});
</script>
<script type="text/html" id="toolBar">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"><i class="layui-icon">&#xe857;</i>查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe639;</i>编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon"></i>删除</a>
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/shuaibin/wubin-layerAdmin.git
git@gitee.com:shuaibin/wubin-layerAdmin.git
shuaibin
wubin-layerAdmin
wubin-layerAdmin
master

搜索帮助