Dojo DataGrid вставляет изображение на основе данных JSON

Мои данные JSON следующие:

"items": [
{
    "batch": "sectionA",
    "full": "N",
    "numStudents": 2,
    "students": [
        {
            "name": "John",
            "married": "Y"

        },
        {
            "name": "Mary",
            "married": "N"
        }
    ]
},
{
    "batch": "sectionB",
    "full": "Y",
    "numStudents": 3,
    "students": [
        {
            "name": "John",
            "married": "Y"

        },
        {
            "name": "Mary",
            "married": "N"
        },
        {
            "name": "Sam",
            "married": "N"
        }
    ]
}

]

Я перебираю этот JSON и создаю DataGrid, где: item[].batch — это столбец заголовка. И item[].students[].name — это строки под столбцом. Этот JSON приведет к созданию DataGrid с 2 столбцами заголовков и 3 строками. В столбце 1 («Раздел A») будут заполнены только две ячейки под ним. Столбец 2 («Раздел B») с тремя заполненными ячейками.

Я могу отобразить это в сетке без каких-либо проблем. Но мне нужно добавить логику, где если: item[].students[].married = "Y", тогда я должен отобразить маленькое изображение рядом с именем студента в ячейке.

Точно так же, если item[].full = "Y", тогда я должен показать столбец заголовка другим цветом.

Какие-либо предложения ? В последнее время это гложет мой мозг


person user2093904    schedule 30.07.2013    source источник


Ответы (2)


взгляните на этот поток: Как добавить кнопку или изображения в сетка додзё

и

Сохранение изображения в сетке данных dojo

Я думаю, это может помочь решить вашу проблему.

С Уважением

person MiBrock    schedule 31.07.2013

Я обработал изображения в сетке данных додзё, изменив структуру, используемую для сетки. Что-то вроде фрагмента ниже. Это также позволяет вам изменить размер столбца сетки в соответствии с размером файла изображения, которое вы используете.

var marryflag;

(function() {
mygrid.list.structure = [    
{
   cells: [
              [
                {name: 'Married', width: '17%', field: "married",hidden: true,
                    formatter: function(inValue) {
                        marryflag = inValue;
                    } // end formatter function
                },
                {name: 'Name', width: '20px', field: "name",                        
                    formatter: function(inValue) {
                        this.customStyles.push("vertical-align:middle");
                        return "<img src=\"/url_path_to_image/" + inValue + "\" alt=\"" + inValue + "\" width=\"16px\" height=\"16px\" style=\"vertical-align: middle\" /> ";                           
                    }                       
                }
              ]
           ]
      }                                                                                                                                                                
];
})();
person user925406    schedule 01.08.2013