bootgrid使用实例

Bootgrid 是一款基于BootStrap 开发的带有查询，分页功能的列表显示组件。可以在像MVC中开发快速搭建信息展示列表。今天在公司的项目上碰到Bootgrid的使用，网上找了个例子，记录下来方便以后用到。

原文地址：http://www.cnblogs.com/promising/p/5150651.html

其它参考博文：http://blog.csdn.net/xiaohai_ada/article/details/52702581

由于是基于Bootstrap开发的，在使用之前先导入与之相关的Jquery，CSS相关文件，然后导入Bootgrid的脚本与样式。

前端 <table id="grid-data" class="table table-bordered table-hover"> 　　<thead> 　　　　<tr> 　　　　　　<th data-column-id="UserName">@Html.LabelFor(m => m.UserName)</th> 　　　　　　<th data-column-id="UserPhone">@Html.LabelFor(m => m.UserPhone)</th> 　　　　　　<th data-column-id="CrateTime" data-order="desc">@Html.LabelFor(m => m.CrateTime)</th> 　　　　　　<th data-column-id="link" data-formatter="commands" data-sortable="false">详细</th> 　　　　</tr> 　　</thead> </table>

说明：该组件通过请求接收形如{"current":1,"rowCount":10,"total":2,"rows":[{"UserName":"swt","UserPhone":"1","CrateTime":"20151203"}]}的json数据格式。 data-column-id与返回的json中的Id互相对应。data-order当前列的排序方式， data-sortable=false 当前不排序

$("#grid-data").bootgrid({ 　　ajax: true, //是否发生异步请求 　　url: "../UserCenter/Result", //请求的Url 返回json格式数据 　　formatters: { 　　　　"commands": function (column, row) { //commands 参考上面 data-formatter="commands" 与前面一致即可 　　　　return "<a href=\"#\" class=\"command-detail\" data-row-id=\"" + row.UserId + "\">详细</a> " + 　　　　　　　　"<a href=\"#\" class=\"command-edit\" data-row-id=\"" + row.UserId + "\">编辑</a> " + 　　　　　　　　"<a href=\"#\" class=\"command-delete\" data-row-id=\"" + row.UserId + "\">删除</a> "; 　　　　　　　　　　　　} 　　　　　　　　} 　　　　}).on("loaded.rs.jquery.bootgrid", function () { 　　　　/* Executes after data is loaded and rendered */ 　　　　grid.find(".command-detail").on("click", function (e) { 　　　　　　$("#detail-mod").removeData("bs.modal"); 　　　　　　$("#detail-mod").modal({ 　　　　　　　　remote: "../UserCenter/UserDetail?type=detail&userId=" + $(this).data("row-id") + "" //点击详细按钮时请求路径 　　　　　　　　}); 　　　　　　}).end().find(".command-edit").on("click", function (e) { 　　　　$("#detail-mod").removeData("bs.modal");//为了模态窗口加载时 移除之前的数据，否则，一直保留第一次的数据（个人认为） 　　　　$("#detail-mod").modal({ 　　　　　　//实现 　　　　　　}); 　　　　}).end().find(".command-delete").on("click", function (e) { 　　　　　　//实现 　　　　　　}); 　　　　}); 　　});

还有关于BootStrap 弹出模态窗口 加载动态数据

在主页面中添加如下

<div class="modal fade" id="detail-mod"> 　　<div class="modal-dialog" style="height: 700px ;width:900px"> 　　　　<div class="modal-content" id="detail-content"> 　　　　</div> 　　</div> </div> 在Mvc partial视图中添加

<div class="modal-header"> 　　<button type="button" class="close" data-dismiss="modal"> 　　　　<span>×</span> 　　</button> 　　<h4 class="modal-title">模态窗口标题</h4> </div> <div class="modal-body"> 　　//数据展示部分。 </div> 在主页面中通过remote 属性获取即可.