arcgis api for javascript学习-FeatureTable使用(属性详解)

最新推荐文章于 2023-05-25 14:53:52 发布

blog12138

最新推荐文章于 2023-05-25 14:53:52 发布

阅读量727

点赞数

分类专栏： arcgis for js 3.x学习笔记

本文链接：https://blog.csdn.net/Zzzpiu/article/details/109237599

版权

arcgis for js 3.x学习笔记专栏收录该内容

30 篇文章 7 订阅

订阅专栏

showAttachments: true,//允许显示附件
syncSelection: true,//启用从表到映射的选择
zoomToSelection: true,//用户在表中选择的要素将缩放到地图对应的要素
gridOptions: {//允许用户使用ctrl+A进行全选并徐选着里面的文本
allowSelectAll: true,
allowTextSelection: true, },
editable: true,//可以编辑
dateOptions: {//设置日期格式
datePattern: “M/d/y”,
timeEnabled: true,
timePattern: ‘HH:mm:ss’,},
//显示字段
outFields: [“Address”, “Created_Date”, “Use_Type”, “Building_Size_Sqft”, ‘Available_Size_Sqft’,
“Status”, “Parking_Count”, “Primary_Parking_Type”, “Tenancy”, “Floors”
],
//字段信息
fieldInfos: [
{
name: ‘Building_Size_Sqft’,
alias: ‘Building Size’,//别名
editable: false,/不可编辑
format: {
template: “ $KaTeX parse error: Expected 'EOF', got '}' at position 55: \dots }̲ \dots$ {value} sqft”
}
},
{
name: ‘Primary_Parking_Type’,
format: {
template: “${value} parking”
}
}
],

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>FeatureTable Formatting</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.34/"></script>

    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>

    <script>
        require([
            "esri/layers/FeatureLayer",
            "esri/dijit/FeatureTable",
            "esri/geometry/Extent",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/Color",
            "esri/map",
            "dojo/dom-construct",
            "dojo/dom",
            "dojo/number",
            "dojo/parser",
            "dojo/ready",
            "dojo/on",
            "dojo/_base/lang",
            "dijit/registry",
            "dijit/form/Button",
            "dijit/layout/ContentPane",
            "dijit/layout/BorderContainer",
            "dijit/form/TextBox"
        ], function (
            FeatureLayer, FeatureTable, Extent, SimpleMarkerSymbol, SimpleLineSymbol, Color, Map,
            domConstruct, dom, dojoNum, parser, ready, on,lang,
            registry, Button, ContentPane, BorderContainer, TextBox
        ) {

            parser.parse();

            ready(function(){

                var map = new Map("map",{
                    basemap: "dark-gray-vector"
                });

                map.on("load", loadTable);

                function loadTable(){
                    var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/New_Real_Estate/FeatureServer/0",{
                        mode: FeatureLayer.MODE_ONDEMAND,
                        outFields: ["*"],
                        visible: true,
                        id: "fLayer"
                    });

                    // set a selection symbol for the featurelayer
                    var selectionSymbol =  new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 12,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 197, 1])));
                    myFeatureLayer.setSelectionSymbol(selectionSymbol);

                    map.addLayer(myFeatureLayer);

                    // create new FeatureTable and set its properties
                    var myFeatureTable = new FeatureTable({
                        featureLayer : myFeatureLayer,
                        map : map,
                        showAttachments: true,//允许显示附件
                        // only allows selection from the table to the map
                        syncSelection: true,//启用从表到映射的选择
                        zoomToSelection: true,//用户在表中选择的要素将缩放到地图对应的要素
                        gridOptions: {//允许用户使用ctrl+A进行全选并徐选着里面的文本
                            allowSelectAll: true,
                            allowTextSelection: true,
                        },
                        editable: true,//可以编辑
                        dateOptions: {//设置日期格式
                            // set date options at the feature table level
                            // all date fields will adhere this
                            datePattern: "M/d/y",
                            timeEnabled: true,
                            timePattern: 'HH:mm:ss',
                        },
                        // define order of available fields. If the fields are not listed in 'outFields'
                        // then they will not be available when the table starts.
                        outFields: ["Address", "Created_Date", "Use_Type", "Building_Size_Sqft", 'Available_Size_Sqft',
                            "Status", "Parking_Count", "Primary_Parking_Type", "Tenancy", "Floors"
                        ],
                        // use fieldInfos property to change field's label (column header),
                        // the editability of the field, and to format how field values are displayed
                        fieldInfos: [
                            {
                                name: 'Building_Size_Sqft',
                                alias: 'Building Size',
                                editable: false,
                                format: {
                                    template: "${value} sqft"
                                }
                            },
                            {
                                name: 'Available_Size_Sqft',
                                alias: 'Available Size',
                                format: {
                                    template: "${value} sqft"
                                }
                            },
                            {
                                name: 'Primary_Parking_Type',
                                format: {
                                    template: "${value} parking"
                                }
                            }
                        ],
                    }, 'myTableNode');

                    myFeatureTable.startup();

                    // listen to show-attachments event
                    myFeatureTable.on("show-attachments", function(evt){
                        console.log("show-attachments event - ", evt);
                    });
                }
            });
        });
    </script>
</head>
<body class="claro esri">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%">
        <div id="map"></div>
    </div>
    <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:50%">
        <div id="myTableNode"></div>
    </div>
</div>
</body>
</html>

blog12138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
arcgis api for javascript学习-FeatureTable使用(属性详解)

showAttachments: true,//允许显示附件syncSelection: true,//启用从表到映射的选择zoomToSelection: true,//用户在表中选择的要素将缩放到地图对应的要素gridOptions: {//允许用户使用ctrl+A进行全选并徐选着里面的文本allowSelectAll: true,allowTextSelection: true, },editable: true,//可以编辑dateOptions: {//设置日期格式datePat.
复制链接

扫一扫