ComponentOne 为 ASP.NET 平台提供的控件除了 Studio for ASP.NET Wijmo 套包外，还为 ASP.NET MVC 应用程序提供了一套基于 jQuery 的前端控件集合，今天我们就来看看 wijgrid 控件中显示图片的实现方法。
主要思路是在创建 wijgrid 的 columns 对象时，指定列的 cellFormatter 方法，并在该方法中完成所需的单元格数据格式设置。
首先，在VS2010中创建 ASP.NET MVC 应用程序，模板选择 ASP.NET MVC 3 Wijmo Application（说明：在VS2012中还提供了 ASP.NET MVC 4 Wijmo Application 模板）
创建完成之后打开 Views/Shared目录下的 _Layout.cshtml 文件，可以看到该页面中已经添加了 wijmo 相关的css和js库。同时，我们需要对该文件进行一点小改动，在 <head> 区域中添加这样一行代码：@RenderSection("header", false)
<head><title>@ViewBag.Title</title><link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /><!--jQuery References--><script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script><!--Theme--><link href="http://cdn.wijmo.com/themes/sterling/jquery-wijmo.css" rel="stylesheet" type="text/css" title="sterling-jqueryui" /><!--Wijmo Widgets CSS--><link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.0.min.css" rel="stylesheet" type="text/css" /><!--Wijmo Widgets JavaScript--><script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.3.0.min.js" type="text/javascript"></script><script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.0.min.js" type="text/javascript"></script><script src="http://cdn.wijmo.com/external/cultures/globalize.cultures.js" type="text/javascript"></script>@RenderSection("header", false)</head>
接下来打开 Views/Home 目录下的 Index.cshtml 文件，在该页面中添加以下代码：
@{ViewBag.Title = "Grid 显示图片";}@section header{<script id="scriptInit" type="text/javascript">$(document).ready(function () {$("#demo").wijgrid({allowSorting: true,columns: [{cellFormatter: function (args) {if (args.row.type & $.wijmo.wijgrid.rowType.data) {args.$container.empty().append($("<img />").attr("src", args.row.data[0]));}return true;}},{ dataType: "currency" },{ dataType: "number" },{ dataType: "number", dataFormatString: "p0" },{ dataType: "boolean" }]});});</script>}<h2>wijgrid</h2><div class="main demo"><!-- Begin demo markup --><table id="demo"><thead><tr><th>Icon</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th><th>Discontinued</th></tr></thead><tbody><tr><td>/images/logo.gif</td><td>14</td><td>12</td><td>0</td><td>false</td></tr><tr><td>/images/logo.gif</td><td>9.8</td><td>10</td><td>0</td><td>false</td></tr><tr><td>/images/logo.gif</td><td>34.8</td><td>5</td><td>0</td><td>false</td></tr><tr><td>/images/logo.gif</td><td>18.6</td><td>9</td><td>0</td><td>false</td></tr><tr><td>/images/logo.gif</td><td>12.1</td><td>5</td><td>0.5</td><td>true</td></tr></tbody></table><h4>Original Data</h4><table id="demo1"><thead><tr><th>Icon</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th><th>Discontinued</th></tr></thead><tbody><tr><td>/images/logo.gif</td><td>14</td><td>12</td><td>0</td><td>false</td></tr><tr><td>/images/logo.gif</td><td>9.8</td><td>10</td><td>0</td><td>false</td></tr><tr><td>/images/logo.gif</td><td>34.8</td><td>5</td><td>0</td><td>false</td></tr><tr><td>/images/logo.gif</td><td>18.6</td><td>9</td><td>0</td><td>false</td></tr><tr><td>/images/logo.gif</td><td>12.1</td><td>5</td><td>0.5</td><td>true</td></tr></tbody></table><!-- End demo markup --></div>
需要注意的是，在设置 columns 属性时，我们为第一列指定了cellFormatter方法，并在该方法中显示图片：
cellFormatter: function (args) {if (args.row.type & $.wijmo.wijgrid.rowType.data) {args.$container.empty().append($("<img />").attr("src", args.row.data[0]));}return true;}
运行截图：
源码下载：VS2010 + ComponentOne Studio for ASP.NET Wijmo 2013V1
