【问题标题】:Dojo dgrid - formatting a field based on another field in gridDojo dgrid - 根据网格中的另一个字段格式化字段
【发布时间】:2021-11-26 23:34:25
【问题描述】:

我正在使用 dgrid,我正在尝试在列上使用格式化程序,但我需要该格式化程序根据另一列的值返回值。密度列的值根据它是植物还是动物而有所不同。我还需要自动完成此操作而不是单击行/单元格

下面是处理 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;
    }

我一直在使用这个函数来尝试让一些东西工作,但我没有运气。

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;
    }

这是一个如何填充 dgrid 的示例

          /* 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);

【问题讨论】:

    标签: javascript dojo dgrid


    【解决方案1】:

    您可以使用 renderCell 函数根据行中的其他值呈现单元格。您可以像这样指定密度列:

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

    object 参数包含来自商店的行,因此您可以使用它来检查物种或王国。 您没有指定您正在使用的 dgrid 版本。在最新版本中,formatter 函数还包含 object 参数。检查文档以使用格式化程序或 renderCell 函数的正确参数:

    dgrid 1.2.1

    dgrid 0.3

    【讨论】:

    • 嗨,pgianna,谢谢。我正在使用 dgrid 和 ArcGIS Javascript API。 (v 4.17) 我开始倾向于 renderCell 但我不确定这是否是我需要的或如何使用它,所以我将更深入地研究这个函数!
    【解决方案2】:

    在 dgrid 列上使用 get 方法,您可以成功地根据另一列的值返回某些值

    {
            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+)"};}
            }
          },
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-08-24
      相关资源
      最近更新 更多