Как закрыть dojox.grid.DataGrid

У меня есть сетка, которая заполняется из события поиска, и я хотел бы иметь возможность закрыть сетку, просто добавив X в правом верхнем углу, аналогично тому, как вы закрываете любой браузер или окно. Я думал, что это будет так же просто, как добавить X, стилизовать его по своему вкусу, а затем создать событие onclick, которое закроет или скроет сетку... но я не могу заставить это работать. Любая помощь будет оценена по достоинству.

My JS is:

dojo.require("dojox.grid.DataGrid"); //FindTask
dojo.require("dojo.data.ItemFileReadStore"); //FindTask
dojo.require("esri.tasks.find"); //FindTask

var findTask, findParams;
var grid, store;
var searchExtent;

function doFind() {

            //Show datagrid onclick of search button and resize the map div.
            esri.show(datagrid);
            dojo.style(dojo.byId("content"), "height", "83%");
            searchExtent = new esri.geometry.Extent ({
            "xmin":-9196258.30121186,"ymin":3361222.57748752,"xmax":-9073959.055955742,"ymax":3442169.390441412,"spatialReference":{"wkid":102100}
            });

            map.setExtent(searchExtent);

    //Set the search text to the value in the box
    findParams.searchText = dojo.byId("parcel").value;
            grid.showMessage("Loading..."); //Shows the Loading Message until search results are returned.
    findTask.execute(findParams,showResults);
  }

  function showResults(results) {
    //This function works with an array of FindResult that the task returns
    map.graphics.clear();
    var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,194,204,0.5]));


    //create array of attributes
    var items = dojo.map(results,function(result){
      var graphic = result.feature;
      graphic.setSymbol(symbol);
      map.graphics.add(graphic);
      return result.feature.attributes;
    }); 

    //Create data object to be used in store
    var data = {
      identifier: "Parcel Identification Number",  //This field needs to have unique values. USES THE ALIAS!!!
      label: "PARCELID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
      items: items
    };

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

    //Zoom back to the initial map extent
    map.setExtent(searchExtent);

  }

  //Zoom to the parcel when the user clicks a row
  function onRowClickHandler(evt){
    var clickedTaxLotId = grid.getItem(evt.rowIndex).PARCELID;
    var selectedTaxLot;

    dojo.forEach(map.graphics.graphics,function(graphic){
      if((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId){
        selectedTaxLot = graphic;
        return;
      }
    });
    var taxLotExtent = selectedTaxLot.geometry.getExtent();
    map.setExtent(taxLotExtent);
  }

и мой HTML:

<div id ="datagrid" data-dojo-type="dijit.layout.AccordionPane" splitter="true" region="bottom"
        style="width:100%; height:125px;">
        <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
  <thead>
    <tr>
      <th field="Parcel Identification Number" width="10%">
                        Parcel ID
                    </th>
                    <th field="Assessing Neighbornood Code" width ="20%">
                        Neighborhood Code
                    </th>
                    <th field="Property Class Code" width="10%">
                        Property Class
                    </th>
                    <th field="Site Address" width="100%">
                        Address
                    </th>
    </tr>
  </thead>
</table>
    </div>

Это мое лучшее предположение, что добавить:

                <tr>
                <td align="right">
                    <div class="divOk" onclick="dijit.byId('tocDiv').hide();">
                        OK</div>
                </td>
            </tr>

dojo dojox.grid.datagrid
person Craig    schedule 19.12.2012    source источник
comment
я не вижу, что вы пытались достичь своей цели в коде.   -  person nozzleman    schedule 19.12.2012
comment
Отредактировано, чтобы включить мою попытку...   -  person Craig    schedule 19.12.2012

Ответы (2)


arrow_upward
1
arrow_downward

Я закончил работу над тем, что я хочу, создав новый столбец и поместив значок закрытия в заголовок. Я подключил его к функции, чтобы при нажатии сетка закрывалась, а размер карты изменялся:

function closeGrid() {
        esri.hide(datagrid);
        dojo.style("map", {"height": "100%"});
        }

HTML

<th field="" width="2%"> <div class="GridCloseIcon" title="Close Grid" onclick="closeGrid();"></div>
person Craig    schedule 03.01.2013

arrow_upward
0
arrow_downward

Как насчет этого? (при условии, что строка OK действительно появляется)

HTML

    <tr>
        <td align="right">
            <div class="divOk" onclick="hideGrid();">OK</div>
        </td>
    </tr>

JS

    function hideGrid() {
        var widget = dijit.byId('datagrid');
        dojo.fadeOut({
            node: widget.domNode
        }).play();

        dojo.style(widget.domNode, 'display', 'none');
    }
person nozzleman    schedule 19.12.2012
comment
ладно, уже интересно, как это будет. Я могу сказать вам, что декларативный экземпляр DataGrid является подделкой. На самом деле DataGrid состоит из различных div, но не из любой таблицы (как вы можете видеть, если вы посмотрите проанализированный исходный код). Думаю, самым простым способом было бы обернуть всю DataGrid в другую div, куда вы можете поместить свою X. В зависимости от вашего варианта использования, возможно, стоит подумать о том, чтобы показать вам DataGrid внутри dijit.Dialog-виджета... - person nozzleman; 20.12.2012