如何在 jquery-bootgrid 中显示图像
How to display image in jquery-bootgrid
我正在使用 jquery-bootgrid 来显示记录列表。
这些记录也有图像,但图像未按行显示。
有人知道如何按行显示图像吗?
您可以使用格式化程序来转换为图像标签:
$("#grid-data").bootgrid({
formatters: {
"imageCol": function(column, row) {
return "<img src='" + row.id + "' />";
}
}
});
其中 "imageCol" 是包含图像绝对路径的列。
您将不得不使用格式化程序。下面是一个例子。这里,数据是通过 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) 的操作,它们分别获取所有学生并获取学生的照片基于他或她的 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);
}
}
我正在使用 jquery-bootgrid 来显示记录列表。
这些记录也有图像,但图像未按行显示。
有人知道如何按行显示图像吗?
您可以使用格式化程序来转换为图像标签:
$("#grid-data").bootgrid({
formatters: {
"imageCol": function(column, row) {
return "<img src='" + row.id + "' />";
}
}
});
其中 "imageCol" 是包含图像绝对路径的列。
您将不得不使用格式化程序。下面是一个例子。这里,数据是通过 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) 的操作,它们分别获取所有学生并获取学生的照片基于他或她的 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);
}
}