You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
5.2 KiB
125 lines
5.2 KiB
6 years ago
|
<!DOCTYPE html>
|
||
|
|
<html class="x-admin-sm">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>欢迎页面-X-admin2.1</title>
|
||
|
|
<meta name="renderer" content="webkit">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
|
|
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
|
||
|
|
<link rel="stylesheet" href="../assets/css/font.css">
|
||
|
|
<link rel="stylesheet" href="../assets/css/xadmin.css">
|
||
|
|
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
||
|
|
<script type="text/javascript" src="../assets/lib/layui/layui.js" charset="utf-8"></script>
|
||
|
|
<script type="text/javascript" src="../assets/js/xadmin.js"></script>
|
||
|
|
<script type="text/javascript" src="../assets/js/cookie.js"></script>
|
||
|
|
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
||
|
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="">
|
||
|
|
<div class="x-nav">
|
||
|
|
<span class="layui-breadcrumb">
|
||
|
|
<a href="">首页</a>
|
||
|
|
<a href="">演示</a>
|
||
|
|
<a>
|
||
|
|
<cite>导航元素</cite></a>
|
||
|
|
</span>
|
||
|
|
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
|
||
|
|
<i class="layui-icon" style="line-height:30px">ဂ</i></a>
|
||
|
|
</div>
|
||
|
|
<div class="x-body">
|
||
|
|
<div class="layui-row">
|
||
|
|
<form class="layui-form layui-col-md12 x-so">
|
||
|
|
<input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
|
||
|
|
<input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
|
||
|
|
<input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
|
||
|
|
<button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<table class="layui-table" lay-data="{url:'./user.json',page:true,toolbar: '#toolbarDemo',id:'test'}" lay-filter="test">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th lay-data="{type:'checkbox'}">ID</th>
|
||
|
|
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
|
||
|
|
<th lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th>
|
||
|
|
<th lay-data="{field:'email', edit: 'text', minWidth: 150}">邮箱</th>
|
||
|
|
<th lay-data="{field:'sex', width:80,templet: '#switchTpl'}">性别</th>
|
||
|
|
<th lay-data="{field:'city', edit: 'text', minWidth: 100}">城市</th>
|
||
|
|
<th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script type="text/html" id="toolbarDemo">
|
||
|
|
<div class="layui-btn-container">
|
||
|
|
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
||
|
|
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
|
||
|
|
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
<script type="text/html" id="switchTpl">
|
||
|
|
<!-- 这里的 checked 的状态只是演示 -->
|
||
|
|
<input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
layui.use('laydate', function(){
|
||
|
|
var laydate = layui.laydate;
|
||
|
|
|
||
|
|
//执行一个laydate实例
|
||
|
|
laydate.render({
|
||
|
|
elem: '#start' //指定元素
|
||
|
|
});
|
||
|
|
|
||
|
|
//执行一个laydate实例
|
||
|
|
laydate.render({
|
||
|
|
elem: '#end' //指定元素
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
layui.use('table', function(){
|
||
|
|
var table = layui.table;
|
||
|
|
|
||
|
|
//监听单元格编辑
|
||
|
|
table.on('edit(test)', function(obj){
|
||
|
|
var value = obj.value //得到修改后的值
|
||
|
|
,data = obj.data //得到所在行所有键值
|
||
|
|
,field = obj.field; //得到字段
|
||
|
|
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
|
||
|
|
});
|
||
|
|
|
||
|
|
//头工具栏事件
|
||
|
|
table.on('toolbar(test)', function(obj){
|
||
|
|
var checkStatus = table.checkStatus(obj.config.id);
|
||
|
|
switch(obj.event){
|
||
|
|
case 'getCheckData':
|
||
|
|
var data = checkStatus.data;
|
||
|
|
layer.alert(JSON.stringify(data));
|
||
|
|
break;
|
||
|
|
case 'getCheckLength':
|
||
|
|
var data = checkStatus.data;
|
||
|
|
layer.msg('选中了：'+ data.length + ' 个');
|
||
|
|
break;
|
||
|
|
case 'isAll':
|
||
|
|
layer.msg(checkStatus.isAll ? '全选': '未全选');
|
||
|
|
break;
|
||
|
|
};
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script>var _hmt = _hmt || []; (function() {
|
||
|
|
var hm = document.createElement("script");
|
||
|
|
hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
|
||
|
|
var s = document.getElementsByTagName("script")[0];
|
||
|
|
s.parentNode.insertBefore(hm, s);
|
||
|
|
})();</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|