Добавление настраиваемого параметра в объект столбца для пользовательского форматирования slickgrid

Question

Мне нужны некоторые предложения относительно добавления настраиваемых свойств в объект Column в slickgrid. Вот некоторый сценарий, который я попытаюсь объяснить, чтобы сделать мой запрос проблемы понятным.

Я пытаюсь написать собственный форматировщик, который аббревиатуры и капитализирует имена городов, используя первые 4 символа исходного текста (я удалил другие правила, чтобы упростить эту проблему). Так, например, Шарлотта станет CHAR в форматировании. Я хочу сделать аналогичное форматирование в другом столбце строки, но мне нужно отобразить и загладить 5 символов.

Это то, что я пробовал.

Я написал собственный форматировщик и передал пользовательское свойство NumOfChar в объекте column. Это свойство доступно в объекте 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 определение состоит в том, чтобы загладить первую букву каждого слова), поэтому я обновил свой код и включил его, однако никаких параметров не требуется.