在好例子网，分享、交流、成长！
您当前所在位置：首页 → Others 开发实例 → 一般编程问题 → ASP.NET MVC中使用jqGrid快速创建表格的教程

ASP.NET MVC中使用jqGrid快速创建表格的教程

一般编程问题

下载此实例
  • 开发语言：Others
  • 实例大小：1.08M
  • 下载次数：1
  • 浏览次数：44
  • 发布时间：2024-04-12
  • 实例类别：一般编程问题
  • 发 布 人：chenxiaolan
  • 文件格式：.zip
  • 所需积分：2
 相关标签：
网友评论 举报投诉 收藏该页

实例介绍

【实例简介】
在ASP.NET MVC项目中，jqGrid是一个非常简单且流行的插件，它可以帮助开发者快速创建商业级请求表单。遵循“少写代码，做更多事”的原则，本文将向您展示如何利用jqGridForMvc快速搭建一个用户信息展示表格。
首先，您需要通过NuGet安装jqGrid插件： 
Install-Package HalowerHub.Jqgrid
接下来，是一个简单的示例代码，展示了如何使用jqGridForMvc支持的常见操作来创建一个用户列表表格： 
@model UserDto
@{
    var g = Html.JqGridKit();
}
<div class="row" style="margin-top: 10px">
    @(
    g.JqGrid("userlistGrid", g.Param(p => p.Id)).MainGrid(
        g.GridColumn(x => x.Id, 300),
        g.GridColumn(x => x.UserName, 300).Searchable(),
        g.GridColumn(x => x.PhoneNumber, 300).Searchable(),
        g.GridColumn("options",150, "custom html fragment")
        )
        .Caption("user grid").Height("150")
        .Url(Url.Action("UserListData", "Account")).Multiselect()
        .Pager().PerClearCache().MultiSearch().AutoWidth()
        .BuiltInOperation(GridOperators.Refresh | GridOperators.Search | GridOperators.Add)
    )
</div>
此外，后端代码如下，用于处理数据分页： 
public ContentResult UserListData()
{
    return Content(dataSource.Pagination(this));
}
【实例截图】
【核心代码】
文件清单
└── JqGridForMvc-ad3e00ca1f4e9d9761015fe2c5411f41be7051a9
    ├── LICENSE
    ├── README.md
    └── src
        ├── HalowerHub.JqGrid
        │   ├── Cache
        │   │   └── CacheHelper.cs
        │   ├── Config
        │   │   ├── ColSPanConfiguation.cs
        │   │   ├── Editrules.cs
        │   │   ├── Formatoption.cs
        │   │   ├── GridCell.cs
        │   │   ├── GridColumn.cs
        │   │   ├── GridColumnExtension.cs
        │   │   ├── GridConfigBuilder.cs
        │   │   ├── GridConfiguration.cs
        │   │   ├── GridOperation.cs
        │   │   ├── GroupHeader.cs
        │   │   ├── IGridColumn.cs
        │   │   ├── SubGridModel.cs
        │   │   └── SubGridTable.cs
        │   ├── {Enum}
        │   │   ├── CellFormatter.cs
        │   │   ├── CellTypes.cs
        │   │   ├── ColumnEdits.cs
        │   │   ├── ColumnSearchs.cs
        │   │   ├── ColumnSorts.cs
        │   │   ├── Driections.cs
        │   │   ├── GridOperators.cs
        │   │   ├── ResponseDatas.cs
        │   │   └── SortOrders.cs
        │   ├── Factory
        │   │   ├── GridExtensions.cs
        │   │   ├── GridFacotory.cs
        │   │   ├── GridFactoryExtensions.cs
        │   │   ├── GridGenerator.cs
        │   │   ├── RenderInitCommand.cs
        │   │   └── SerializerHelper.cs
        │   ├── Function
        │   │   ├── GridListSort.cs
        │   │   ├── GridPagerExtention.cs
        │   │   ├── GridSearchPredicate.cs
        │   │   ├── JGridTree.cs
        │   │   ├── PageParams.cs
        │   │   └── PredicateBuilder.cs
        │   ├── HalowerHub.JqGrid.csproj
        │   ├── HalowerHub.JqGrid.csproj.DotSettings
        │   ├── packages.config
        │   ├── plugins
        │   │   ├── System.Web.Mvc.dll
        │   │   └── System.Web.WebPages.dll
        │   ├── Properties
        │   │   └── AssemblyInfo.cs
        │   └── Tool
        │       └── CellBuildKit.cs
        ├── JQgridForMvcDemo
        │   ├── App_Start
        │   │   └── RouteConfig.cs
        │   ├── Content
        │   │   ├── jquery.jqGrid
        │   │   │   ├── ellipsis-xbl.xml
        │   │   │   ├── jquery-ui.theme.css
        │   │   │   └── ui.jqgrid.css
        │   │   └── themes
        │   │       └── base
        │   │           ├── images
        │   │           │   ├── animated-overlay.gif
        │   │           │   ├── ui-bg_flat_0_aaaaaa_40x100.png
        │   │           │   ├── ui-bg_flat_75_ffffff_40x100.png
        │   │           │   ├── ui-bg_glass_55_fbf9ee_1x400.png
        │   │           │   ├── ui-bg_glass_65_ffffff_1x400.png
        │   │           │   ├── ui-bg_glass_75_dadada_1x400.png
        │   │           │   ├── ui-bg_glass_75_e6e6e6_1x400.png
        │   │           │   ├── ui-bg_glass_95_fef1ec_1x400.png
        │   │           │   ├── ui-bg_highlight-soft_75_cccccc_1x100.png
        │   │           │   ├── ui-icons_222222_256x240.png
        │   │           │   ├── ui-icons_2e83ff_256x240.png
        │   │           │   ├── ui-icons_454545_256x240.png
        │   │           │   ├── ui-icons_888888_256x240.png
        │   │           │   └── ui-icons_cd0a0a_256x240.png
        │   │           ├── jquery.ui.accordion.css
        │   │           ├── jquery.ui.all.css
        │   │           ├── jquery.ui.autocomplete.css
        │   │           ├── jquery.ui.base.css
        │   │           ├── jquery.ui.button.css
        │   │           ├── jquery.ui.core.css
        │   │           ├── jquery-ui.css
        │   │           ├── jquery.ui.datepicker.css
        │   │           ├── jquery.ui.dialog.css
        │   │           ├── jquery.ui.menu.css
        │   │           ├── jquery.ui.progressbar.css
        │   │           ├── jquery.ui.resizable.css
        │   │           ├── jquery.ui.selectable.css
        │   │           ├── jquery.ui.slider.css
        │   │           ├── jquery.ui.spinner.css
        │   │           ├── jquery.ui.tabs.css
        │   │           ├── jquery.ui.theme.css
        │   │           ├── jquery.ui.tooltip.css
        │   │           └── minified
        │   │               ├── images
        │   │               │   ├── animated-overlay.gif
        │   │               │   ├── ui-bg_flat_0_aaaaaa_40x100.png
        │   │               │   ├── ui-bg_flat_75_ffffff_40x100.png
        │   │               │   ├── ui-bg_glass_55_fbf9ee_1x400.png
        │   │               │   ├── ui-bg_glass_65_ffffff_1x400.png
        │   │               │   ├── ui-bg_glass_75_dadada_1x400.png
        │   │               │   ├── ui-bg_glass_75_e6e6e6_1x400.png
        │   │               │   ├── ui-bg_glass_95_fef1ec_1x400.png
        │   │               │   ├── ui-bg_highlight-soft_75_cccccc_1x100.png
        │   │               │   ├── ui-icons_222222_256x240.png
        │   │               │   ├── ui-icons_2e83ff_256x240.png
        │   │               │   ├── ui-icons_454545_256x240.png
        │   │               │   ├── ui-icons_888888_256x240.png
        │   │               │   └── ui-icons_cd0a0a_256x240.png
        │   │               ├── jquery.ui.accordion.min.css
        │   │               ├── jquery.ui.autocomplete.min.css
        │   │               ├── jquery.ui.button.min.css
        │   │               ├── jquery.ui.core.min.css
        │   │               ├── jquery.ui.datepicker.min.css
        │   │               ├── jquery.ui.dialog.min.css
        │   │               ├── jquery.ui.menu.min.css
        │   │               ├── jquery-ui.min.css
        │   │               ├── jquery.ui.progressbar.min.css
        │   │               ├── jquery.ui.resizable.min.css
        │   │               ├── jquery.ui.selectable.min.css
        │   │               ├── jquery.ui.slider.min.css
        │   │               ├── jquery.ui.spinner.min.css
        │   │               ├── jquery.ui.tabs.min.css
        │   │               ├── jquery.ui.theme.min.css
        │   │               └── jquery.ui.tooltip.min.css
        │   ├── Controllers
        │   │   └── HomeController.cs
        │   ├── Global.asax
        │   ├── Global.asax.cs
        │   ├── JQgridForMvcDemo.csproj
        │   ├── Models
        │   │   └── Person.cs
        │   ├── packages.config
        │   ├── Properties
        │   │   └── AssemblyInfo.cs
        │   ├── scripts
        │   │   ├── ai.0.15.0-build58334.js
        │   │   ├── ai.0.15.0-build58334.min.js
        │   │   ├── i18n
        │   │   │   ├── grid.locale-ar.js
        │   │   │   ├── grid.locale-bg1251.js
        │   │   │   ├── grid.locale-bg.js
        │   │   │   ├── grid.locale-cat.js
        │   │   │   ├── grid.locale-cn.js
        │   │   │   ├── grid.locale-cs.js
        │   │   │   ├── grid.locale-da.js
        │   │   │   ├── grid.locale-de.js
        │   │   │   ├── grid.locale-dk.js
        │   │   │   ├── grid.locale-el.js
        │   │   │   ├── grid.locale-en.js
        │   │   │   ├── grid.locale-es.js
        │   │   │   ├── grid.locale-fa.js
        │   │   │   ├── grid.locale-fi.js
        │   │   │   ├── grid.locale-fr.js
        │   │   │   ├── grid.locale-gl.js
        │   │   │   ├── grid.locale-he.js
        │   │   │   ├── grid.locale-hr1250.js
        │   │   │   ├── grid.locale-hr.js
        │   │   │   ├── grid.locale-hu.js
        │   │   │   ├── grid.locale-id.js
        │   │   │   ├── grid.locale-is.js
        │   │   │   ├── grid.locale-it.js
        │   │   │   ├── grid.locale-ja.js
        │   │   │   ├── grid.locale-kr.js
        │   │   │   ├── grid.locale-lt.js
        │   │   │   ├── grid.locale-mne.js
        │   │   │   ├── grid.locale-nl.js
        │   │   │   ├── grid.locale-no.js
        │   │   │   ├── grid.locale-pl.js
        │   │   │   ├── grid.locale-pt-br.js
        │   │   │   ├── grid.locale-pt.js
        │   │   │   ├── grid.locale-ro.js
        │   │   │   ├── grid.locale-ru.js
        │   │   │   ├── grid.locale-sk.js
        │   │   │   ├── grid.locale-sr.js
        │   │   │   ├── grid.locale-sr-latin.js
        │   │   │   ├── grid.locale-sv.js
        │   │   │   ├── grid.locale-th.js
        │   │   │   ├── grid.locale-tr.js
        │   │   │   ├── grid.locale-tw.js
        │   │   │   ├── grid.locale-ua.js
        │   │   │   └── grid.locale-vi.js
        │   │   ├── jquery-1.9.1.intellisense.js
        │   │   ├── jquery-1.9.1.js
        │   │   ├── jquery-1.9.1.min.js
        │   │   ├── jquery-1.9.1.min.map
        │   │   ├── jquery.jqGrid.js
        │   │   ├── jquery.jqGrid.min.js
        │   │   ├── jquery-ui-1.10.0.js
        │   │   └── jquery-ui-1.10.0.min.js
        │   ├── Views
        │   │   ├── Home
        │   │   │   └── Index.cshtml
        │   │   └── web.config
        │   ├── Web.config
        │   ├── Web.Debug.config
        │   └── Web.Release.config
        └── JqGridForMvc.sln

27 directories, 176 files

标签：

实例下载地址

ASP.NET MVC中使用jqGrid快速创建表格的教程

不能下载？内容有错？ 点击这里报错 + 投诉 + 提问

好例子网口号：伸出你的我的手 — 分享！

相关软件

相关文章

网友评论

我要评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警