未捕获的TypeError：无法读取未定义的属性'formatter'

Question

When I try to open the tab this error comes in console and the grid is also not loaded.

Below are the methods for creating hyperlinks:

function genUrl(cellValue, rowId, rowData){
    return ("{!LEFT($CurrentPage.URL,FIND('/',$CurrentPage.URL,9))}" +rowData.siteId);
  }
  function genUrl4(cellValue, rowId, rowData){
    return ("{!LEFT($CurrentPage.URL,FIND('/',$CurrentPage.URL,9))}" + rowData.SiteActId);
  }
  function genUrl5(cellValue, rowId, rowData){
    return ("{!LEFT($CurrentPage.URL,FIND('/',$CurrentPage.URL,9))}" + rowData.AltSiteActId);
  }
  function urlTemplate6 () {
      return ({formatter:'dynamicLink',formatoptions:{url: genUrl6, target:"_blank"},
                        sorttype:"link", searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}});
  }
  function genUrl6(cellValue, rowId, rowData){
    return ("{!LEFT($CurrentPage.URL,FIND('/',$CurrentPage.URL,9))}" + "apex/CountryDetail?name="+rowData.AltSiteCountry);
  }

definition of what data format is in each column

cfg.colModel = [
      {name:'siteName',index:'siteName', template:urlTemplate()},
      {name:'SiteActName',index:'SiteActName',template:urlTemplate4()},
      {name:'FullrecTime',index:'FullrecTime',template:numberTemplate()},
      {name:'AltsiteName',index:'AltsiteName',template:urlTemplate5()},
          {name:'AltSiteBringUptime',index:'AltSiteBringUptime',template:integerTemplate()},
      {name:'AltSiteCountry',index:'AltSiteCountry',template:urlTemplate6()},

the method where the error shows

              // Common formatting options
              $.jgrid.formatter.integer.thousandsSeparator = ',';
              $.jgrid.formatter.number.thousandsSeparator = ',';
              $.jgrid.formatter.number.decimalSeparator = '.';
              $.jgrid.formatter.number.decimalPlaces = 0;
              $.jgrid.formatter.currency.thousandsSeparator = ',';
              $.jgrid.formatter.currency.decimalPlaces = 0;

              // set up some global variables for use across callbacks
              window.firstLoad = true;
              // The following two to be set when we start restoring saved column state
              window.myColumnsState;
              window.isColState = false;

              window.myDefaultSearch = 'cn';

              UserTableSettings.getTableCfg(cfg.storageItemName, function(result,event){
                if (event.status){
                  if (result != null) {
                    var savedColState = JSON.parse(result.tableCfg);
                    myColumnsState = restoreColumnState (cfg.colModel, savedColState);
                  } else {
                    myColumnsState = null;
                  }
                  isColState = typeof (myColumnsState) !== 'undefined' && myColumnsState !== null;
                  $(cfg.tableName).jqGrid({
                    datatype: "local",
                    sortable: true,
                    //index: cfg.index,
                    autowidth: true,
                    shrinkToFit: true,
                    ignoreCase: true,
                    pager:cfg.pager,
                    rownumbers: true,
                    viewrecords: true,
                    viewsortcols:[true,'horizontal',true],
                    gridview: true,
                    autoencode: true,
                    height:cfg.height,
                    caption: cfg.caption,
                    rowNum:cfg.initialRows,
                    rowList:[10,20,50,100,100000000],
                    page: isColState ? myColumnsState.page : 1,
                    search: isColState ? myColumnsState.search : false,
                    postData: isColState ? { filters: myColumnsState.filters } : {},
                    sortname: isColState ? myColumnsState.sortname : cfg.initialSort,
                    sortorder: isColState ? myColumnsState.sortorder : 'desc',
                    colNames: cfg.colNames,
                    colModel: cfg.colModel,
                    storageItemName: cfg.storageItemName, // Resilinc addition
                    loadComplete: function() {
                      $("option[value=100000000]").text('All');
                      if (firstLoad) {
                        firstLoad = false;
                        if (isColState) {
                          $(this).jqGrid("remapColumns", myColumnsState.permutation, true);
                        }
                      }
                      //saveColumnState.call($(this), $(this).jqGrid('getGridParam', 'storageItemName'), this.p.remapColumns);
                    },
                    resizeStop: function () {
                      saveColumnState.call($(this), $(this).jqGrid('getGridParam', 'storageItemName'), $(this)[0].p.remapColumns);
                    }
                  });

                  $(cfg.tableName).navGrid(cfg.pager,{edit:false,add:false,del:false,refresh:false},{},{},{},{multipleSearch:true,multipleGroup:true, showQuery: true});
                  $(cfg.tableName).filterToolbar({searchOperators : true});
                  $.extend(true, $.ui.multiselect, {
                    locale: {
                      addAll: 'Make all visible',
                      removeAll: 'Hide All',
                      itemsCount: 'Available Columns'
                    }
                  });
                  $(cfg.tableName).jqGrid('navButtonAdd', cfg.pager, {
                      caption: "Columns",
                      buttonicon: "ui-icon-calculator",
                      title: "Choose columns",
                      onClickButton: function () {
                          $(this).jqGrid('columnChooser',
                            {width: 550,
                             msel_opts: {dividerLocation: 0.5},
                             done: function (perm) {
                              if (perm) {
                                this.jqGrid("remapColumns", perm, true);
                                saveColumnState.call(this, this.jqGrid('getGridParam', 'storageItemName'), perm);
                              }
                             }
                            }
                          );
                          $("#colchooser_" + $.jgrid.jqID(this.id) + ' div.available>div.actions')
                              .prepend('<label style="float:left;position:relative;margin-left:0.6em;top:0.6em">Search:</label>');
                      }
                  });
                  $(cfg.tableName).jqGrid('navButtonAdd', cfg.pager, {
                          caption: "",
                          buttonicon: "ui-icon-closethick",
                          title: "Clear saved table settings",
                          onClickButton: function () {
                              removeObjectFromServerStorage(cfg.storageItemName);
                          }
                      });
                    if(typeof cfg.loadData !== 'undefined')
                     cfg.loadData();
                } else {
                  // add some code here to handle a failed JS Remoting call
                }
              }, {escape:false});

function integerTemplate () {
    return ({formatter: 'integer', align: 'right', sorttype: 'integer',
        searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'] }});

Answer 1

This in general means that a value is defined for the variable formatter . However, your code contains several places where this is used so we can't be sure about the exact problem.

Take a look at the line the debugger gives you and go from there.

Did you for example attach the right javascript files? Did you forget to set a value to the variable you try to use? Keep asking yourself this kind of questions when you come across this kind of problems.

Answer 2

$.jgrid.formatter.integer.thousandsSeparator

When this line runs you get Cannot read property 'formatter' of undefined . Which means the expression that comes before .formatter is undefined . That expression is $.jgrid .

So whatever is supposed to put things at $.jgrid isn't working. Is this a library you are using? Is that library included on the page and loading properly? If you can get that library to load, this will likely begin to work.