2012-06-19 6 views
1

Я уже занимался своими исследованиями, я знаю, как создать пользовательский форматировщик или редактор и как его использовать. Моя проблема в том, что я не могу настроить или использовать форматтер. Моя структура:Как настроить форматы в SlickGrid?

JQuery включает в себя:

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 


    <script type="text/javascript" src="jquery.event.drag-2.2.js"></script> 
    <script type="text/javascript" src="slick.core.js"></script> 
    <script type="text/javascript" src="slick.editors.js"></script> 
    <script type="text/javascript" src="slick.formatters.js"></script> 
    <script type="text/javascript" src="slick.grid.js"></script> 

Все неотредактированным выше. Код реализации сетки:

     var grid; var cols; var rows; var options = { 
          enableCellNavigation: true, 
          enableColumnReorder: false, 
          forceFitColumns: true 
         }; 
*rows and cols come from server side via JSON.parse* 
grid = new Slick.Grid("#results", rows, cols, options); 

код, который приходит от сервера и заполняет переменную строк и COLS является в основном это:

  cols: 
      echo json_encode('[ 
        {"id":"price",  "name":"Ár",    "field":"price"}, 
        {"id":"location", "name":"Elhelyezkedés",  "field":"location"}, 
        {"id":"egyeb",  "name":"Lófasz",   "field":"egyeb"}, 
        {"id":"pic",  "name":"Képek",    "field":"pic", "formatter":"Slick.Formatters.PercentComplete"} 
       ]'); 
      rows: 
      echo json_encode('[ 
        {"price": "5", "location":"AlsóBélaCsecselény",  "egyeb":"lófasz", "pic":"1", "link":"ezittahelye"}, 
        {"price": "6", "location":"qrsóBéqrcselény",  "egyeb":"lófasz", "pic":"2", "link":"ezittahelye"}, 
        {"price": "7", "location":"AlsóBélaqwqwrelény",  "egyeb":"lófasz", "pic":"3", "link":"ezittahelye"}, 
        {"price": "8", "location":"qwrCsecselény",   "egyeb":"lófasz", "pic":"4", "link":"ezittahelye"} 
       ]'); 

Все отлично работает, когда колонна ПИК делает не имеет форматирования, а сетка работает с дополнительными свойствами для столбцов, например, с теневым тегом «formatter» (например, «fformatter» или что-то еще),

, но Javascript дает мне следующую ошибку каждый раз, когда Код JSON h как свойство «форматировочной»:

Uncaught исключение: TypeError: «getFormatter (строка, м)» не является функцией

каждый проклятый раз, когда я пытаюсь загрузить таблицу, то форматтеры испортите все, и я дон Не знаю, что делать дальше! Я попытался проследить обратно ошибку, и это привело меня к 1124. строке исходного кода slick.grid.js, эта функция как-то ломает все с обратным утверждением ..

function getFormatter(row, column) { 
    var rowMetadata = data.getItemMetadata && data.getItemMetadata(row); 

    // look up by id, then index 
    var columnOverrides = rowMetadata && 
     rowMetadata.columns && 
     (rowMetadata.columns[column.id] || rowMetadata.columns[getColumnIndex(column.id)]); 

    return (columnOverrides && columnOverrides.formatter) || 
     (rowMetadata && rowMetadata.formatter) || 
     column.formatter || 
     (options.formatterFactory && options.formatterFactory.getFormatter(column)) || 
     options.defaultFormatter; 
} 

Любая помощь будет оценили!

Edit: Вот как я получаю код с сервера:

      $.post("queries.php?event=search&&phase=columns", $("#full_search").serialize(), function(data){ 
            cols = JSON.parse(data); 
            alert(cols[1].id); 
            $.post("queries.php?event=search&&phase=rows", $("#full_search").serialize(), function(data){ 
             rows = JSON.parse(data); 
             alert(rows[1].link); 
             grid = new Slick.Grid("#results", rows, cols, options); 
             alert(grid.getData().length); 
             return false; 
            },"json"); 
           return false; 
          },"json"); 
          },"json"); 

ответ

2

Slick.Formatters.PercentComplete не должна быть строка. Это функция (конструктор классов), определенная в slick.formatters.js.

+0

отредактировал сообщение, чтобы показать, как я получаю JSON через почтовый звонок. Есть ли способ обойти это? Если я отброшу апострофы из «Slick.Formatters.PercentComplete», тогда скрипт дыры сломается на линии JSON.parse. –

+0

Измените «formatter»: «Slick.Formatters.PercentComplete» на «formatter»: Slick.Formatters.PercentComplete. – Tin

+0

, тогда скрипт дыры сломается на линии JSON.parse .. есть ли способ обойти это? Я не уверен, как еще я должен отправлять код JSON через почтовый запрос –

0

Для пользователей с данными, поступающими через JSON, вызов объекта все равно должен быть заключен в кавычки; однако, я был в состоянии найти в файле slick.grid.js ту часть, где он был тартальный:

if (d) { 
    if(m.formatter){m.formatter=eval(m.formatter)} // make it an object call instead of string 
    stringArray.push(getFormatter(row, m)(row, cell, value, m, d)); 
} 
2

Alright I solved it! I parsed the data, and then set the formatter string to an object: cols = JSON.parse(data); cols[3].formatter = Slick.Formatters.PercentComplete; and that does it! Thank you for your help!

Я хотел бы предложить что-то вроде этого.

Slick.Formatters.PercentComplete - это функция, и в json нет функций, как показано на рисунке http://json.org. Кроме того, проверка не выполняется в JSON, который имеет функцию. Вы можете попробовать проверить: http://jsonlint.com/.

У вас не может быть функций в JSON. Затем, получив данные «почти JSON», вам нужно разобрать его на клиенте с помощью javascript, как и вы.

Спасибо за образец! У меня такая же проблема, и это было полезно.

В моем случае я получаю метаданные с JQuery Ajax:

req = $.ajax({type: 'GET', 
       url: url, 
       dataType: 'json', 
       async: false}).done(function(meta) { metadata = meta; }); 

метаданные вернулся что-то вроде этого:

{"errors":{}, 
"columns":[{"formatter":"TaskNameFormatter", 
      "field":"1", 
      "id":"1","width":220,"name":"Hierarchy1","cssClass":"cell-title"}, 
      OTHERS_COLUMNS]} 

Осознайте, что форматировщик еще строка. Затем я просматриваю все столбцы, изменяя форматировщик от String до Function с помощью этого кода: