BootstrapTable（附源码）

Bootstrap结合BootstrapTable的使用，分为两种模试显示列表。

引用的css：

引用的JS：

常用方法：

刷新表格：$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)[附源码] -- ...

随机推荐

Golang package
今天,灵感一现:不能一个文件干到底吧,那要是工程大了怎么办? 答案很简单,“包”啊 GO里的包,看起来很简单,但又不简单一开始,我想当然的以为就是include 路径一样的问题事实是,GO以GOP ...
cocos2d-x JS 纯代码加载播放plist与png动画
var cache = cc.spriteFrameCache; cache.addSpriteFrames(plist, png); var frames = []; for (var i = 1; ...
Appium遇到的问题二(持续更新....)
Python版: 1.运行Appium遇到的错误:此问题是由于JDK版本要在1.7及以上. Android开发要求. A new session could not be created. C:\Py ...
unity3d对象池的使用
说对象池之前首先来看看单例类和单例脚本的区别.这里有介绍 http://blog.csdn.net/lzhq1982/article/details/12649281 使用对象池的好处是不用每次都创建 ...
PXC搭建
一,安装依赖包 rpm -ivh libev-4.04-2.el6.x86_64.rpm =====> ftp://rpmfind.net/linux/atrpms/el6-x86_64/ ...
es6正则表达式
es6中如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符. 而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符. new RegExp(/ab ...
python --- 字符编码学习小结
上半年的KPI,是用python做一个测试桩系统,现在系统框架基本也差不多定下来了.里面有用到新学的工厂设计模式以及以及常用的大牛写框架的业务逻辑和python小技巧.发现之前自己写的代码还是面向过程 ...
<5>Cocos Creator 脚本简介
1.创建脚本在资源管理器窗口中点击鼠标右键,显示菜单中点击新建,选择新建的脚本类型,这里举例就选择菜单中的JavaScript,或者如下图点击创建按钮也可. 新建后就会在资源管理器中出现一个NewS ...
Web API 跨域请求
分布式技术在项目中会频繁用到,以前接触过WebService(可跨平台).WCF(功能强大,配置繁琐), 最近由于上层业务调整,将原来的MVC项目一分为三,将数据层提取出来,用API去访问.然后 ...
激活win10
网盘地址 http://pan.baidu.com/s/1nvc5I1V 里面是2个东西,一个是rar解压缩软件,一个是激活工具本体一个解压缩软件,一个激活工具的压缩包安装解压软件,就是WINRA ...

BootstrapTable（附源码）

BootstrapTable（附源码）的更多相关文章

随机推荐

热门专题