forked from zhongshaofa/layuimini
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtable.html
148 lines (135 loc) · 5.81 KB
/
table.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../lib/layui-v2.5.4/css/layui.css" media="all">
<link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<fieldset class="layui-elem-field layuimini-search">
<legend>搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户姓名</label>
<div class="layui-input-inline">
<input type="text" name="username" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户性别</label>
<div class="layui-input-inline">
<input type="text" name="sex" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户城市</label>
<div class="layui-input-inline">
<input type="text" name="city" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户职业</label>
<div class="layui-input-inline">
<input type="text" name="classify" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
</div>
</div>
</form>
</div>
</fieldset>
<div class="layui-btn-group">
<button class="layui-btn data-add-btn">添加</button>
<button class="layui-btn layui-btn-danger data-delete-btn">删除</button>
</div>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
</div>
</div>
<script src="../lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'table'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table;
table.render({
elem: '#currentTableId',
url: '../api/table.json',
cols: [[
{type: "checkbox", width: 50, fixed: "left"},
{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: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true
});
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
var result = JSON.stringify(data.field);
layer.alert(result, {
title: '最终的搜索信息'
});
//执行搜索重载
table.reload('currentTableId', {
page: {
curr: 1
}
, where: {
searchParams: result
}
}, 'data');
return false;
});
// 监听添加操作
$(".data-add-btn").on("click", function () {
layer.msg('添加数据');
});
// 监听删除操作
$(".data-delete-btn").on("click", function () {
var checkStatus = table.checkStatus('currentTableId')
, data = checkStatus.data;
layer.alert(JSON.stringify(data));
});
//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
console.log(obj)
});
table.on('tool(currentTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
layer.alert('编辑行：<br>' + JSON.stringify(data))
} else if (obj.event === 'delete') {
layer.confirm('真的删除行么', function (index) {
obj.del();
layer.close(index);
});
}
});
});
</script>
<script>
</script>
</body>
</html>