【发布时间】:2013-12-21 18:20:11
【问题描述】:
我正在创建一个 web 地图应用程序,用户将能够使用表单搜索查询图层要素(在本例中为土地属性),结果应以两种方式显示: 1)符合搜索条件的房产特征将在地图上突出显示(我有这个工作) 2) 符合搜索条件的每个属性的属性将在道场数据网格中列出。 (我无法让它工作 - 我只是在我的 dataGrid 中收到一条错误消息“对不起,发生了错误”。
任何建议都会非常有帮助。
查询表单html:(我觉得这里没有问题)
<div form id="queryForm" data-dojo-type="dijit.layout.ContentPane" style="overflow:auto;" data-dojo-props="title:'Search For Properties', selected:true">
<table>
<tr>
<td>Acquisition Number: </td>
<td><input type="text" name="ACNO" autocomplete="on"></td>
</tr>
<tr>
<td>Property Name: </td>
<td><input type="text" name="Name" autocomplete="on"></td>
</tr>
<tr>
<td>Type of Property: </td>
<td><select multiple name="Land_Type" style="padding-left:5px; padding-right:5px;">
<option value="Access Site">Access Site</option>
<option value="Conservation Easement">Conservation Easement</option>
<option value="Depredation">Depredation</option>
<option value="Fish Hatchery">Fish Hatchery</option>
<option value="Other">Other</option>
<option value="WHA">WHA</option>
<option value="WHAS">WHAS</option>
<option value="WMA">WMA</option>
<option value="WMU">WMU</option>
</select></td>
</tr>
<tr>
<td>Owner: </td>
<td><select multiple name="Owner" id="Owner" style="padding-left:5px; padding-right:5px;">
<option value="BLM">U.S. Bureau of Land Management</option>
<option value="COE">U.S. Army Corps of Engineers</option>
<option value="County">County</option>
<option value="IDFG">Idaho Fish and Game</option>
<option value="IDL">Idaho Department of Lands</option>
<option value="IFWF">Idaho Fish and Wildlife Foundation</option>
<option value="ITD">Idaho Transportation Department</option>
<option value="Private">Private</option>
<option value="RMEF">Rocky Mountain Elk Foundation</option>
<option value="U of I">University of Idaho</option>
<option value="USBR">U.S. Bureau of Reclamation</option>
<option value="USFS">U.S. Forest Service</option>
<option value="USFWS">U.S.Fish Wildlife Services</option>
</select></td>
</tr>
<tr>
<td>Entitlement Type: </td>
<td><select multiple name="ADM_CODE" style="padding-left:5px; padding-right:5px;">
<option value="Agreement">Agreement</option>
<option value="Depredation">Depredation</option>
<option value="Easement">Easement</option>
<option value="Lease">Lease</option>
<option value="Permit">Permit</option>
<option value="Own">Own</option>
<option value="Will">Will</option>
</select></td>
</tr>
<tr>
<td>Acres: </td>
<td><input type="text" name="Acres" autocomplete="off" style="width:100px;"></td>
</tr>
<tr>
<td><input type="submit" id="submitButton" value=" Search"></td>
</tr>
<tr>
<td><input type="submit" value="Clear Results"> </td>
</tr>
</table>
</div>
dojo DataGrid html:(不要觉得这里有什么问题)
<div id="resultsPane" dojotype="dijit.layout.ContentPane" region="bottom" design="headline" overflow="hidden" gutters="false" splitter="true">
<table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" clientSort="true" rowSelector="20px" sortInfo="-4">
<thead>
<tr>
<th width="25" field="OBJECTID_1" formatter="makeZoomButton">
<img id="zoomImg" alt="+" src="images/magnifier.png">
</th>
<th width="auto" field="ACNO">Acquisition Number</th>
<th width="auto" field="Name">Property Name</th>
<th width="auto" field="Land_Type">Type of Property</th>
<th width="auto" field="Owner">Land Owner</th>
<th width="auto" field="ADM_CODE">Entitlement Type</th>
<th width="auto" field="Acres">Acres</th>
</tr>
</thead>
</table>
</div>
查询 JavaScript(我相信问题在于最后一个代码块 - “创建数据存储并绑定到网格”)。
function doQuery() {
//initialize query task
var query, queryTask;
var grid, store;
queryTask = new esri.tasks.QueryTask("https://fishandgame.idaho.gov/gis/rest/services/Data/IDFGManagedLands/MapServer/9");
//initialize query
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["ACNO", "Name", "Land_Type", "Owner", "ADM_CODE", "Acres"];
var theOwner = $( "#Owner option:selected" ).val();
//query.where = "Owner = " + theOwner;
var theWhere = "Owner = '" + theOwner + "'";
//alert(theWhere);
query.where = theWhere;
queryTask.execute(query, showResults);
}
function showResults(results) {
//alert(results.length);
var map = _maps[0];
map.graphics.clear()
//Highlight the features that have been returned.
var highlightSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230,0,0]),1);
//Obtain the results in the form of a FeatureSet.
var featureSet = results.features;
//alert(featureSet.length);
//Loop through each of the features returned, pull out the attributes, and add them to the item array.
var items = []; //all items to be stored in data store
for (var i=0, il=results.features.length; i<il; i++) {
var graphic = featureSet[i];
graphic.setSymbol(highlightSymbol);
map.graphics.add(graphic);
items.push(featureSet[i].attributes);
}
//Create data object to be used in store
var data = {
identifier: "OBJECTID_1", //This field needs to have unique values
label: "OBJECTID_1",
};
//Create data store and bind to grid.
store = new dojo.data.ItemFileReadStore({data: {items: data}});
grid.setStore(store);
//hideLoading();
}
【问题讨论】:
标签: javascript datagrid dojo