列表页增加搜索功能 --renpc
This commit is contained in:
Renpc-kilig
parent
62a35b4e60
commit
200f3c3e1a
@ -9,11 +9,63 @@
|
||||
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
||||
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||||
<style>
|
||||
.layui-form-pane .layui-inline {margin-top: 10px;}
|
||||
.layui-form-pane .layui-form-label {width: 100%; padding: 0; height: 20px; line-height: 20px; border: unset; background-color: unset; box-sizing: unset; text-align: left;}
|
||||
.layui-form-pane .layui-input-block {margin-left: 0; width: 100%;}
|
||||
.layui-form-pane .layui-form-select .layui-edge {margin-top: 8px;}
|
||||
.layui-form-pane .layui-form-selected .layui-edge {margin-top: 2px;}
|
||||
.layui-form-pane .layui-form-select dl {top: 60px;}
|
||||
#treeHeader {padding: 0 10px 10px 10px; height: auto;}
|
||||
#treeBody {overflow: auto;}
|
||||
#treeBody ul li{border-bottom: 1px solid #f6f6f6; cursor: pointer; width: 100%; height: 28px; line-height: 28px; padding: 0 5px;}
|
||||
#treeBody ul li:last-child{border-bottom: none;}
|
||||
#treeBody ul li.active{font-weight: bold;}
|
||||
#treeFooter {padding: 15px; border-top: 1px solid rgb(246, 246, 246);}
|
||||
#contentBody {width: 100%; height: 300px; position: relative; overflow: hidden; padding: 0px; border: 1px solid #e6e6e6; font-size: 0;}
|
||||
#contentBody:after {content: ' '; display: block; position: absolute; top: 0; left: 0; background-color: #f2f2f2; width: 100px; height: 50px; z-index: 10; border: 1px solid #e6e6e6; box-sizing: border-box;}
|
||||
#contentBody .left {width: 100px; position: absolute; top: 50px; left: 0px; user-select:none; background-color: #f2f2f2;}
|
||||
#contentBody .left .floor {height: 100px; border: 1px solid #e6e6e6; box-sizing: border-box; font-size: 14px; font-weight: bold; text-align: center; line-height: 100px;}
|
||||
#contentBody .top {height: 50px; position: absolute; top: 0px; left: 100px; white-space: nowrap;}
|
||||
#contentBody .top .unit {width: 200px; height: 100%; border: 1px solid #e6e6e6; display: inline-block; box-sizing: border-box; font-size: 14px; font-weight: bold; text-align: center; line-height: 50px; user-select:none; background-color: #f2f2f2;}
|
||||
#contentBody .center {margin-top: 50px; margin-left: 100px; overflow: scroll;}
|
||||
#contentBody .center .main {}
|
||||
#contentBody .center .main .floor {height: 100px; box-sizing: border-box; white-space: nowrap;}
|
||||
#contentBody .center .main .floor .unit {display: inline-block; box-sizing: border-box;}
|
||||
#contentBody .center .main .floor .unit .house {width: 200px; height: 100px; border: 1px solid #e6e6e6; box-sizing: border-box; display: inline-block; font-size: 14px; cursor: pointer; text-align: center; line-height: 100px; user-select:none; transition: background-color .3s, font-weight .3s;}
|
||||
#contentBody .center .main .floor .unit .house:hover {font-weight: bold; background-color: #f2f2f2;}
|
||||
#contentBody .center .main .floor .unit .house .info {display: flex; justify-content: center; align-items: center;}
|
||||
#contentBody .center .main .floor .unit .house .info .option {display: none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid layui-anim layui-anim-fadein">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs2">
|
||||
<div class="layui-card">
|
||||
<div id="treeHeader" class="layui-card-header">
|
||||
<form class="layui-form layui-form-pane" lay-filter="dataForm">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">街道</label>
|
||||
<input type="hidden" id="streetName" name="streetName"/>
|
||||
<div id="streetIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
<div id="communityBox" class="layui-inline" style="display: none;">
|
||||
<label class="layui-form-label">社区</label>
|
||||
<input type="hidden" id="communityName" name="communityName"/>
|
||||
<div id="communityIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
<div id="housingEstateBox" class="layui-inline" style="display: none;">
|
||||
<label class="layui-form-label">小区</label>
|
||||
<input type="hidden" id="housingEstateName" name="housingEstateName"/>
|
||||
<div id="housingEstateIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="treeBody" class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs10">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
|
||||
@ -61,7 +113,7 @@
|
||||
base: 'assets/layuiadmin/'
|
||||
}).extend({
|
||||
index: 'lib/index'
|
||||
}).use(['index', 'table', 'laydate', 'common'], function() {
|
||||
}).use(['index', 'table', 'laydate', 'common', 'select'], function() {
|
||||
var $ = layui.$;
|
||||
var $win = $(window);
|
||||
var table = layui.table;
|
||||
@ -69,8 +121,443 @@
|
||||
var laydate = layui.laydate;
|
||||
var common = layui.common;
|
||||
var resizeTimeout = null;
|
||||
var select = layui.select;
|
||||
var tableUrl = 'api/building/listpage?myself={myself}';
|
||||
|
||||
var selectedRelation = {
|
||||
street: '',
|
||||
community: '',
|
||||
housingEstate: '',
|
||||
buildingId: '',
|
||||
buildingFloorsNum: '',
|
||||
buildingUnitNum: '',
|
||||
}
|
||||
|
||||
var initStreetSelect = function() {
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/getStreetList',
|
||||
name: 'streetId',
|
||||
valueKey: 'id',
|
||||
nameKey: 'name',
|
||||
formFilter: 'dataForm',
|
||||
where: {},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.street = data.value;
|
||||
if(data.value) {
|
||||
$('#streetName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#streetName').val('');
|
||||
}
|
||||
initCommunitySelect();
|
||||
var url = 'api/building/listpage?myself={myself}&street={street}';
|
||||
newInitTableStreet(url);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var initCommunitySelect = function() {
|
||||
selectedRelation.community = '';
|
||||
var $communityBox = $('#communityBox');
|
||||
if(!selectedRelation.street) {
|
||||
$communityBox.hide();
|
||||
return;
|
||||
}
|
||||
$communityBox.show();
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/getCommunityList',
|
||||
name: 'communityId',
|
||||
valueKey: 'communityId',
|
||||
nameKey: 'communityName',
|
||||
formFilter: 'dataForm',
|
||||
where: {areaId: selectedRelation.street},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.community = data.value;
|
||||
if(data.value) {
|
||||
$('#communityName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#communityName').val('');
|
||||
}
|
||||
var url = 'api/building/listpage?myself={myself}&street={street}&community={community}';
|
||||
newInitTableCommunity(url);
|
||||
|
||||
initHousingEstateSelect();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var initHousingEstateSelect = function() {
|
||||
selectedRelation.housingEstate = '';
|
||||
var $housingEstateBox = $('#housingEstateBox');
|
||||
if(!selectedRelation.community) {
|
||||
$housingEstateBox.hide();
|
||||
return;
|
||||
}
|
||||
$housingEstateBox.show();
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/list',
|
||||
name: 'housingEstateId',
|
||||
valueKey: 'residentialId',
|
||||
nameKey: 'name',
|
||||
formFilter: 'dataForm',
|
||||
where: {street: selectedRelation.street, community: selectedRelation.community},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.housingEstate = data.value;
|
||||
if(data.value) {
|
||||
$('#housingEstateName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#housingEstateName').val('');
|
||||
}
|
||||
var url = 'api/building/listpage?myself={myself}&street={street}&community={community}&residentialId={residentialId}';
|
||||
newInitTableResidential(url);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var newInitTableResidential = function(url) {
|
||||
table.render({
|
||||
elem: '#dataTable',
|
||||
id: 'dataTable',
|
||||
url: top.restAjax.path(url, ['yes', selectedRelation.street, selectedRelation.community, selectedRelation.housingEstate]),
|
||||
width: admin.screen() > 1 ? '100%' : '',
|
||||
height: $win.height() - 90,
|
||||
limit: 20,
|
||||
limits: [20, 40, 60, 80, 100, 200],
|
||||
toolbar: '#headerToolBar',
|
||||
request: {
|
||||
pageName: 'page',
|
||||
limitName: 'rows'
|
||||
},
|
||||
cols: [
|
||||
[
|
||||
{type:'checkbox', fixed: 'left'},
|
||||
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
|
||||
{field: 'communityName', width: 180, title: '社区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'residentialName', width: 180, title: '小区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'name', width: 180, title: '楼排名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'buildNum', width: 180, title: '楼/排号', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'floorsNum', width: 180, title: '楼层数', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'unitNum', width: 180, title: '单元/排数', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'address', width: 180, title: '详细地址', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'longitude', width: 180, title: '经度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'latitude', width: 180, title: '纬度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
page: true,
|
||||
parseData: function(data) {
|
||||
return {
|
||||
'code': 0,
|
||||
'msg': '',
|
||||
'count': data.total,
|
||||
'data': data.rows
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var newInitTableStreet = function(url) {
|
||||
table.render({
|
||||
elem: '#dataTable',
|
||||
id: 'dataTable',
|
||||
url: top.restAjax.path(url, ['yes', selectedRelation.street]),
|
||||
width: admin.screen() > 1 ? '100%' : '',
|
||||
height: $win.height() - 90,
|
||||
limit: 20,
|
||||
limits: [20, 40, 60, 80, 100, 200],
|
||||
toolbar: '#headerToolBar',
|
||||
request: {
|
||||
pageName: 'page',
|
||||
limitName: 'rows'
|
||||
},
|
||||
cols: [
|
||||
[
|
||||
{type:'checkbox', fixed: 'left'},
|
||||
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
|
||||
{field: 'communityName', width: 180, title: '社区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'residentialName', width: 180, title: '小区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'name', width: 180, title: '楼排名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'buildNum', width: 180, title: '楼/排号', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'floorsNum', width: 180, title: '楼层数', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'unitNum', width: 180, title: '单元/排数', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'address', width: 180, title: '详细地址', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'longitude', width: 180, title: '经度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'latitude', width: 180, title: '纬度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
page: true,
|
||||
parseData: function(data) {
|
||||
return {
|
||||
'code': 0,
|
||||
'msg': '',
|
||||
'count': data.total,
|
||||
'data': data.rows
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var newInitTableCommunity = function(url) {
|
||||
table.render({
|
||||
elem: '#dataTable',
|
||||
id: 'dataTable',
|
||||
url: top.restAjax.path(url, ['yes', selectedRelation.street, selectedRelation.community]),
|
||||
width: admin.screen() > 1 ? '100%' : '',
|
||||
height: $win.height() - 90,
|
||||
limit: 20,
|
||||
limits: [20, 40, 60, 80, 100, 200],
|
||||
toolbar: '#headerToolBar',
|
||||
request: {
|
||||
pageName: 'page',
|
||||
limitName: 'rows'
|
||||
},
|
||||
cols: [
|
||||
[
|
||||
{type:'checkbox', fixed: 'left'},
|
||||
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
|
||||
{field: 'communityName', width: 180, title: '社区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'residentialName', width: 180, title: '小区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'name', width: 180, title: '楼排名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'buildNum', width: 180, title: '楼/排号', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'floorsNum', width: 180, title: '楼层数', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'unitNum', width: 180, title: '单元/排数', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'address', width: 180, title: '详细地址', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'longitude', width: 180, title: '经度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'latitude', width: 180, title: '纬度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
page: true,
|
||||
parseData: function(data) {
|
||||
return {
|
||||
'code': 0,
|
||||
'msg': '',
|
||||
'count': data.total,
|
||||
'data': data.rows
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化表格
|
||||
function initTable() {
|
||||
table.render({
|
||||
@ -312,6 +799,13 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var init = function(){
|
||||
initStreetSelect();
|
||||
initCommunitySelect();
|
||||
}
|
||||
init();
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -9,11 +9,63 @@
|
||||
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
||||
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||||
<style>
|
||||
.layui-form-pane .layui-inline {margin-top: 10px;}
|
||||
.layui-form-pane .layui-form-label {width: 100%; padding: 0; height: 20px; line-height: 20px; border: unset; background-color: unset; box-sizing: unset; text-align: left;}
|
||||
.layui-form-pane .layui-input-block {margin-left: 0; width: 100%;}
|
||||
.layui-form-pane .layui-form-select .layui-edge {margin-top: 8px;}
|
||||
.layui-form-pane .layui-form-selected .layui-edge {margin-top: 2px;}
|
||||
.layui-form-pane .layui-form-select dl {top: 60px;}
|
||||
#treeHeader {padding: 0 10px 10px 10px; height: auto;}
|
||||
#treeBody {overflow: auto;}
|
||||
#treeBody ul li{border-bottom: 1px solid #f6f6f6; cursor: pointer; width: 100%; height: 28px; line-height: 28px; padding: 0 5px;}
|
||||
#treeBody ul li:last-child{border-bottom: none;}
|
||||
#treeBody ul li.active{font-weight: bold;}
|
||||
#treeFooter {padding: 15px; border-top: 1px solid rgb(246, 246, 246);}
|
||||
#contentBody {width: 100%; height: 300px; position: relative; overflow: hidden; padding: 0px; border: 1px solid #e6e6e6; font-size: 0;}
|
||||
#contentBody:after {content: ' '; display: block; position: absolute; top: 0; left: 0; background-color: #f2f2f2; width: 100px; height: 50px; z-index: 10; border: 1px solid #e6e6e6; box-sizing: border-box;}
|
||||
#contentBody .left {width: 100px; position: absolute; top: 50px; left: 0px; user-select:none; background-color: #f2f2f2;}
|
||||
#contentBody .left .floor {height: 100px; border: 1px solid #e6e6e6; box-sizing: border-box; font-size: 14px; font-weight: bold; text-align: center; line-height: 100px;}
|
||||
#contentBody .top {height: 50px; position: absolute; top: 0px; left: 100px; white-space: nowrap;}
|
||||
#contentBody .top .unit {width: 200px; height: 100%; border: 1px solid #e6e6e6; display: inline-block; box-sizing: border-box; font-size: 14px; font-weight: bold; text-align: center; line-height: 50px; user-select:none; background-color: #f2f2f2;}
|
||||
#contentBody .center {margin-top: 50px; margin-left: 100px; overflow: scroll;}
|
||||
#contentBody .center .main {}
|
||||
#contentBody .center .main .floor {height: 100px; box-sizing: border-box; white-space: nowrap;}
|
||||
#contentBody .center .main .floor .unit {display: inline-block; box-sizing: border-box;}
|
||||
#contentBody .center .main .floor .unit .house {width: 200px; height: 100px; border: 1px solid #e6e6e6; box-sizing: border-box; display: inline-block; font-size: 14px; cursor: pointer; text-align: center; line-height: 100px; user-select:none; transition: background-color .3s, font-weight .3s;}
|
||||
#contentBody .center .main .floor .unit .house:hover {font-weight: bold; background-color: #f2f2f2;}
|
||||
#contentBody .center .main .floor .unit .house .info {display: flex; justify-content: center; align-items: center;}
|
||||
#contentBody .center .main .floor .unit .house .info .option {display: none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid layui-anim layui-anim-fadein">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs2">
|
||||
<div class="layui-card">
|
||||
<div id="treeHeader" class="layui-card-header">
|
||||
<form class="layui-form layui-form-pane" lay-filter="dataForm">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">街道</label>
|
||||
<input type="hidden" id="streetName" name="streetName"/>
|
||||
<div id="streetIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
<div id="communityBox" class="layui-inline" style="display: none;">
|
||||
<label class="layui-form-label">社区</label>
|
||||
<input type="hidden" id="communityName" name="communityName"/>
|
||||
<div id="communityIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
<div id="housingEstateBox" class="layui-inline" style="display: none;">
|
||||
<label class="layui-form-label">小区</label>
|
||||
<input type="hidden" id="housingEstateName" name="housingEstateName"/>
|
||||
<div id="housingEstateIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="treeBody" class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs10">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
|
||||
@ -58,7 +110,7 @@
|
||||
base: 'assets/layuiadmin/'
|
||||
}).extend({
|
||||
index: 'lib/index'
|
||||
}).use(['index', 'table', 'laydate', 'common'], function() {
|
||||
}).use(['index', 'table', 'laydate', 'common', 'select'], function() {
|
||||
var $ = layui.$;
|
||||
var $win = $(window);
|
||||
var table = layui.table;
|
||||
@ -66,8 +118,443 @@
|
||||
var laydate = layui.laydate;
|
||||
var common = layui.common;
|
||||
var resizeTimeout = null;
|
||||
var select = layui.select;
|
||||
var tableUrl = 'api/building/listpage';
|
||||
|
||||
var selectedRelation = {
|
||||
street: '',
|
||||
community: '',
|
||||
housingEstate: '',
|
||||
buildingId: '',
|
||||
buildingFloorsNum: '',
|
||||
buildingUnitNum: '',
|
||||
}
|
||||
|
||||
var initStreetSelect = function() {
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/getStreetList',
|
||||
name: 'streetId',
|
||||
valueKey: 'id',
|
||||
nameKey: 'name',
|
||||
formFilter: 'dataForm',
|
||||
where: {},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.street = data.value;
|
||||
if(data.value) {
|
||||
$('#streetName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#streetName').val('');
|
||||
}
|
||||
initCommunitySelect();
|
||||
var url = 'api/building/listpage?street={street}';
|
||||
newInitTableStreet(url);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var initCommunitySelect = function() {
|
||||
selectedRelation.community = '';
|
||||
var $communityBox = $('#communityBox');
|
||||
if(!selectedRelation.street) {
|
||||
$communityBox.hide();
|
||||
return;
|
||||
}
|
||||
$communityBox.show();
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/getCommunityList',
|
||||
name: 'communityId',
|
||||
valueKey: 'communityId',
|
||||
nameKey: 'communityName',
|
||||
formFilter: 'dataForm',
|
||||
where: {areaId: selectedRelation.street},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.community = data.value;
|
||||
if(data.value) {
|
||||
$('#communityName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#communityName').val('');
|
||||
}
|
||||
var url = 'api/building/listpage?street={street}&community={community}';
|
||||
newInitTableCommunity(url);
|
||||
|
||||
initHousingEstateSelect();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var initHousingEstateSelect = function() {
|
||||
selectedRelation.housingEstate = '';
|
||||
var $housingEstateBox = $('#housingEstateBox');
|
||||
if(!selectedRelation.community) {
|
||||
$housingEstateBox.hide();
|
||||
return;
|
||||
}
|
||||
$housingEstateBox.show();
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/list',
|
||||
name: 'housingEstateId',
|
||||
valueKey: 'residentialId',
|
||||
nameKey: 'name',
|
||||
formFilter: 'dataForm',
|
||||
where: {street: selectedRelation.street, community: selectedRelation.community},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.housingEstate = data.value;
|
||||
if(data.value) {
|
||||
$('#housingEstateName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#housingEstateName').val('');
|
||||
}
|
||||
var url = 'api/building/listpage?street={street}&community={community}&residentialId={housingEstate}';
|
||||
newInitTableResidential(url);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var newInitTableResidential = function(url) {
|
||||
table.render({
|
||||
elem: '#dataTable',
|
||||
id: 'dataTable',
|
||||
url: top.restAjax.path(url, [selectedRelation.street, selectedRelation.community, selectedRelation.housingEstate]),
|
||||
width: admin.screen() > 1 ? '100%' : '',
|
||||
height: $win.height() - 90,
|
||||
limit: 20,
|
||||
limits: [20, 40, 60, 80, 100, 200],
|
||||
toolbar: '#headerToolBar',
|
||||
request: {
|
||||
pageName: 'page',
|
||||
limitName: 'rows'
|
||||
},
|
||||
cols: [
|
||||
[
|
||||
{type:'checkbox', fixed: 'left'},
|
||||
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
|
||||
{field: 'communityName', width: 180, title: '社区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'residentialName', width: 180, title: '小区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'name', width: 180, title: '楼排名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'buildNum', width: 180, title: '楼/排号', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'floorsNum', width: 180, title: '楼层数', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'unitNum', width: 180, title: '单元/排数', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'address', width: 180, title: '详细地址', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'longitude', width: 180, title: '经度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'latitude', width: 180, title: '纬度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
page: true,
|
||||
parseData: function(data) {
|
||||
return {
|
||||
'code': 0,
|
||||
'msg': '',
|
||||
'count': data.total,
|
||||
'data': data.rows
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var newInitTableStreet = function(url) {
|
||||
table.render({
|
||||
elem: '#dataTable',
|
||||
id: 'dataTable',
|
||||
url: top.restAjax.path(url, [selectedRelation.street]),
|
||||
width: admin.screen() > 1 ? '100%' : '',
|
||||
height: $win.height() - 90,
|
||||
limit: 20,
|
||||
limits: [20, 40, 60, 80, 100, 200],
|
||||
toolbar: '#headerToolBar',
|
||||
request: {
|
||||
pageName: 'page',
|
||||
limitName: 'rows'
|
||||
},
|
||||
cols: [
|
||||
[
|
||||
{type:'checkbox', fixed: 'left'},
|
||||
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
|
||||
{field: 'communityName', width: 180, title: '社区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'residentialName', width: 180, title: '小区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'name', width: 180, title: '楼排名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'buildNum', width: 180, title: '楼/排号', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'floorsNum', width: 180, title: '楼层数', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'unitNum', width: 180, title: '单元/排数', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'address', width: 180, title: '详细地址', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'longitude', width: 180, title: '经度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'latitude', width: 180, title: '纬度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
page: true,
|
||||
parseData: function(data) {
|
||||
return {
|
||||
'code': 0,
|
||||
'msg': '',
|
||||
'count': data.total,
|
||||
'data': data.rows
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var newInitTableCommunity = function(url) {
|
||||
table.render({
|
||||
elem: '#dataTable',
|
||||
id: 'dataTable',
|
||||
url: top.restAjax.path(url, [selectedRelation.street, selectedRelation.community]),
|
||||
width: admin.screen() > 1 ? '100%' : '',
|
||||
height: $win.height() - 90,
|
||||
limit: 20,
|
||||
limits: [20, 40, 60, 80, 100, 200],
|
||||
toolbar: '#headerToolBar',
|
||||
request: {
|
||||
pageName: 'page',
|
||||
limitName: 'rows'
|
||||
},
|
||||
cols: [
|
||||
[
|
||||
{type:'checkbox', fixed: 'left'},
|
||||
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
|
||||
{field: 'communityName', width: 180, title: '社区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'residentialName', width: 180, title: '小区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'name', width: 180, title: '楼排名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'buildNum', width: 180, title: '楼/排号', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'floorsNum', width: 180, title: '楼层数', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'unitNum', width: 180, title: '单元/排数', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'address', width: 180, title: '详细地址', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'longitude', width: 180, title: '经度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'latitude', width: 180, title: '纬度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
page: true,
|
||||
parseData: function(data) {
|
||||
return {
|
||||
'code': 0,
|
||||
'msg': '',
|
||||
'count': data.total,
|
||||
'data': data.rows
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化表格
|
||||
function initTable() {
|
||||
table.render({
|
||||
@ -295,6 +782,13 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var init = function(){
|
||||
initStreetSelect();
|
||||
initCommunitySelect();
|
||||
}
|
||||
init();
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -9,11 +9,63 @@
|
||||
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
||||
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||||
<style>
|
||||
.layui-form-pane .layui-inline {margin-top: 10px;}
|
||||
.layui-form-pane .layui-form-label {width: 100%; padding: 0; height: 20px; line-height: 20px; border: unset; background-color: unset; box-sizing: unset; text-align: left;}
|
||||
.layui-form-pane .layui-input-block {margin-left: 0; width: 100%;}
|
||||
.layui-form-pane .layui-form-select .layui-edge {margin-top: 8px;}
|
||||
.layui-form-pane .layui-form-selected .layui-edge {margin-top: 2px;}
|
||||
.layui-form-pane .layui-form-select dl {top: 60px;}
|
||||
#treeHeader {padding: 0 10px 10px 10px; height: auto;}
|
||||
#treeBody {overflow: auto;}
|
||||
#treeBody ul li{border-bottom: 1px solid #f6f6f6; cursor: pointer; width: 100%; height: 28px; line-height: 28px; padding: 0 5px;}
|
||||
#treeBody ul li:last-child{border-bottom: none;}
|
||||
#treeBody ul li.active{font-weight: bold;}
|
||||
#treeFooter {padding: 15px; border-top: 1px solid rgb(246, 246, 246);}
|
||||
#contentBody {width: 100%; height: 300px; position: relative; overflow: hidden; padding: 0px; border: 1px solid #e6e6e6; font-size: 0;}
|
||||
#contentBody:after {content: ' '; display: block; position: absolute; top: 0; left: 0; background-color: #f2f2f2; width: 100px; height: 50px; z-index: 10; border: 1px solid #e6e6e6; box-sizing: border-box;}
|
||||
#contentBody .left {width: 100px; position: absolute; top: 50px; left: 0px; user-select:none; background-color: #f2f2f2;}
|
||||
#contentBody .left .floor {height: 100px; border: 1px solid #e6e6e6; box-sizing: border-box; font-size: 14px; font-weight: bold; text-align: center; line-height: 100px;}
|
||||
#contentBody .top {height: 50px; position: absolute; top: 0px; left: 100px; white-space: nowrap;}
|
||||
#contentBody .top .unit {width: 200px; height: 100%; border: 1px solid #e6e6e6; display: inline-block; box-sizing: border-box; font-size: 14px; font-weight: bold; text-align: center; line-height: 50px; user-select:none; background-color: #f2f2f2;}
|
||||
#contentBody .center {margin-top: 50px; margin-left: 100px; overflow: scroll;}
|
||||
#contentBody .center .main {}
|
||||
#contentBody .center .main .floor {height: 100px; box-sizing: border-box; white-space: nowrap;}
|
||||
#contentBody .center .main .floor .unit {display: inline-block; box-sizing: border-box;}
|
||||
#contentBody .center .main .floor .unit .house {width: 200px; height: 100px; border: 1px solid #e6e6e6; box-sizing: border-box; display: inline-block; font-size: 14px; cursor: pointer; text-align: center; line-height: 100px; user-select:none; transition: background-color .3s, font-weight .3s;}
|
||||
#contentBody .center .main .floor .unit .house:hover {font-weight: bold; background-color: #f2f2f2;}
|
||||
#contentBody .center .main .floor .unit .house .info {display: flex; justify-content: center; align-items: center;}
|
||||
#contentBody .center .main .floor .unit .house .info .option {display: none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid layui-anim layui-anim-fadein">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs2">
|
||||
<div class="layui-card">
|
||||
<div id="treeHeader" class="layui-card-header">
|
||||
<form class="layui-form layui-form-pane" lay-filter="dataForm">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">街道</label>
|
||||
<input type="hidden" id="streetName" name="streetName"/>
|
||||
<div id="streetIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
<div id="communityBox" class="layui-inline" style="display: none;">
|
||||
<label class="layui-form-label">社区</label>
|
||||
<input type="hidden" id="communityName" name="communityName"/>
|
||||
<div id="communityIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
<div id="housingEstateBox" class="layui-inline" style="display: none;">
|
||||
<label class="layui-form-label">小区</label>
|
||||
<input type="hidden" id="housingEstateName" name="housingEstateName"/>
|
||||
<div id="housingEstateIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="treeBody" class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs10">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
|
||||
@ -58,7 +110,7 @@
|
||||
base: 'assets/layuiadmin/'
|
||||
}).extend({
|
||||
index: 'lib/index'
|
||||
}).use(['index', 'table', 'laydate', 'common'], function() {
|
||||
}).use(['index', 'table', 'laydate', 'common', 'select'], function() {
|
||||
var $ = layui.$;
|
||||
var $win = $(window);
|
||||
var table = layui.table;
|
||||
@ -66,8 +118,244 @@
|
||||
var laydate = layui.laydate;
|
||||
var common = layui.common;
|
||||
var resizeTimeout = null;
|
||||
var select = layui.select;
|
||||
var tableUrl = 'api/residential/listpage?myself={myself}';
|
||||
|
||||
var selectedRelation = {
|
||||
street: '',
|
||||
community: '',
|
||||
housingEstate: '',
|
||||
buildingId: '',
|
||||
buildingFloorsNum: '',
|
||||
buildingUnitNum: '',
|
||||
}
|
||||
|
||||
var initStreetSelect = function() {
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/getStreetList',
|
||||
name: 'streetId',
|
||||
valueKey: 'id',
|
||||
nameKey: 'name',
|
||||
formFilter: 'dataForm',
|
||||
where: {},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.street = data.value;
|
||||
if(data.value) {
|
||||
$('#streetName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#streetName').val('');
|
||||
}
|
||||
initCommunitySelect();
|
||||
var url = 'api/residential/listpage?myself={myself}&street={street}';
|
||||
newInitTableStreet(url);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var initCommunitySelect = function() {
|
||||
selectedRelation.community = '';
|
||||
var $communityBox = $('#communityBox');
|
||||
if(!selectedRelation.street) {
|
||||
$communityBox.hide();
|
||||
return;
|
||||
}
|
||||
$communityBox.show();
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/getCommunityList',
|
||||
name: 'communityId',
|
||||
valueKey: 'communityId',
|
||||
nameKey: 'communityName',
|
||||
formFilter: 'dataForm',
|
||||
where: {areaId: selectedRelation.street},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.community = data.value;
|
||||
if(data.value) {
|
||||
$('#communityName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#communityName').val('');
|
||||
}
|
||||
var url = 'api/residential/listpage?myself={myself}&street={street}&community={community}';
|
||||
newInitTableCommunity(url);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var newInitTableStreet = function(url) {
|
||||
table.render({
|
||||
elem: '#dataTable',
|
||||
id: 'dataTable',
|
||||
url: top.restAjax.path(url, ['yes', selectedRelation.street]),
|
||||
width: admin.screen() > 1 ? '100%' : '',
|
||||
height: $win.height() - 90,
|
||||
limit: 20,
|
||||
limits: [20, 40, 60, 80, 100, 200],
|
||||
toolbar: '#headerToolBar',
|
||||
request: {
|
||||
pageName: 'page',
|
||||
limitName: 'rows'
|
||||
},
|
||||
cols: [
|
||||
[
|
||||
{type:'checkbox', fixed: 'left'},
|
||||
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
|
||||
{field: 'name', width: 180, title: '小区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'communityName', width: 180, title: '所在社区', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'residentialTypeName', width: 180, title: '类型', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'address', width: 180, title: '详细地址', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'longitude', width: 180, title: '经度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'latitude', width: 180, title: '纬度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
page: true,
|
||||
parseData: function(data) {
|
||||
return {
|
||||
'code': 0,
|
||||
'msg': '',
|
||||
'count': data.total,
|
||||
'data': data.rows
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var newInitTableCommunity = function(url) {
|
||||
table.render({
|
||||
elem: '#dataTable',
|
||||
id: 'dataTable',
|
||||
url: top.restAjax.path(url, ['yes', selectedRelation.street, selectedRelation.community]),
|
||||
width: admin.screen() > 1 ? '100%' : '',
|
||||
height: $win.height() - 90,
|
||||
limit: 20,
|
||||
limits: [20, 40, 60, 80, 100, 200],
|
||||
toolbar: '#headerToolBar',
|
||||
request: {
|
||||
pageName: 'page',
|
||||
limitName: 'rows'
|
||||
},
|
||||
cols: [
|
||||
[
|
||||
{type:'checkbox', fixed: 'left'},
|
||||
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
|
||||
{field: 'name', width: 180, title: '小区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'communityName', width: 180, title: '所在社区', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'residentialTypeName', width: 180, title: '类型', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'address', width: 180, title: '详细地址', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'longitude', width: 180, title: '经度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'latitude', width: 180, title: '纬度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
page: true,
|
||||
parseData: function(data) {
|
||||
return {
|
||||
'code': 0,
|
||||
'msg': '',
|
||||
'count': data.total,
|
||||
'data': data.rows
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化表格
|
||||
function initTable() {
|
||||
table.render({
|
||||
@ -268,6 +556,12 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var init = function(){
|
||||
initStreetSelect();
|
||||
initCommunitySelect();
|
||||
}
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -9,11 +9,63 @@
|
||||
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
||||
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||||
<style>
|
||||
.layui-form-pane .layui-inline {margin-top: 10px;}
|
||||
.layui-form-pane .layui-form-label {width: 100%; padding: 0; height: 20px; line-height: 20px; border: unset; background-color: unset; box-sizing: unset; text-align: left;}
|
||||
.layui-form-pane .layui-input-block {margin-left: 0; width: 100%;}
|
||||
.layui-form-pane .layui-form-select .layui-edge {margin-top: 8px;}
|
||||
.layui-form-pane .layui-form-selected .layui-edge {margin-top: 2px;}
|
||||
.layui-form-pane .layui-form-select dl {top: 60px;}
|
||||
#treeHeader {padding: 0 10px 10px 10px; height: auto;}
|
||||
#treeBody {overflow: auto;}
|
||||
#treeBody ul li{border-bottom: 1px solid #f6f6f6; cursor: pointer; width: 100%; height: 28px; line-height: 28px; padding: 0 5px;}
|
||||
#treeBody ul li:last-child{border-bottom: none;}
|
||||
#treeBody ul li.active{font-weight: bold;}
|
||||
#treeFooter {padding: 15px; border-top: 1px solid rgb(246, 246, 246);}
|
||||
#contentBody {width: 100%; height: 300px; position: relative; overflow: hidden; padding: 0px; border: 1px solid #e6e6e6; font-size: 0;}
|
||||
#contentBody:after {content: ' '; display: block; position: absolute; top: 0; left: 0; background-color: #f2f2f2; width: 100px; height: 50px; z-index: 10; border: 1px solid #e6e6e6; box-sizing: border-box;}
|
||||
#contentBody .left {width: 100px; position: absolute; top: 50px; left: 0px; user-select:none; background-color: #f2f2f2;}
|
||||
#contentBody .left .floor {height: 100px; border: 1px solid #e6e6e6; box-sizing: border-box; font-size: 14px; font-weight: bold; text-align: center; line-height: 100px;}
|
||||
#contentBody .top {height: 50px; position: absolute; top: 0px; left: 100px; white-space: nowrap;}
|
||||
#contentBody .top .unit {width: 200px; height: 100%; border: 1px solid #e6e6e6; display: inline-block; box-sizing: border-box; font-size: 14px; font-weight: bold; text-align: center; line-height: 50px; user-select:none; background-color: #f2f2f2;}
|
||||
#contentBody .center {margin-top: 50px; margin-left: 100px; overflow: scroll;}
|
||||
#contentBody .center .main {}
|
||||
#contentBody .center .main .floor {height: 100px; box-sizing: border-box; white-space: nowrap;}
|
||||
#contentBody .center .main .floor .unit {display: inline-block; box-sizing: border-box;}
|
||||
#contentBody .center .main .floor .unit .house {width: 200px; height: 100px; border: 1px solid #e6e6e6; box-sizing: border-box; display: inline-block; font-size: 14px; cursor: pointer; text-align: center; line-height: 100px; user-select:none; transition: background-color .3s, font-weight .3s;}
|
||||
#contentBody .center .main .floor .unit .house:hover {font-weight: bold; background-color: #f2f2f2;}
|
||||
#contentBody .center .main .floor .unit .house .info {display: flex; justify-content: center; align-items: center;}
|
||||
#contentBody .center .main .floor .unit .house .info .option {display: none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid layui-anim layui-anim-fadein">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs2">
|
||||
<div class="layui-card">
|
||||
<div id="treeHeader" class="layui-card-header">
|
||||
<form class="layui-form layui-form-pane" lay-filter="dataForm">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">街道</label>
|
||||
<input type="hidden" id="streetName" name="streetName"/>
|
||||
<div id="streetIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
<div id="communityBox" class="layui-inline" style="display: none;">
|
||||
<label class="layui-form-label">社区</label>
|
||||
<input type="hidden" id="communityName" name="communityName"/>
|
||||
<div id="communityIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
<div id="housingEstateBox" class="layui-inline" style="display: none;">
|
||||
<label class="layui-form-label">小区</label>
|
||||
<input type="hidden" id="housingEstateName" name="housingEstateName"/>
|
||||
<div id="housingEstateIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="treeBody" class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs10">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
|
||||
@ -58,7 +110,7 @@
|
||||
base: 'assets/layuiadmin/'
|
||||
}).extend({
|
||||
index: 'lib/index'
|
||||
}).use(['index', 'table', 'laydate', 'common'], function() {
|
||||
}).use(['index', 'table', 'laydate', 'common', 'select'], function() {
|
||||
var $ = layui.$;
|
||||
var $win = $(window);
|
||||
var table = layui.table;
|
||||
@ -66,8 +118,244 @@
|
||||
var laydate = layui.laydate;
|
||||
var common = layui.common;
|
||||
var resizeTimeout = null;
|
||||
var select = layui.select;
|
||||
var tableUrl = 'api/residential/listpage';
|
||||
|
||||
var selectedRelation = {
|
||||
street: '',
|
||||
community: '',
|
||||
housingEstate: '',
|
||||
buildingId: '',
|
||||
buildingFloorsNum: '',
|
||||
buildingUnitNum: '',
|
||||
}
|
||||
|
||||
var initStreetSelect = function() {
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/getStreetList',
|
||||
name: 'streetId',
|
||||
valueKey: 'id',
|
||||
nameKey: 'name',
|
||||
formFilter: 'dataForm',
|
||||
where: {},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.street = data.value;
|
||||
if(data.value) {
|
||||
$('#streetName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#streetName').val('');
|
||||
}
|
||||
initCommunitySelect();
|
||||
var url = 'api/residential/listpage?myself={myself}&street={street}';
|
||||
newInitTableStreet(url);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var initCommunitySelect = function() {
|
||||
selectedRelation.community = '';
|
||||
var $communityBox = $('#communityBox');
|
||||
if(!selectedRelation.street) {
|
||||
$communityBox.hide();
|
||||
return;
|
||||
}
|
||||
$communityBox.show();
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/getCommunityList',
|
||||
name: 'communityId',
|
||||
valueKey: 'communityId',
|
||||
nameKey: 'communityName',
|
||||
formFilter: 'dataForm',
|
||||
where: {areaId: selectedRelation.street},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.community = data.value;
|
||||
if(data.value) {
|
||||
$('#communityName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#communityName').val('');
|
||||
}
|
||||
var url = 'api/residential/listpage?myself={myself}&street={street}&community={community}';
|
||||
newInitTableCommunity(url);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var newInitTableStreet = function(url) {
|
||||
table.render({
|
||||
elem: '#dataTable',
|
||||
id: 'dataTable',
|
||||
url: top.restAjax.path(url, ['yes', selectedRelation.street]),
|
||||
width: admin.screen() > 1 ? '100%' : '',
|
||||
height: $win.height() - 90,
|
||||
limit: 20,
|
||||
limits: [20, 40, 60, 80, 100, 200],
|
||||
toolbar: '#headerToolBar',
|
||||
request: {
|
||||
pageName: 'page',
|
||||
limitName: 'rows'
|
||||
},
|
||||
cols: [
|
||||
[
|
||||
{type:'checkbox', fixed: 'left'},
|
||||
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
|
||||
{field: 'name', width: 180, title: '小区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'communityName', width: 180, title: '所在社区', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'residentialTypeName', width: 180, title: '类型', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'address', width: 180, title: '详细地址', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'longitude', width: 180, title: '经度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'latitude', width: 180, title: '纬度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
page: true,
|
||||
parseData: function(data) {
|
||||
return {
|
||||
'code': 0,
|
||||
'msg': '',
|
||||
'count': data.total,
|
||||
'data': data.rows
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var newInitTableCommunity = function(url) {
|
||||
table.render({
|
||||
elem: '#dataTable',
|
||||
id: 'dataTable',
|
||||
url: top.restAjax.path(url, ['yes', selectedRelation.street, selectedRelation.community]),
|
||||
width: admin.screen() > 1 ? '100%' : '',
|
||||
height: $win.height() - 90,
|
||||
limit: 20,
|
||||
limits: [20, 40, 60, 80, 100, 200],
|
||||
toolbar: '#headerToolBar',
|
||||
request: {
|
||||
pageName: 'page',
|
||||
limitName: 'rows'
|
||||
},
|
||||
cols: [
|
||||
[
|
||||
{type:'checkbox', fixed: 'left'},
|
||||
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
|
||||
{field: 'name', width: 180, title: '小区名称', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'communityName', width: 180, title: '所在社区', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'residentialTypeName', width: 180, title: '类型', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'address', width: 180, title: '详细地址', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'longitude', width: 180, title: '经度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
},
|
||||
{field: 'latitude', width: 180, title: '纬度', align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
page: true,
|
||||
parseData: function(data) {
|
||||
return {
|
||||
'code': 0,
|
||||
'msg': '',
|
||||
'count': data.total,
|
||||
'data': data.rows
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化表格
|
||||
function initTable() {
|
||||
table.render({
|
||||
@ -268,6 +556,13 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var init = function(){
|
||||
initStreetSelect();
|
||||
initCommunitySelect();
|
||||
}
|
||||
init();
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user