基于 JSON 数据的 Dojo DataGrid 插入图像答案

【问题标题】：Dojo DataGrid inserting image based on JSON Data基于 JSON 数据的 Dojo DataGrid 插入图像
【发布时间】：2013-07-31 03:51:30
【问题描述】：

我的 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 是 Header 列。 item[].students[].name 是列下的行。此 JSON 将生成一个包含 2 个标题列和 3 行的 DataGrid。第 1 列（“SectionA”）下面只有两个单元格。第 2 列（“SectionB”）下填充了 3 个单元格。

我可以毫无问题地在网格中显示它。但我需要添加逻辑 if : item[].students[].married = "Y" 然后我必须在单元格中的学生姓名旁边显示一个小图像。

同样，如果 item[].full = "Y" 那么我必须以不同的颜色显示标题列。

有什么建议吗？这最近一直在咀嚼我的大脑

【问题讨论】：

标签： json dojo dojox.grid.datagrid

【解决方案1】：

看看这个帖子：How to add button or images to dojo grid

和

Storing image in dojo datagrid

我猜它可以帮助解决你的问题。

问候

【讨论】：

【解决方案2】：

我通过改变用于网格的结构来处理 dojo 数据网格中的图像。类似于下面的 sn-p。这还允许您将网格列的大小调整为您正在使用的图像文件的大小。

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\" /> ";                           
                    }                       
                }
              ]
           ]
      }                                                                                                                                                                
];
})();

【讨论】：