为自定义格式化程序 slickgrid 添加自定义参数到列对象答案

【问题标题】：Adding custom parameter to column object for custom formatter slickgrid为自定义格式化程序 slickgrid 添加自定义参数到列对象
【发布时间】：2014-03-24 21:36:21
【问题描述】：

我需要一些关于向 slickgrid 中的 Column 对象添加自定义属性的建议。这是某些情况，我将尝试解释以使我的问题陈述清楚。

我正在尝试编写一个自定义格式化程序，它使用原始文本的前 4 个字符将城市名称缩写和大写（我已经删除了其他规则以使这个问题易于解释）。因此，例如，夏洛特将在格式化程序中成为 CHAR。我想对不同的字符串列进行类似的格式化，但我需要显示并大写 5 个字符。

这是我尝试过的。

我编写了一个自定义格式化程序并在列对象中传递了自定义属性“NumOfChar”。此属性可在格式化程序的 ColumnDef 对象中访问。我很想知道这种方法是否正确且可以接受，或者有更好的方法来实现这一点。

AbbreviationFormatter = function(row, cell, value, columnDef, dataContent) {
   var output = ''; 

   if(! columnDef.NumOfChar) {
       columnDef.NumOfChar = 4 // sets default 
   } 
   if(value) {
      output = value.substring(0, columnDef.NumOfChar).toUpperCase();
   }

   return output;
}

列定义中的某处

var columns = [ { id: 'id_1', 
                  field='city', 
                  name='city', 
                  formatter: AbbreviationFormatter, 
                  NumOfChar: 4 },
                { id: 'id_2', 
                  field='randomString', 
                  name='randomString', 
                  formatter: AbbreviationFormatter, 
                  NumOfChar: 6 } , ...
              ];

谢谢。

【问题讨论】：

标签： javascript slickgrid formatter

【解决方案1】：

是的，这很容易实现，我制作并测试了它，按预期工作。首先我制作了自定义格式化程序，请注意我将 SlickGrid 格式化程序扩展为一个单独的文件，这总是更好，所以这里是自定义格式化程序的代码：

// Extend the Slick.Formatters Object
(function ($) {
    // register namespace
    $.extend(true, window, {
        "Slick": {
            "Formatters": {                
                "CustomUpper": CustomUpperFormatter,
                "TitleCase": TitleCaseFormatter
            }
        }
    });

    // --
    // Capitalize number of chars defined by user
    function CustomUpperFormatter(row, cell, value, columnDef, dataContext) {
        //console.debug(columnDef.formatterOptions.NumOfChar);
        var nbChar = columnDef.formatterOptions.NumOfChar;
        var output = value.substring(0, nbChar).toUpperCase() + value.substring(nbChar);

        return value ? output : '';
    }

    // Capitalize first char of each word
    function TitleCaseFormatter(row, cell, value, columnDef, dataContext) {
        var output = value.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});

        return value ? output : '';
    }       
})(jQuery);

然后是你的新列定义：

// your column definition
var columns = [ { id: 'id_1', 
                  field='city', 
                  name='city', 
                  formatter: Slick.Formatters.CustomUpper, 
                  formatterOptions: { NumOfChar: 4 } },
                { id: 'id_2', 
                  field='randomString', 
                  name='randomString', 
                  formatter: Slick.Formatters.CustomUpper, 
                  formatterOptions: { NumOfChar: 4 } } ,
                { id: 'id_3', 
                  field='randomString', 
                  name='randomString', 
                  formatter: Slick.Formatters.TitleCase }, ...
              ];

所以基本上你可以用你想要的名字添加你想要的任何属性，你只需在格式化程序中使用columnDef属性调用它，所以如果你在自定义格式化程序中执行console.debug(columnDef);，你会看到所有你的行的属性。就是这样：）

注意：
请注意，我为formatterOptions 创建了一个对象，但它实际上可以直接是NumOfChar，如果您在实际开始代码时采用这种方法，那么只需调用columnDef.NumOfChar。我更喜欢使用对象的原因是我可以传递多个选项，例如具有最小和最大字符数......

注意 #2
这让我想到了 Title Case 格式化程序（Title Case 定义是将每个单词的第一个字母大写），所以我更新了我的代码以包含它，但不需要任何选项。

【讨论】：