Mvc 項目中使用Bootstrap以及基於bootstrap的 Bootgrid

官方地址參考http://www.jquery-bootgrid.com/Examples

Bootgrid 是一款基於BootStrap 開發的帶有查詢，分頁功能的列表顯示組件。可以在像MVC中開發快速搭建信息展示列表。我在開發過程中碰到很多問題，在此總結一下。由於是基於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>&nbsp;" +
　　　　　　　　"<a href=\"#\" class=\"command-edit\" data-row-id=\"" + row.UserId + "\">編輯</a>&nbsp;" +
　　　　　　　　"<a href=\"#\" class=\"command-delete\" data-row-id=\"" + row.UserId + "\">刪除</a>&nbsp;";
　　　　　　　　　　　　}
　　　　　　　　}
　　　　}).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>&times;</span>
　　</button>
　　<h4 class="modal-title">模態窗口標題</h4>
</div>
<div class="modal-body">
　　//數據展示部分。
</div>

在主頁面中通過remote 屬性獲取即可。