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> " +
"<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 属性获取即可。
最新文章
- [转载]jquery版小型婚礼(可动态添加祝福语)
- mysql 基本
- Python简单源码解析
- 在update时用触发器插入数据
- fontsize可以解决img标签插入图片之间的缝隙
- 诺基亚N900使用技巧
- js 根据名字获取cookie 的方法
- 比较数据泵和exp/imp对相同数据导出/导入的性能差异
- Java 中的instanceof简单讲解
- js中this的四种调用模式
- MVC模式简介
- Hibernate的dialect大全
- Sublime Text2 注册码 汉化 配置lua开发环境
- CXF之三 Tomcat中发布Web Service
- Android框架之网络开发框架Volley
- 黑马程序员_Java面向对象1_封装
- java基础回顾(五)线程详解以及synchronized关键字
- C# 设置Word文档背景(纯色/渐变/图片背景)
- OOP面向对象编程(下)
- 『TensorFlow』命令行参数解析