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 属性获取即可。
Mvc 项目中使用Bootstrap以及基于bootstrap的 Bootgrid的更多相关文章
- 转 mvc项目中,解决引用jquery文件后智能提示失效的办法
mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法 这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...
- 谈谈MVC项目中的缓存功能设计的相关问题
本文收集一些关于项目中为什么需要使用缓存功能,以及怎么使用等,在实际开发中对缓存的设计的考虑 为什么需要讨论缓存呢? 缓存是一个中大型系统所必须考虑的问题.为了避免每次请求都去访问后台的资源(例如数据 ...
- 在 ASP.NET MVC 项目中使用 WebForm、 HTML
原文地址:http://www.cnblogs.com/snowdream/archive/2009/04/17/winforms-in-mvc.html ASP.NET MVC和WebForm各有各 ...
- MVC项目中如何判断用户是在用什么设备进行访问
使用UAParser在C#MVC项目中如何判断用户是在用什么设备进行访问(手机,平板还是普通的电脑) 现在我们开发的很多web应用都要支持手机等移动设备.为了让手机用户能有更加好的用户体验,我们经常为 ...
- 在已有的Asp.net MVC项目中引入Taurus.MVC
Taurus.MVC是一个优秀的框架,如果要应用到已有的Asp.net MVC项目中,需要修改一下. 1.前提约定: 走Taurus.MVC必须指定后缀.如.api 2.原项目修改如下: web.co ...
- ASP.NET MVC项目中App_Code目录在程序应用
学习ASP.NET MVC,如果你是开发ASP.NET MVC项目的,也许你去为项目添加前ASP.NET项目的APP_Code目录,在这里创建与添加的Class类,也许你无法在MVC项目所引用. 那这 ...
- 如何在mvc项目中使用apiController
文章地址:How do you route from an MVC project to an MVC ApiController in another project? 文章地址:How to Us ...
- 在ASP.NET MVC项目中使用极验验证(geetest)
时间 2016-03-02 18:22:37 smallerpig 原文 http://www.smallerpig.com/979.html 主题 ASP.NET MVC geetest开发体 ...
- 添加Bootstrap 到MVC项目中(vs2010)
环境:Visual Studio 2010 ASP.NET MVC3 手动添加: 下载地址:http://twitter.github.com/bootstrap/ 一个js,两个css,两张图 ...
随机推荐
- ORA-00604: 递归 SQL 级别 1 出现错误 ORA-01000: 超出打开游标的最大数
有程序没关闭游标, --打开了哪些游标 select * from v$open_cursor 在open cursor之后一定要注意要close cursor(在store procedure里更应 ...
- 【总结整理】AI产品经理大会2017(转载)
从企业大数据到企业 AI | 易观智慧院院长 李智 1.AI 不是目的,而是要了解 AI 是什么,真正意义上的强人工智能在前沿领域尚未取得突破,暂时只能在影视文学作品中去思考人机关系.机器人三定律在未 ...
- 如何在MyEclipse中使用Maven
https://jingyan.baidu.com/article/fd8044facb9bc85031137a91.html?qq-pf-to=pcqq.group Maven不仅是一个构建工具,还 ...
- CENTOS 配置好SVN服务环境后,其他服务器无法访问 Error: Can't connect to host '192.168.1.103': 由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败。
CENTOS 配置好SVN服务环境后,其他服务器无法访问 根据 下面的步骤配置好服务后,使用本机可以正常 连接到 SVN 服务, 但是使用局域网的其他服务器访问时出现下面的错误, Error: C ...
- windows下的phpunit安装
Windows Globally installing the PHAR involves the same procedure as manually installing Composer on ...
- ReactNative常用第三方控件
Flex可视化在线工具 http://the-echoplex.net/flexyboxes/?fixed-height=on&legacy=on&display=flex&f ...
- Qt程序无法输入中文的问题
问题 在Linux环境下,用Qt编写的程序运行时不能在诸如输入框.文本框中输入中文(不会激活中文输入法). 注意与输入法类型有关(基于iBus或Fcitx) 原因 Qt程序的中文输入支持需要用Qt插件 ...
- Ubuntu16.0安装Eclipse Neon
eclipse在Ubuntu下安装先安装jdk,配置环境变量,之后下载eclipse安装包,解压,放置在目标目录,将jre链接到该目录或者将jdk下的jre目录复制到eclipse安装包目录下,双击文 ...
- css实现水平伸缩菜单
ul li a{transition:width 500ms ease;} a:hover{width:*;} 高度向上延伸用height:*;margin-top:-*px;//负值实现向上
- servler配置
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...