如何使用 javaScript/JQuery/Hibernate/Spring 在数据库中的 jsGrid 中显示图像？答案

【问题标题】：How to show image in jsGrid from database using javaScript/JQuery/Hibernate/Spring?如何使用 javaScript/JQuery/Hibernate/Spring 在数据库中的 jsGrid 中显示图像？
【发布时间】：2016-01-31 16:52:48
【问题描述】：

我正在尝试从数据库中的 jsGrid 中显示图像。我尝试了以下代码。
.js 代码：

fields : [ {
    title : "Currency Code",
        name : "curr_code",
        type : "text",
        width : 35,
        filtering : false,
        editing : true,
        align : "center"
    },
    .....
    {
        title : "Symbol",
        name : "curr_symbol",
        type : "text",
        width : 35,
        filtering : false,
        editing : true,
        align : "center"
    },
    {
        type : "control",
        editButton : true,
        modeSwitchButton : true,
        deleteButton : true,
        width : 35
    } 
]

网格视图：

$.post('../../setupController/currencyGridView', function(obj) {
    for (var i = 0; i < obj.length; i++) {
        var currList = {
            "curr_id" : obj[i].currency_id,
            "curr_code" : obj[i].curr_code,
            "curr_desc" : obj[i].curr_desc,
            "curr_count" : obj[i].curr_country,
            "curr_symbol" : obj[i].symbol,
        }
        $("#currencygrid").jsGrid("insertItem", currList).done(
            function() {
            });
    }
});

控制器代码：

@RequestMapping(value = "/currencyGridView", method = RequestMethod.POST)
@ResponseBody
public List<Currency> currencyGridView() {
        List<Currency> currList = setupDao.currencyGridViewData();
        return currList;
}

现在它显示输出像this但不显示图像..

【问题讨论】：

标签： javascript jquery spring hibernate

【解决方案1】：

也许您可以覆盖该图像列的 itemTemplate 函数。

js itemTemplate: function(value, item) { return value; },

或者做一些自定义的行渲染：http://js-grid.com/demos/custom-row-renderer.html

【讨论】：

【解决方案2】：

您可以使用 itemTemplate。如果您有图片链接，您可以执行以下操作

    { 
    title: "Symbol",
    type: "text",
    width: 50,
    itemTemplate: function(value, item) {
        if(item.symbolId){
            return '<img src="/img/"'+ item.symbolId + '" "width="42" height="42">';
        }
        return '';
     }
    }

【讨论】：