如何在 jquery-bootgrid 中显示图像答案

【问题标题】：How to display image in jquery-bootgrid如何在 jquery-bootgrid 中显示图像
【发布时间】：2015-05-18 06:23:10
【问题描述】：

我正在使用 jquery-bootgrid 来显示记录列表。

这些记录也有图像，但图像不显示在行中。

有人知道如何按行显示图像吗？

【问题讨论】：

【解决方案1】：

您将不得不使用格式化程序。下面是一个例子。这里通过ajax从数据库中加载数据：

<table id="gridStudents" class="table table-condensed table-hover table-striped">
        <thead>
            <tr>
                <th data-column-id="StudentId" data-type="numeric" data-identifier="true">Student Id</th>
                <th data-column-id="FirstName">First Name</th>
                <th data-column-id="LastName">Last Name</th>
                <th data-column-id="Photo" data-formatter="pix">Photo</th>
            </tr>
        </thead>
</table>

然后，在您的 javascript 中，执行以下操作（假设您有一个名为 Student 的控制器和两个名为 getStudents 和 getPhoto(int StudentId) 的操作，它们分别获取所有学生并根据他或她的学生身份）：

$(function () {  
    var jqxhr = $.ajax({
         url: 'Student/getStudents',
         type: 'POST'
    });
    jqxhr.done(function (data, textStatus, jqXHR) {
        $("#gridStudents").bootgrid({
            caseSensitive: false,
            selection: true,
            multiSelect: true,
            formatters: {                    
                "pix": function (column, row) {
                    return "<img src=\"Student/getPhoto/" + row.StudentId + "\" />";
                    }
                }
        }).bootgrid("append", data)
    });
});

下面是服务器端的样子。这里照片以二进制数据的形式存储在数据库中名为 Photo 的字段中，另一个名为 ContentType 的字段存储内容类型（image/jpeg、image/png 等）：

[Authorize]
public class StudentController : Controller
{ 
    .... //your other stuff....

    [HttpPost]
    public JsonResult getStudents()
    {
        var data = db.Students.ToList();
        return Json(data, JsonRequestBehavior.AllowGet);
    }

    public ActionResult getPhoto(int StudentId)
    {
        var student = db.Students.Find(StudentId);
        return File(student.Photo, student.PhotoContentType);
    }

}

【讨论】：

【解决方案2】：

您可以使用格式化程序来转换为图像标签：

$("#grid-data").bootgrid({
    formatters: {
        "imageCol": function(column, row) {
             return "<img src='" + row.id + "' />";
        }
    }
});

其中“imageCol”是保存图像绝对路径的列。

【讨论】：

数据应该是动态绑定的，我该怎么做呢？我想从模态绑定数据。