Dojo dgrid - 根据网格中的另一个字段格式化一个字段

Question

I am working with a dgrid and I am trying to use a formatter on a column but I need that formatter to return values based on the values of another column. The values for the density column are different based on whether or not it is a plant or animal. I also need this to be done automatically versus on a row/cell click

Below is the section of code that handles the dgrid

/* Dojo  dgrid */
    var resultsGrid = declare([Grid, Selection, ColumnResizer]);
    var columns = [{
       label: "Object ID", 
       field: "OBJECTID",
       sortable: false,
       },{
        label: "Observer Name",
        field: "OBSERVER"
      }, {
        label: "Observation Date",
        field: "DAY",
        formatter: formatTimestamp
      }, {
        label: "Latitude",
        field: "LATITUDE"
      }, {
        label: "Longitude",
        field: "LONGITUDE"
      }, {
        label: "Common Name",
        field: "Q_NAME"
      }, {
        label: "Genus",
        field: "GENUS"
      }, {
        label: "Species",
        field: "SPECIES"
      }, {
        label: "Kingdom",
        field: "KINGDOM",
        formatter: numberToTextKingdom
      },{
        label: "Area",
        field: "OB_AREA",
        formatter: numberToTextArea
      }, {
        label: "Density",
        field: "OB_DENSITY",
        formatter: getDensity
      }, {
        label: "County",
        field: "COUNTY"
      }, {
        label: "State",
        field: "STATE"
      }, {
        label: "Country",
        field: "COUNTRY"
      }, {
        label: "Date Added",
        field: "ADD_DATE",
        formatter: formatTimestamp
      }];

    grid = new resultsGrid({
      bufferRows: Infinity,
      columns: columns,
      selectionMode: 'single'
    }, "grid");

    /* Formatters for Columns */

    function formatTimestamp(value) {
     var inputDate = new Date(value);
     return dojo.date.locale.format(inputDate, {
       selector: 'date',
       datePattern: 'MM/dd/yyyy'
     });
    }

    function numberToTextArea(value) {
      var outText = "";
      if (value == 0) outText = "NA";
      if (value == 1) outText = "Individual/few/several";
      if (value == 2) outText = "< 1,000 square feet (half tennis court)";
      if (value == 3) outText = "1,000 square feet to 0.5 acre";
      if (value == 4) outText = "0.5 acre to 1 acre (football field w/o end zones)";
      if (value == 5) outText = "> 1 acre";
      return outText;
    }

    function numberToTextDensityPlants(value) {
      var outText = "";
      if (value == 0) outText = "NA";
      if (value == 1) outText = "Sparse (scattered individual stems or very small stands)";
      if (value == 2) outText = "Patchy (a mix of sparse and dense areas)";
      if (value == 3) outText = "Dense (greater than 40% of the area)";
      if (value == 4) outText = "Monoculture (nearly 100% of area)";
      return outText;
    }

    function numberToTextDensityAnimal(value) {
      var outText = "";
      if (value == 0) outText = "NA";
      if (value == 1) outText = "Few (<5)";
      if (value == 2) outText = "Many (5+)";
      return outText;
    }

I have been working with this function to try and get something to work but I have had no luck.

var sKingdom = "";
    grid.on("dgrid-select", function (evt) {
        let cell = grid.cell(evt);
        sKingdom = cell.row.data.Kingdom;
    });

    dPlantDensities = {0:"NA", 1:"Sparse (scattered individual stems or very small stands)", 2:"Patchy (a mix of sparse and dense areas)", 3:"Dense (greater than 40% of the area)", 4:"Monoculture (nearly 100% of area)"};
    dAnimalDensities = {0:"NA", 1:"Few (<5)", 2:"Many (5+)"};

    function getDensity(event) {
        var outText = "";
        if (KINGDOM == 0) {
            if (value == 0) outText = dPlantDensities[0];
            else if (value == 1) outText = dPlantDensities[1];
            else if (value == 2) outText = dPlantDensities[2];
            else if (value == 3) outText = dPlantDensities[3];
            else if (value == 4) outText = dPlantDensities[4];
        } else {
            if (value == 0) outText = dAnimalDensities[0];
            else if (value == 1) outText = dAnimalDensities[1];
            else if (value == 2) outText = dAnimalDensities[2];
        }
        return outText;
    }

This is an example of how the dgrid is populated

          /* Populate DGrid Table at bottom of page with query results*/
      var items = prjResults
      var TableFeatures = []
      array.forEach(items, function (feature) {
       var TableAttributes = {}
       var TableFields = Object.keys(feature.attributes)
       for (var i = 0; i < TableFields.length; i++) {
           TableAttributes[TableFields[i]] = feature.attributes[TableFields[i]]
       }
       TableFeatures.push(TableAttributes)
      })

      var memStore = new Memory({
        data: TableFeatures,
        idProperty: "OBJECTID"
      });

      grid.set("collection", memStore);
      grid.set("sort", "OBJECTID", true) // sorts objectID column - shows most recent 1st
      grid.on("dgrid-select", selectedOBS);
      grid.on('dgrid-deselect', clearonChange);

Answer 1

You can use the renderCell function to render a cell based on other values in the row. You could specify the density column like this:

{
        label: "Density",
        field: "OB_DENSITY",
        renderCell: function(object, value, node) {

                    }
}

The object parameter contains the row from the store, so you can use it to check the species or the kingdom. You do not specify the version of dgrid you are using. In the latest version, the formatter function also includes the object parameter. Check the documentation to use the correct parameters for the formatter or renderCell function:

dgrid 1.2.1

dgrid 0.3

Answer 2

Using the get method on the dgrid column, you are able to successfully return certain values based on the values of another column

{
        label: "Density",
        field: "OB_DENSITY",
        get: function(obj){
          if (obj.KINGDOM == 0) {if (obj.OB_DENSITY == 0) {return "NA"};}
          if (obj.KINGDOM == 0) {if (obj.OB_DENSITY == 1) {return "Sparse (scattered individual stems or very small stands)"};}
          if (obj.KINGDOM == 0) {if (obj.OB_DENSITY == 2) {return "Patchy (a mix of sparse and dense areas)"};}
          if (obj.KINGDOM == 0) {if (obj.OB_DENSITY == 3) {return "Dense (greater than 40% of the area)"};}
          if (obj.KINGDOM == 0) {if (obj.OB_DENSITY == 4) {return "Monoculture (nearly 100% of area)"};}
          if (obj.KINGDOM == 1) {if (obj.OB_DENSITY == 0) {return "NA"};}
          if (obj.KINGDOM == 1) {if (obj.OB_DENSITY == 1) {return "Few (<5)"};}
          if (obj.KINGDOM == 1) {if (obj.OB_DENSITY == 2) {return "Many (5+)"};}
        }
      },