项目中使用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) {

      //实现

      });
    });
  });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值