85 lines
3.0 KiB
HTML
85 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
|
|
<link rel="stylesheet" href="../css/public.css" media="all">
|
|
<script src="../lib/layui/layui.js" charset="utf-8"></script>
|
|
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
|
|
</head>
|
|
<body>
|
|
<div class="layuimini-container">
|
|
<div class="layuimini-main">
|
|
<fieldset class="table-search-fieldset" id="searchField">
|
|
<div>
|
|
<form class="layui-form layui-form-pane">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">卡片标题</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="realName" id="realName" placeholder="" class="layui-input">
|
|
</div>
|
|
<label class="layui-form-label">卡片名称</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="username" id="username" placeholder="" class="layui-input">
|
|
</div>
|
|
<div class="layui-inline">
|
|
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
|
|
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-btn"><i class="layui-icon"></i> 获取数据</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</fieldset>
|
|
<div id="currentTableId" lay-filter="currentTableFilter"></div>
|
|
<script type="text/html" id="currentTableBar">
|
|
<a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="details"><i class="layui-icon"></i></a>
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
layui.use(['layer', 'form', 'jquery', 'cardTable'], function () {
|
|
let form = layui.form;
|
|
let $ = layui.jquery;
|
|
let layer = layui.layer;
|
|
let cardTable = layui.cardTable;
|
|
|
|
var currentTable = cardTable.render({
|
|
elem: '#currentTableId',
|
|
url: '../json/card.json',
|
|
toolbar:'currentTableBar',
|
|
})
|
|
// 监听搜索操作
|
|
form.on('submit(data-search-btn)', function (data) {
|
|
queryJson = data.field;
|
|
cardTable.reload("currentTableId", {
|
|
where: queryJson,
|
|
});
|
|
return false;
|
|
});
|
|
//卡片单击事件
|
|
currentTable.on('row(currentTableFilter)', function (obj) {
|
|
layer.msg("单击事件");
|
|
return false;
|
|
});
|
|
//卡片双击事件
|
|
currentTable.on('rowDouble(currentTableFilter)', function (obj) {
|
|
layer.msg("双击事件");
|
|
return false;
|
|
});
|
|
//toolrow监听事件
|
|
currentTable.on('tool(currentTableFilter)', function (obj) {
|
|
if (obj.event === 'details') {
|
|
layer.msg("按钮事件");
|
|
}
|
|
return false;
|
|
});
|
|
form.on('submit(data-btn)', function () {
|
|
var data = cardTable.getAllData("currentTableId");
|
|
layer.msg(JSON.stringify(data));
|
|
return false;
|
|
});
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |