无法在dojo dataGrid中显示查询的功能

时间:2013-12-05 00:55:34

标签: javascript datagrid dojo

我正在创建一个Web地图应用程序,用户可以使用表单搜索查询图层要素,在这种情况下是土地属性,结果应该以两种方式显示: 1)符合搜索条件的属性功能将在地图上突出显示(我有这个工作) 2)满足搜索条件的每个属性的属性将在dojo dataGrid中列出。 (我无法让这个工作 - 我只是在我的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(); 
}

2 个答案:

答案 0 :(得分:0)

您没有将商品分配到商店。我认为你的代码应该是这样的,

store = new dojo.data.ItemFileReadStore({
  'identifier': 'OBJECTID_1',
  'label': 'OBJECTID_1',
  'items': items
})

答案 1 :(得分:0)

唯一标识符OBJECTID_1未包含在原始查询中。

将OBJECTID_1添加到query.outfields:

function doQuery() {
  //initialize query task
  var query, queryTask;
  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 = ["OBJECTID_1","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) {
  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;

  //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=featureSet.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",
    items:items
  };

  //Create data store and bind to grid.
  store = new dojo.data.ItemFileReadStore({ data:data });
  grid.setStore(store);
  hideLoading();
}