为自定义格式化器slikgrid的列对象添加自定义参数

Adding custom parameter to column object for custom formatter slickgrid

本文关键字：自定义 对象 添加 参数 slikgrid 格式化      更新时间：2023-09-26

我需要一些关于在光滑网格中添加自定义属性到Column对象的建议。以下是我将尝试解释的特定场景，以使我的问题陈述清楚。

我正在尝试编写一个自定义格式化程序，它使用原始文本的前4个字符缩写和大写城市的名称(我已经删除了其他规则，使这个问题易于解释)。例如，在格式化程序中，Charlotte将变成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 } , ...
              ];

谢谢。

是的，这很容易做到，我做了它并测试了它，如预期的那样工作。首先，我制作了自定义格式化程序，请注意，我将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
这给了我一个标题大小写格式化器的想法(标题大小写定义是大写每个单词的第一个字母)，所以我更新了我的代码，包括它，不需要任何选项。

相关文章：