簡體   English   中英

Dojo dgrid - 根據網格中的另一個字段格式化一個字段

[英]Dojo dgrid - formatting a field based on another field in grid

我正在使用 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;
    }

我一直在使用這個 function 來嘗試讓一些東西工作,但我沒有運氣。

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

您可以使用 renderCell function 根據行中的其他值呈現單元格。 您可以像這樣指定密度列:

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

                    }
}

object 參數包含商店中的行,因此您可以使用它來檢查物種或王國。 您沒有指定正在使用的 dgrid 版本。 在最新版本中,格式化程序 function 還包含 object 參數。 檢查文檔以對格式化程序或 renderCell function 使用正確的參數:

分布式網格 1.2.1

網格 0.3

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM