65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET MVC HTML Helper for the jqGrid

Rui Inacio
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.91/5 (21投票s)

2012年7月19日

CPOL

3分钟阅读

viewsIcon

211331

downloadIcon

12894

MvcJqGrid 是一个 HTML 辅助器，极大地简化了使用 Razor 视图引擎或 MVC WebForms 在 MVC 3 中实现 jqGrid 的过程。

引言

jqGrid 是一个功能强大的网格，拥有许多特性，但免费版本必须使用 JavaScript 开发。 如果您正在使用 MVC 进行开发，拥有一个免费的 HTML 辅助器将会很棒。 这就是 MvcJqGrid 的作用所在。

MvcJqGrid 是一个 HTML 辅助器，极大地简化了使用 Razor 视图引擎或 MVC WebForms 在 MVC 3 中实现 jqGrid 的过程。 

MvcJqGrid 在 nuget gallery 上可用，可以使用程序包管理器控制台将其安装在您的项目中。

PM> Install-Package MvcJqGrid

也可以通过在 Visual Studio 中右键单击“引用”节点并选择“管理 NuGet 程序包”将其添加到您的项目中。 更多信息请参阅 使用对话框管理 NuGet 程序包。

要使用 MvcJqGrid，请在视图中包含命名空间。

@using MvcJqGrid

或者在 system.web.webPages.razor 部分的命名空间中的 *web.config* 中。

一个简单的例子：

@(Html.Grid("CustomerGrid")
    .SetCaption("Customers")
    .AddColumn(new Column("CustomerId").SetLabel("Id"))
    .AddColumn(new Column("Name"))
    .AddColumn(new Column("Company"))
    .SetUrl(Url.Action("List","Customer"))
    .SetAutoWidth(true)
    .SetRowNum(10)
    .SetViewRecords(true)
    .SetPager("pager"))

HTML 具有自解释性

  • Html.Grid("CustomerGrid") - 创建 ID 为 CustomerGrid 的网格
  • SetCaption - 设置网格标题
  • AddColumn - 将列添加到网格
  • SetUrl - 返回 jqGrid 格式的 json 的 Action 和 Controller 
  • SetLabel - 设置网格中显示的列的标签

网格的简单 MVC 控制器是

public ActionResult List(GridSettings gridSettings)
{
   CustomerRepository repository = new CustomerRepository();
   string name = string.Empty;
   string company = string.Empty;
            
   if (gridSettings.IsSearch)
   {
       name = gridSettings.Where.rules.Any(r => r.field == "Name") ? 
              gridSettings.Where.rules.FirstOrDefault(r => r.field == "Name").data : string.Empty;
       company = gridSettings.Where.rules.Any(r => r.field == "Company") ? 
       gridSettings.Where.rules.FirstOrDefault(r => r.field == "Company").data : string.Empty;
   }

   var customers = repository.List(name, company, gridSettings.SortColumn, gridSettings.SortOrder);
   int totalCustomers = customers.Count;
   var jsonData = new
   {
        total = totalCustomers / gridSettings.PageSize + 1,
        page = gridSettings.PageIndex,
        records = totalCustomers,
        rows = (
                from c in customers
                select new
                {
                    id = c.CustomerID,
                    cell = new[]
                    {
                        c.CustomerID.ToString(),
                        string.Format("{0} {1}", c.FirstName, c.LastName),
                        c.CompanyName,
                        c.EmailAddress
                    }
        }).ToArray()
    };

    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

一个更复杂的示例，包含用于编辑和删除等操作的列是

@(Html.Grid("CustomerGrid")
    .SetCaption("Customers")
    .AddColumn(new Column("CustomerId").SetLabel("Id").SetSearch(false))
    .AddColumn(new Column("Name"))
    .AddColumn(new Column("Company"))
    .AddColumn(new Column("EmailAddress").SetLabel("Email Address").SetSearch(false))
    .AddColumn(new Column("Last Modified").SetSearch(false))
    .AddColumn(new Column("Telephone").SetSearch(false))
    .AddColumn(new Column(" ").SetSearch(false).SetCustomFormatter("buttonize").SetWidth(60).SetAlign(Align.Right))
    .SetUrl(Url.Action("List","Customer"))
    .SetAutoWidth(true)
    .SetRowNum(10)
    .SetRowList(new[] { 10, 15, 20, 50 })
    .SetViewRecords(true)
    .SetPager("pager")
    .SetSearchToolbar(true)
    .SetSearchOnEnter(false)) 

其中 buttonize 是一个 JavaScript 函数，用于返回操作列的 Html。

function buttonize(cellvalue, options, rowobject) {
     return '<a href="http://xprog.blogspot.com">eXtreme Programming</a>';
 }

在更高级的场景中，首选的请求类型应该是 POST，因为默认是 GET。 SetRequestType 方法允许定义请求类型。 上面的示例使用一个数组，该数组必须以与列定义相同的顺序返回值。 一种更通用的解决方案是返回一个具有命名属性的 JSON 对象。 MvcJqGrid 通过 SetJsonReader 方法支持此方案。 SetJsonReader 方法用于配置网格 jsonReader，以便 JSON 数据不必与 jqGrid 的列模型 (ColModel) 顺序匹配。 另一个高级功能是能够使用不同的搜索类型在每个所需的列中进行搜索。 SetSearchType 设置列的搜索类型。 搜索类型可以是

  • 输入 (默认)
  • 选择。 SetSearchTerms 方法接收定义选择选项的字符串集合。
  • 日期选择器。 SetSearchDateFormat 方法允许定义日期格式。

要启用工具栏搜索，必须将 SetSearchToolbar 设置为 true。 SetSearchOnEnter 用于定义搜索执行的时间

  • true：当用户按下 Enter 键时执行搜索
  • false：用户停止输入后执行搜索

SetRowList 在网格的寻呼器中创建一个下拉列表，其中包含每页指定的行数。

现在我们可以使用 customer 类创建一个示例。 视图

<div style="width: 900px;">
@(Html.Grid("customerGrid")
    .SetRequestType(RequestType.Post)
    .SetJsonReader(new MvcJqGrid.DataReaders.JsonReader { Id="id", RepeatItems = false})
    .SetCaption("Customers")
    .AddColumn(new Column("FirstName").SetWidth(100).SetLabel("First Name"))
    .AddColumn(new Column("LastName").SetWidth(100).SetLabel("Last Name"))
    .AddColumn(new Column("CountryName").SetLabel("Country")
                          .SetSearchType(Searchtype.Select)
                          .SetSearchTerms((string[])ViewBag.Countries))
    .AddColumn(new Column("Phone").SetWidth(100))
    .AddColumn(new Column("BirthDate").SetWidth(80).SetSearchType(Searchtype.Datepicker)
                          .SetSearchDateFormat("yy-mm-dd"))
    .AddColumn(new Column(" ").SetSearch(false).SetCustomFormatter("buttonize")
                                    .SetWidth(25)
                                    .SetAlign(Align.Right))
    .SetUrl(Url.Action("Search", "Customer"))
    .SetAutoWidth(true)
    .SetRowNum(10)
    .SetRowList(new[] { 10, 15, 20, 50 })
    .SetViewRecords(true)
    .SetPager("pager")
    .SetSearchToolbar(true).SetSearchOnEnter(false)     
    )
</div>

返回带有命名属性的 JSON 的控制器

public class CustomerController : Controller
{
    public ActionResult Index()
    {
        var countries = new CountryRepository().Search();
        ViewBag.Countries = (from c in countries select c.Name).ToArray();
        return View();
    }

    public JsonResult Search(GridSettings gridSettings)
    {
        List<CustomerSearchResult> customers = null;
        int totalRecords;
        CustomerRepository customerRepository = new CustomerRepository();
            
        CustomerSeachFilter filter = new CustomerSeachFilter();
        if (gridSettings.IsSearch)
        {
            filter.FirstName = gridSettings.Where.rules.Any(r => r.field == "FirstName") ? 
                    gridSettings.Where.rules.FirstOrDefault(r => r.field == "FirstName").data : string.Empty;
            filter.LastName = gridSettings.Where.rules.Any(r => r.field == "LastName") ? 
                    gridSettings.Where.rules.FirstOrDefault(r => r.field == "LastName").data : string.Empty;
            filter.CountryName = gridSettings.Where.rules.Any(r => r.field == "CountryName") ? 
                    gridSettings.Where.rules.FirstOrDefault(r => r.field == "CountryName").data : string.Empty;
            filter.Phone = gridSettings.Where.rules.Any(r => r.field == "Phone") ? 
                    gridSettings.Where.rules.FirstOrDefault(r => r.field == "Phone").data : string.Empty;
            filter.BirthDate = gridSettings.Where.rules.Any(r => r.field == "BirthDate") ? 
            filter.BirthDate = gridSettings.Where.rules.Any(r => r.field == "BirthDate") ? 
                    DateTime.ParseExact(gridSettings.Where.rules.FirstOrDefault(r => r.field == "BirthDate").data, 
                                        "yyyy-MM-dd", null) : DateTime.MinValue;
        }

        customers = customerRepository.Search(filter, 
                                              gridSettings.SortColumn, 
                                              gridSettings.SortOrder, 
                                              gridSettings.PageSize, 
                                              gridSettings.PageIndex, 
                                              out totalRecords);

        var jsonData = new
        {
            total = totalRecords / gridSettings.PageSize + 1,
            page = gridSettings.PageIndex,
            records = totalRecords,
            rows = (
                from c in customers
                select new
                {
                    id = c.CustomerID,
                    FirstName = c.FirstName,
                    LastName = c.LastName,
                    BirthDate = c.BirthDate.ToString("yyyy-MM-dd"),
                    CountryName = c.CountryName,
                    EmailAddress = c.EmailAddress,
                    Phone = c.Phone,
                })
        };
        return Json(jsonData);
    }
}

该示例将创建以下网格： 

MvcJqGrid 搜索功能还允许配置搜索： 

  • SetSortName - 定义网格的默认搜索字段。
  • SetSortOrder - 使用网格的 SortOrder 枚举器定义默认排序顺序。
  • SetDefaultSearchValue - 设置特定列的默认搜索值。

有关更多信息和实时示例，请按 此处 访问 MvcJqGrid 站点。

“关于”选项卡包含指向许可证、源代码和文档的链接。 

 

注意

MvcJqGrid 现在有一个 Nuget 包，Id 为：MvcJqGrid  并且代码在 GitHub 上：https://github.com/robinvanderknaap/MvcJqGrid

 

 

© . All rights reserved.