arcgis api for javascript学习-FeatureTable使用(属性详解)
程序员文章站
2022-03-22 10:14:03
showAttachments: true,//允许显示附件syncSelection: true,//启用从表到映射的选择zoomToSelection: true,//用户在表中选择的要素将缩放到地图对应的要素gridOptions: {//允许用户使用ctrl+A进行全选并徐选着里面的文本allowSelectAll: true,allowTextSelection: true, },editable: true,//可以编辑dateOptions: {//设置日期格式datePat....
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: … }̲ …{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>
本文地址：https://blog.csdn.net/Zzzpiu/article/details/109237599
下一篇： Asp.Net验证控件和表达式测试题