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