楼盘表展示效果记录

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="100px;margin-top:5px;">showwww</button>

    <!--<div class="dijitHidden">
        <div data-dojo-type="dijit/Dialog" style="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="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