在 wijgrid for MVC 中显示图片列

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;
    }

运行截图：