Question

我需要一些有关向slickgrid中的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 } , ...
              ];

感谢。

Answer 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定义是将每个单词的首字母大写），所以我更新了我的代码以包含它，但是不需要任何选项。

将自定义参数添加到自定义格式化程序slickgrid的列对象

1 个答案: