getdata.json
{
count: 3,
building: [
{
summary: "幢12,逻辑幢,总计(2522):",
units:[{indexno:1,count:3},{indexno:2,count:2},{indexno:3,count:4}],
floor: [
{
floorno: 3,
floorno2: 3,
rooms: [{ obligee: "曹亦美", houseno: "301", area: 125.2, state: "1" },
{ obligee: "林雨萌", houseno: "302", area: 125.2, state: "1" },
{ obligee: "时羿辉", houseno: "303", area: 125.2, state: "1" },
{ obligee: "肖匡衡", houseno: "304", area: 125.2, state: "2" },
{ obligee: "陈芊以", houseno: "305", area: 125.2, state: "1" },
{ obligee: "王沁悦", houseno: "306", area: 125.2, state: "1" },
{ obligee: "王宇轩", houseno: "307", area: 125.2, state: "1" },
{ obligee: "刘伊伊", houseno: "308", area: 125.2, state: "1" },
{ obligee: "杜新", houseno: "309", area: 102.34, state: "1" } ]
},
{
floorno: 2,
floorno2: 2,
rooms: [{ obligee: "君宝", houseno: "201", area: 125.2, state: "1" },
{ obligee: "杨卓霖", houseno: "202", area: 125.2, state: "2" },
{ obligee: "夏欣怡", houseno: "203", area: 125.2, state: "1" },
{ obligee: "聂泽雅", houseno: "204", area: 125.2, state: "1" },
{ obligee: "郭若熹", houseno: "205", area: 125.2, state: "1" },
{ obligee: "", houseno: "", area: "", state: "0" },
{ obligee: "", houseno: "", area: "", state: "0" },
{ obligee: "", houseno: "", area: "", state: "0" },
{ obligee: "章启月", houseno: "209", area: 102.34, state: "1" } ]
},
{
floorno: 1,
floorno2: 1,
rooms: [{ obligee: "马思泽", houseno: "101", area: 125.2, state: "1" },
{ obligee: "陈同辉", houseno: "102", area: 125.2, state: "1" },
{ obligee: "李锐", houseno: "103", area: 125.2, state: "1" },
{ obligee: "冯紫晗", houseno: "104", area: 125.2, state: "1" },
{ obligee: "朱思成", houseno: "105", area: 125.2, state: "1" },
{ obligee: "", houseno: "", area: "", state: "0" },
{ obligee: "", houseno: "", area: "", state: "0" },
{ obligee: "", houseno: "", area: "", state: "0" },
{ obligee: "张恒瑞", houseno: "109", area: 102.34, state: "1" } ]
}
]
},
{
summary: "裙楼,逻辑幢,总计(3325):",
units:[{indexno:1,count:4},{indexno:2,count:2}],
floor: [
{
floorno: 11,
floorno2: 10,
rooms: [{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "杜新", houseno: "1206", area: 102.34 } ]
},
{
floorno: 11,
floorno2: 10,
rooms: [{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "杜新", houseno: "1206", area: 102.34 } ]
},
{
floorno: 11,
floorno2: 10,
rooms: [{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "杜新", houseno: "1206", area: 102.34 } ]
}
]
},
{
summary: "车库,逻辑幢,总计(23):",
units:[{indexno:1,count:20}],
floor: [
{
floorno: 11,
floorno2: 10,
rooms: [{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "曹亦美", houseno: "1205", area: 125.2 },
{ obligee: "杜新", houseno: "1206", area: 102.34 } ]
}
]
}
]
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Using FeatureTable</title>
<link rel="stylesheet" href="themes/claro/claro.css">
<!--<link rel="stylesheet" href="//js.arcgis.com/3.16/dijit/themes/claro/claro.css">-->
<link rel="stylesheet" href="themes/esri.css">
<link rel="stylesheet" href="themes/building.css">
<script type="text/javascript" src="http://172.18.1.193/arcgis_js_api/library/3.19/3.19/init.js"></script>
<style type="text/css">
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
dialog {
width: 850px;
top:20px;
border: 1px solid #dadada;
font-family: sans-serif;
padding: 5px 10px 20px 20px;
}
</style>
<script>
// AMD
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/symbols/SimpleMarkerSymbol",
"esri/InfoTemplate",
"esri/Color",
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/_base/array",
"dojo/_base/connect",
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"dijit/form/Button",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/Dialog",
"dojo/domReady!"
], function (
Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate,
Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore,
Button, parser
) {
var queryTask, query;
var map;
var grid, store;
var infoTemplate;
var symbol;
parser.parse();
showDialog = function (zddm) {
dojo.xhrGet({
url: "getdata.json",
handleAs: "json",
load: function (data) {
var section = "";
var ifFirstOpen = true;
var tempLine2 = "";//第二行临时
dojo.forEach(data.building, function (build) {
//如果是第一条逻辑幢，则是默认打开状态
if (ifFirstOpen) {
section += "<section class=\"progress window\"><details open><summary>" + build.summary + "</summary>";
ifFirstOpen = false;
}
else {
section += "<section class=\"progress window\"><details><summary>" + build.summary + "</summary>";
}
//section += "<table border=\"0\"><tr><th>楼层</th>" + "<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th></tr>";
//第一行
tempLine2 = "";
section += "<table border=\"0\"><tr><th></th><th></th>";//两个空白格子
dojo.forEach(build.units, function (unit) {
section += "<th colspan=\"" + unit.count + "\">" + unit.indexno + "单元</th>";
//生成每个单元里的房间列序号
for (i = 1; i <= unit.count; i++) {
tempLine2 += "<th>" + i + "</th>";
}
});
section += "</tr>";
//第二行
section += "<tr><th>物理层</th><th>名义层</th>";//物理层，名义层
section += tempLine2;
section += "</tr>";
dojo.forEach(build.floor, function (flr) {
section += "<tr>";
section += "<td>" + flr.floorno + "</td>";//物理层号
section += "<td>" + flr.floorno2 + "</td>";//名义层号
dojo.forEach(flr.rooms, function (rm) {
section += "<td";
if (rm.state == "1") section += " class=\"td1\"";
if (rm.state == "2") section += " class=\"td2\"";
section += "><a href=\"#\">" + rm.obligee + "</a><br/>" + rm.houseno + "<br />" + rm.area + "<br /></td>";
});
section += "</tr>";
});
section += "</table>";
section += "</details></section>";
});
dojo.place(section, dojo.byId("contentNode"));
},
error: function () {
}
});
//registry.byId("terms").show();
document.querySelector(‘dialog‘).showModal();
}
// Hide the dialog
hideDialog = function () {
//registry.byId("terms").hide();
document.querySelector(‘dialog‘).close();
}
});
</script>
</head>
<body class="claro esri">
<button onclick="showDialog(‘aaa‘);" style="width:100px;margin-top:5px;">showwww</button>
<!--<div class="dijitHidden">
<div data-dojo-type="dijit/Dialog" style="width:1050px;" data-dojo-props="title:‘Terms and Conditions‘" id="terms">
<div>
<div id="contentNode" style="height:570px"></div>
<button onclick="hideDialog();">关闭</button>
</div>
</div>
</div>-->
<dialog>
<h2><span id="dlgTitle">3209342001002GB0021的楼盘表</span></h2>
<!--<section class="progress window">
<details>
<summary>幢12,逻辑幢,总计(25):</summary>
<div id="contentNode"></div>
</details>
</section>-->
<div id="contentNode"></div>
<button onclick="hideDialog();" style="width:100px;margin-top:5px;">关闭</button>
</dialog>
</body>
</html>
building.css
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
margin:0;
padding:0;
font:12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif;
color: #555;
background:#f5f5f5 url(bg.jpg);
}
a {color:#666;}
#content {width:65%; max-width:990px; margin:6% auto 0;}
table {
overflow:hidden;
border:1px solid #d3d3d3;
background:#fefefe;
width:98%;
-moz-border-radius:5px; /* FF1+ */
-webkit-border-radius:5px; /* Saf3-4 */
border-radius:5px;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
th, td {padding:8px 18px 8px; text-align:center; }
th {padding-top:2px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}
td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
td.first, th.first {text-align:left}
td.last {border-right:none;}
.td1 { background-color:azure; } /*抵押的*/
.td2 { background-color:cyan; } /*查封的*/
th {
background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
tr:first-child th.first {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px; /* Saf3-4 */
}
tr:first-child th.last {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px; /* Saf3-4 */
}
tr:last-child td.first {
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}
tr:last-child td.last {
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}
其他采用dojo自己配置，注意IIS中MIME添加application/x-javascript, *.json
时间： 2024-10-14 04:53:31