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.
356 lines
12 KiB
356 lines
12 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="页面描述">
|
|
<title>测试页面</title>
|
|
<link href="./component/pear/css/pear.css" rel="stylesheet">
|
|
<link href="./css/settings.css" rel="stylesheet">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="main">
|
|
<div class="main-box">
|
|
|
|
<div class="table-box">
|
|
<div class="card table-search">
|
|
<div><span class="title" id="page_title">宽城区学区查询信息管理系统</span></div>
|
|
<div class="layout-right" id="dropdown-text">
|
|
<a class="layui-icon layui-icon-username" href="javascript:;"></a>
|
|
<i class="layui-icon layui-icon-down" style="cursor: pointer;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card table-main">
|
|
<div class="layui-tabs layui-hide-v" id="stageTabs" lay-options="{index: 0}">
|
|
<ul class="layui-tabs-header" style="font-weight: bold;">
|
|
<li>小学学区</li>
|
|
<li>初中学区</li>
|
|
</ul>
|
|
<div class="layui-tabs-body">
|
|
<div class="layui-tabs-item">
|
|
<script type="text/html" id="xx_table_toolbar">
|
|
<div style="display: flex;align-items:center" >
|
|
<button class="layui-btn layui-btn-sm" lay-event="xx_add">
|
|
<i class="layui-icon layui-icon-add-1"></i>
|
|
新增学校
|
|
</button>
|
|
<button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="xx_import">
|
|
<i class="layui-icon layui-icon-export"></i>
|
|
批量导入
|
|
</button>
|
|
<div class="layui-input-wrap" style="margin-left: 10px;">
|
|
<input type="text" lay-affix="search" lay-filter="xx_search" lay-options="{split: true}" placeholder="请输入学校名称、派出所、街委" class="layui-input" style="width: 280px;">
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<table class="layui-hide" id="xx-table"></table>
|
|
|
|
<script type="text/html" id="xx_table_bar">
|
|
<span class="woo-tool-span woo-tool-text-span" data-tool-sort="120" lay-event="xx_edit"><a
|
|
class="woo-theme-color">编辑</a></span>
|
|
|
|
<i class="woo-tool-text-delimiter"></i>
|
|
<span class="woo-tool-span woo-tool-text-span" data-tool-sort="120" lay-event="xx_remove"><a
|
|
class="woo-theme-color-red">删除</a></span>
|
|
</script>
|
|
</div>
|
|
|
|
<div class="layui-tabs-item">
|
|
<script type="text/html" id="cz_table_toolbar">
|
|
<div style="display: flex;align-items:center" >
|
|
<button class="layui-btn layui-btn-sm" lay-event="cz_add">
|
|
<i class="layui-icon layui-icon-add-1"></i>
|
|
新增学校
|
|
</button>
|
|
<button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="cz_import">
|
|
<i class="layui-icon layui-icon-export"></i>
|
|
批量导入
|
|
</button>
|
|
<div class="layui-input-wrap" style="margin-left: 10px;">
|
|
<input type="text" lay-affix="search" lay-filter="cz_search" lay-options="{split: true}" placeholder="请输入学校名称、派出所、街委" class="layui-input" style="width: 280px;">
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<table class="layui-hide" id="cz-table"></table>
|
|
|
|
<script type="text/html" id="cz_table_bar">
|
|
<span class="woo-tool-span woo-tool-text-span" data-tool-sort="120" lay-event="cz_edit"><a
|
|
class="woo-theme-color">编辑</a></span>
|
|
|
|
<i class="woo-tool-text-delimiter"></i>
|
|
<span class="woo-tool-span woo-tool-text-span" data-tool-sort="120" lay-event="cz_remove"><a
|
|
class="woo-theme-color-red">删除</a></span>
|
|
</script>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="./component/layui/layui.js"></script>
|
|
<script src="./component/pear/pear.js"></script>
|
|
<script>
|
|
layui.use(function () {
|
|
|
|
var dropdown = layui.dropdown;
|
|
var table = layui.table;
|
|
var tabs = layui.tabs;
|
|
var form = layui.form;
|
|
|
|
dropdown.render({
|
|
elem: '#dropdown-text',
|
|
data: [{
|
|
title: '修改密码',
|
|
id: 100
|
|
}, {
|
|
title: '退出登录',
|
|
id: 101
|
|
}],
|
|
click: function (obj) {
|
|
console.log(obj);
|
|
}
|
|
});
|
|
|
|
table.render({
|
|
elem: '#xx-table',
|
|
cols: [[ //标题栏
|
|
{ title: '序号', align: 'center', width: "5%", type: 'numbers' },
|
|
{ field: 'username', title: '学校', width: "30%" },
|
|
{ field: 'sign', title: '派出所', width: "20%" },
|
|
{ field: 'sex', title: '汉字街委', width: "30%" },
|
|
{ title: '操作', toolbar: '#xx_table_bar', align: 'center', width: "15%" }
|
|
]],
|
|
height: 'full-190',
|
|
data: [{ // 赋值已知数据
|
|
"id": "10001",
|
|
"username": "长春市星恒学校中学部",
|
|
"sex": "丛家村（王振东屯、铁脖屯、丛家梁子屯、伏州屯、丁老相屯）",
|
|
"city": "浙江杭州",
|
|
"sign": "柳影路派出所",
|
|
"experience": "116"
|
|
}, {
|
|
"id": "10002",
|
|
"username": "张三2",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "12",
|
|
}, {
|
|
"id": "10003",
|
|
"username": "张三3",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "65"
|
|
}, {
|
|
"id": "10004",
|
|
"username": "张三4",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "777"
|
|
}, {
|
|
"id": "10005",
|
|
"username": "张三5",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "86"
|
|
}, {
|
|
"id": "10006",
|
|
"username": "张三6",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "12"
|
|
}, {
|
|
"id": "10007",
|
|
"username": "张三7",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "16"
|
|
}, {
|
|
"id": "10008",
|
|
"username": "张三8",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "106"
|
|
}],
|
|
page: {
|
|
limit: 15
|
|
, layout: ['count', 'prev', 'page', 'next', 'skip']
|
|
, prev: "上一页"
|
|
, next: "下一页"
|
|
},
|
|
skin: 'line', // 表格风格
|
|
toolbar: '#xx_table_toolbar',
|
|
defaultToolbar: []
|
|
});
|
|
|
|
table.render({
|
|
elem: '#cz-table',
|
|
cols: [[ //标题栏
|
|
{ title: '序号', align: 'center', width: "5%", type: 'numbers' },
|
|
{ field: 'username', title: '学校', width: "30%" },
|
|
{ field: 'sign', title: '派出所', width: "20%" },
|
|
{ field: 'sex', title: '汉字街委', width: "30%" },
|
|
{ title: '操作', toolbar: '#cz_table_bar', align: 'center', width: "15%" }
|
|
]],
|
|
height: 'full-190',
|
|
data: [{ // 赋值已知数据
|
|
"id": "10001",
|
|
"username": "张三1",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "116"
|
|
}, {
|
|
"id": "10002",
|
|
"username": "张三2",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "12",
|
|
}, {
|
|
"id": "10003",
|
|
"username": "张三3",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "65"
|
|
}, {
|
|
"id": "10004",
|
|
"username": "张三4",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "777"
|
|
}, {
|
|
"id": "10005",
|
|
"username": "张三5",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "86"
|
|
}, {
|
|
"id": "10006",
|
|
"username": "张三6",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "12"
|
|
}, {
|
|
"id": "10007",
|
|
"username": "张三7",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "16"
|
|
}, {
|
|
"id": "10008",
|
|
"username": "张三8",
|
|
"sex": "男",
|
|
"city": "浙江杭州",
|
|
"sign": "人生恰似一场修行",
|
|
"experience": "106"
|
|
}],
|
|
page: {
|
|
limit: 15
|
|
, layout: ['count', 'prev', 'page', 'next', 'skip']
|
|
, prev: "上一页"
|
|
, next: "下一页"
|
|
},
|
|
skin: 'line', // 表格风格
|
|
toolbar: '#cz_table_toolbar',
|
|
defaultToolbar: []
|
|
});
|
|
|
|
table.on('tool(xx-table)', function (obj) {
|
|
if (obj.event === 'xx_edit') {
|
|
console.log(obj)
|
|
} else if (obj.event === 'xx_remove') {
|
|
|
|
layer.confirm('一个询问框的示例？', { icon: 0 }, function () {
|
|
layer.msg('第一个回调', { icon: 1 });
|
|
});
|
|
}
|
|
});
|
|
|
|
table.on('tool(cz-table)', function (obj) {
|
|
if (obj.event === 'cz_edit') {
|
|
console.log(obj)
|
|
} else if (obj.event === 'cz_remove') {
|
|
console.log(obj)
|
|
}
|
|
});
|
|
|
|
table.on('toolbar(xx-table)', function (obj) {
|
|
if (obj.event === 'xx_add') {
|
|
addSchool('xx');
|
|
} else if (obj.event === 'xx_import') {
|
|
batchImport('xx')
|
|
}
|
|
});
|
|
|
|
table.on('toolbar(cz-table)', function (obj) {
|
|
if (obj.event === 'cz_add') {
|
|
addSchool('cz');
|
|
} else if (obj.event === 'cz_import') {
|
|
batchImport('cz')
|
|
}
|
|
});
|
|
|
|
function addSchool(stage) {
|
|
layer.open({
|
|
type: 2,
|
|
title: '新增学校',
|
|
shade: 0.1,
|
|
area: ['650px', '280px'],
|
|
content: './add.html?stage=' + stage
|
|
});
|
|
}
|
|
|
|
function batchImport(stage) {
|
|
layer.open({
|
|
type: 2,
|
|
title: '批量导入',
|
|
shade: 0.1,
|
|
area: ['550px', '240px'],
|
|
content: './import.html?stage=' + stage
|
|
});
|
|
}
|
|
|
|
|
|
form.on('input-affix(xx_search)', function (data) {
|
|
console.log(data); // 当前触发点缀事件的图标元素
|
|
});
|
|
|
|
form.on('input-affix(cz_search)', function (data) {
|
|
console.log(data); // 当前触发点缀事件的图标元素
|
|
});
|
|
|
|
|
|
tabs.on('afterChange(stageTabs)', function (data) {
|
|
if (data.index === 0) {
|
|
table.resize('xx-table');
|
|
} else if (data.index === 1) {
|
|
table.resize('cz-table');
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |