BootstrapTable（附源码）
Bootstrap结合BootstrapTable的使用，分为两种模试显示列表。
引用的css：
<link href="@Url.Content("~/Css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Css/bootstrap-table.css")" rel="stylesheet" type="text/css" />
引用的JS：
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-table.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-table-zh-CN.js" type="text/javascript"></script>
常用方法：
刷新表格：$table.bootstrapTable('refresh');
获取选择的行：$table.bootstrapTable('getSelections');
1.服务端请求：即当数据量大，千百万条数据的情况下，只获取当页条件下的数据。每点击分页或查询都向服务端重新获取分页数据。
前端代码：
function initTable() {
var queryUrl = '@Url.Content("~/Welcome/QueryList")' + '?rnd=' + +Math.random();
$table = $('#table-javascript').bootstrapTable({
//method: 'get',
method: 'post',
contentType: "application/x-www-form-urlencoded",//必须的，操你大爷！！！！
url: queryUrl,
height: $(window).height() - 200,
striped: true,
pagination: true,
singleSelect: false,
pageSize: 50,
pageList: [10, 50, 100, 200, 500],
search: false, //不显示 搜索框
showColumns: false, //不显示下拉框（选择显示的列）
sidePagination: "server", //服务端请求
queryParams: queryParams,
minimunCountColumns: 2,
columns: [{
field: 'state',
checkbox: true
}, {
field: 'Name',
title: '姓名',
width: 100,
align: 'center',
valign: 'middle',
sortable: true,
formatter: nameFormatter
}, {
field: 'Gender',
title: '性别',
width: 40,
align: 'left',
valign: 'top',
sortable: true,
formatter: sexFormatter,
sorter: priceSorter
}, {
field: 'Birthday',
title: '出生日期',
width: 80,
align: 'left',
valign: 'top',
sortable: true
}, {
field: 'CtfId',
title: '身份证',
width: 80,
align: 'middle',
valign: 'top',
sortable: true
}, {
field: 'Address',
title: '地址',
width: 180,
align: 'left',
valign: 'top',
sortable: true
}, {
field: 'Tel',
title: '固定电话',
width: 100,
align: 'left',
valign: 'top',
sortable: true
}, {
field: 'Mobile',
title: '手机号码',
width: 100,
align: 'left',
valign: 'top',
sortable: true
}, {
field: 'operate',
title: '操作',
width: 100,
align: 'center',
valign: 'middle',
formatter: operateFormatter,
events: operateEvents
}],
onLoadSuccess:function(){
},
onLoadError: function () {
mif.showErrorMessageBox("数据加载失败！");
}
});
}
//传递的参数
function queryParams(params) {
return {
pageSize: params.pageSize,
pageIndex: params.pageNumber,
UserName: $("#txtName").val(),
Birthday: $("#txtBirthday").val(),
Gender: $("#Gender").val(),
Address: $("#txtAddress").val(),
name: params.sortName,
order: params.sortOrder
};
}
服务器端代码：
public ActionResult QueryList(int pageIndex = 1, int pageSize = 100)
{
try
{
string name = Request["UserName"];
string birthday = Request["Birthday"];
string gender = Request["Gender"];
string Address = Request["Address"];
Document docQuery = new Document();
if (!string.IsNullOrEmpty(name))
{
docQuery.Add("Name", new MongoRegex(".*" + name + ".*", MongoRegexOption.IgnoreCase));
}
if (!string.IsNullOrEmpty(birthday))
{
docQuery.Add("Birthday", new MongoRegex(".*" + birthday + ".*", MongoRegexOption.IgnoreCase));
}
if (!string.IsNullOrEmpty(gender))
{
docQuery.Add("Gender", gender);
}
if (!string.IsNullOrEmpty(Address))
{
docQuery.Add("Address", new MongoRegex(".*" + Address + ".*", MongoRegexOption.IgnoreCase));
}
if (this.HttpContext.Request.QueryString.AllKeys.Contains("ToExcel"))
{
List<OpenRoom> listExport = MongoDbHelper.GetList<OpenRoom>(MongoTables.OpenRoom, docQuery);
//List<string> listTilte = new List<string> { "" };
ExportMethod(listExport);
}
long totalCount = MongoDbHelper.GetTotalCount<OpenRoom>(MongoTables.OpenRoom, docQuery);
var list = MongoDbHelper.GetList<OpenRoom>(MongoTables.OpenRoom, docQuery, new Document(), pageIndex, pageSize);
string jsonString = JsonHelper.ObjToJson(list);
jsonString = "{\"total\":" + totalCount.ToString() + ",\"rows\":" + jsonString + "}";
return Content(jsonString);
}
catch (Exception ex)
{
return Content(ex.Message);
}
}
注意返回的格式：要返回总记录数total及分页后数据rows。
未解决问题：导出Excel时，超出65536行数据时，会异常。怎样解决这个问题？
2.客户端请求：当数据量较少，只有上千条数据时，一次性将所有数据返回给客户端，无论点下一页，或搜索条件时，不向服务端发请求，实现全文检索。
这个比较简单，将sidePagination属性设为 "client",因为客户端会处理分页和全文检索，无需向服务器端发请求，所以也无需传递参数。
前端JS:
function initTable() {
var queryUrl = '@Url.Content("~/UserInfo/QueryList")' + '?rnd=' + +Math.random();
$table = $('#table-javascript').bootstrapTable({
method: 'get',
url: queryUrl,
height: $(window).height() - 200,
striped: true,
pagination: true,
pageSize: 50,
pageList: [10, 25, 50, 100, 200],
search: true,
sidePagination: "client",
showColumns: true,
minimunCountColumns: 2,
columns: [{
field: 'state',
radio: true
}, {
field: 'Id',
title: 'ID',
align: 'right',
valign: 'bottom',
sortable: true
}, {
field: 'UserName',
title: '姓名',
width: 100,
align: 'center',
valign: 'middle',
sortable: true,
formatter: nameFormatter
}, {
field: 'Account',
title: '账号',
align: 'left',
valign: 'top',
sortable: true
}, {
field: 'Address',
title: '家乡',
align: 'middle',
valign: 'top',
sortable: true
}, {
field: 'Phone',
title: '电话',
align: 'left',
valign: 'top',
sortable: true
}, {
field: 'QQ',
title: 'QQ号码',
align: 'left',
valign: 'top',
sortable: true
}, {
field: 'Remark',
title: '备注',
align: 'left',
valign: 'top',
sortable: true
}, {
field: 'operate',
title: '操作',
align: 'center',
width: 100,
valign: 'middle',
formatter: operateFormatter,
events: operateEvents
}]
});
}
后台直接返回Json数据即可。
后台代码：
public ActionResult QueryList()
{
try
{
List<sys_user> list = accessHelper.GetUserList();
string jsonString = JsonHelper.ObjToJson(list);
return Content(jsonString);
}
catch (Exception ex)
{
return Content(ex.Message);
}
}
BootstrapTable（附源码）的更多相关文章
- 在网站开发中很有用的8个 jQuery 效果【附源码】
jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- MVC系列——MVC源码学习：打造自己的MVC框架（二：附源码）
前言:上篇介绍了下 MVC5 的核心原理,整篇文章比较偏理论,所以相对比较枯燥.今天就来根据上篇的理论一步一步进行实践,通过自己写的一个简易MVC框架逐步理解,相信通过这一篇的实践,你会对MVC有一个 ...
- C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper（三：附源码）
前言:之前的两篇封装了一些基础的表单组件,这篇继续来封装几个基于bootstrap的其他组件.和上篇不同的是,这篇的有几个组件需要某些js文件的支持. 本文原创地址:http://www.cnblog ...
- 轻量级通信引擎StriveEngine —— C/S通信demo(2) —— 使用二进制协议 （附源码）
在网络上,交互的双方基于TCP或UDP进行通信,通信协议的格式通常分为两类:文本消息.二进制消息. 文本协议相对简单,通常使用一个特殊的标记符作为一个消息的结束. 二进制协议,通常是由消息头(Head ...
- jquery自定义插件结合baiduTemplate.js实现异步刷新（附源码）
上一篇记录了BaiduTemplate模板引擎使用示例附源码,在此基础上对使用方法进行了封装 自定义插件jajaxrefresh.js 代码如下: //闭包限定命名空间 (function ($) { ...
- 精选9个值得学习的 HTML5 效果【附源码】
这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效 ...
- C#/ASP.NET MVC微信公众号接口开发之从零开发（四） 微信自定义菜单(附源码)
C#/ASP.NET MVC微信接口开发文章目录: 1.C#/ASP.NET MVC微信公众号接口开发之从零开发(一) 接入微信公众平台 2.C#/ASP.NET MVC微信公众号接口开发之从零开发( ...
- (原创)通用查询实现方案(可用于DDD)[附源码] -- 设计思路
[声明] 写作不易,转载请注明出处(http://www.cnblogs.com/wiseant/p/3988592.html). [系列文章] 通用查询实现方案(可用于DDD)[附源码] -- ...
- (原创)通用查询实现方案(可用于DDD)[附源码] -- 简介
[声明] 写作不易,转载请注明出处(http://www.cnblogs.com/wiseant/p/3985353.html). [系列文章] 通用查询实现方案(可用于DDD)[附源码] -- ...
随机推荐
- JavaScript setInterval（定时/延时调用函数）
setInterval是一个实现定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval方法会不停地调用函数,直到 clearInterval被调用或窗口被关闭. 由 ...
- 为Flex Builder设置测试服务器
当用Flex Builder测试一个Flex应用时,它默认情况下会调用系统自带浏览器直接从bin-debug文件夹打开相应的html文件.浏览器中URL地址形式如file:///C:/AllESRI/ ...
- Sift中尺度空间、高斯金字塔、差分金字塔（DOG金字塔）、图像金字塔
转自:https://blog.csdn.net/dcrmg/article/details/52561656 一. 图像金字塔 图像金字塔是一种以多分辨率来解释图像的结构,通过对原始图像进行多尺度像 ...
- Hibernate框架第三天
**课程回顾:Hibernate第二天** 1. 持久化类和一级缓存 * 持久化类:JavaBean + 映射的配置文件 * 持久化对象的三种状态 * 瞬时态 * 持久态:有自动更新数据的能力 * 托 ...
- Git安装及创建版本库
一.在Windows上安装Git 1.虽然用于开发的系统最好是用Mac或者Linux,但绝大多数新人都是用Windows进行开发.Windows系统上也有提供了Git(Windows版),下载地址:h ...
- nodejs中安卓端的编码如何转换为中文
借助一些模块来转换,比如,html-entities Github var Entities = require('html-entities').XmlEntities; entities = ne ...
- fang99-三号线与四号线新盘
三号线与四号线新盘 http://www.fang99.com/buycenter/buildingsearch_map.aspx?projectid=0000011104 http://www.fa ...
- 2-1:math库与random库
一.math库: math库是python语言中常用的一个函数库,它包含了一批数学函数,下面我们看一下这个函数库 由于math库中的函数与数学中的函数比较一致,相对比较简单,请同学们自行练习一下: 二 ...
- jQuery事件--keypress([[data],fn])和trigger(type,[data])
keypress([[data],fn]) 概述 当键盘或按钮被按下时,发生 keypress 事件 keypress 事件与 keydown 事件类似.当按钮被按下时,会发生该事件.它发生在当前获得 ...
- 20155228 基于VirtualBox安装Ubuntu和学习linux命令的学习经历和心得
一.虚拟机VirtualBox的下载安装 基于VirtualBox虚拟机安装Ubuntu图文教程 虽然娄老师的教程对于VirtualBox的下载安装讲的很简单,可以说是一笔带过,但是我在下载安装的过程 ...