bootstrap-table 提供手机端,电脑端访问,提供分页,筛选等。

bootstrap-table说明文档http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

官网:https://github.com/wenzhixin/bootstrap-table

可以使用如下调用:

$(function () {
var tableInit = new TableInit();
tableInit.Init();
$(window).on('resize', tableInit.ChangeCardView);
}); var TableInit = function () {
var oTableInit = new Object(); oTableInit.Init = function () {
$('#grid').bootstrapTable({
height: oTableInit.GetHeight(), //默认高度未充满,这里需要计算高度赋予
url: '@Url.Action("GetList")', //请求后台的URL(*)
method: 'get', //请求方式(*)
//toolbar: '#tool', //工具按钮用哪个容器
dataType: 'json',
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
//sortable: true, //是否启用排序
//sortOrder: "asc", //排序方式
queryParams: oTableInit.QueryParams, //传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
//search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
//strictSearch: true, //设置为 true启用 全匹配搜索,否则为模糊搜索
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "AdCompanyID", //每一行的唯一标识,一般为主键列
//showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: true, //是否显示详细视图
rowStyle: oTableInit.RowStyle,//样式自定义
//detailView: true, //是否显示父子表
columns: [
{ field: 'ID', visible: false },
{ field: 'Oper', title: '操作', align: 'center', formatter: oTableInit.OperateFormatter }
]
});
oTableInit.ChangeCardView();
};
//自适应移动端和PC端显示,是否显示table还是详细
//以500宽度限定,可以自定义
//默认高度变化后,bootstrapgrid高度不变化,这里重置高度
oTableInit.ChangeCardView = function (event) {
var width = $(window).width();
if (width > 500)
$('#grid').bootstrapTable('changeCardView', false);
else if (width < 500)
$('#grid').bootstrapTable('changeCardView', true);
$('#grid').bootstrapTable('resetView', {
height: oTableInit.GetHeight()
});
};
oTableInit.GetHeight = function () {
return $(window).height() - $('#queryDiv').outerHeight(true);//这里的queryDiv是放置在bootstrapgrid上面的查询部分
}
oTableInit.QueryParams = function (params) {
var param = {
limit: params.limit,
offset: params.offset,
search: params.search,
sort: params.sort,
order: params.order,
adCompanyName: $('#adCompanyName').val()
}
return param;
};
oTableInit.RowStyle = function (row, index) {
var classes = ['success', 'info'];
if (index % 2 === 0) {//偶数行
return { classes: classes[0] };
} else {//奇数行
return { classes: classes[1] };
}
};
oTableInit.OperateFormatter = function (value, row, index) {
var html = '<a class="btn" href="#"><i class="fa fa-pencil-square"></i> <span>修改</span></a>';
html += '<a class="btn" href="#"><i class="fa fa-times"></i> <span>删除</span></a>';
return html;
};
return oTableInit;
} //bootstrapTable中需加入changeCardView,如下:
BootstrapTable.prototype.changeCardView = function (cardView) {
this.options.cardView = cardView;
this.initHeader();
// Fixed remove toolbar when click cardView button.
//that.initToolbar();
this.initBody();
this.trigger('toggle', this.options.cardView);
};

c# bootstrap-table 知识的更多相关文章

  1. Bootstrap table使用知识-转

    http://www.cnblogs.com/landeanfen/p/5005367.html 官方文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ ...

  2. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  3. bootstrap table使用参考

    https://www.cnblogs.com/landeanfen/p/5821192.html  转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  4. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

  5. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

  6. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  7. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  8. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  9. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  10. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

随机推荐

  1. bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法

    实用方法 1.引入 在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件 2. 按照bootstrap的表单组件 ...

  2. 初涉算法——STL初步

    一.头文件<algorithm> ①sort函数 sort使用数组元素默认的大小比较运算符进行排序,只有在需要按照特殊依据进行排序时才需要传入额外的比较函数: sort可以给任意对象排序( ...

  3. “Hello world!”团队第二周贡献分规则+贡献分数分配结果

    一.贡献规则制定: (1)基础分:9 , 9 , 8 , 7 , 7 , 7 , 6(按在本次编程中承担模块的重要度制定,某一模块重要度的认定通过组内开会讨论决定) (2)会议分:每人没出勤一次会议记 ...

  4. 11.22Daily Scrum(2)

    人员 任务分配完成情况 明天任务分配 王皓南 实现网页上视频浏览的功能.研究相关的代码和功能.984 数据库测试 申开亮 实现网页上视频浏览的功能.研究相关的代码和功能.985 实现视频浏览的功能 王 ...

  5. BluetoothDevice详解

    一. BluetoothDevice简介 1. 继承关系 public static Class BluetoothDevice extends Object implement Parcelable ...

  6. 文件异步上传-ajaxFileUpload

    $.ajaxFileUpload是一个jquery插件 文章:jQuery插件之ajaxFileUpload

  7. Thinkphp5的ajax接口实现

    前一篇讲到thinkphp5从数据库获取数据之后赋给视图view,前一篇从数据渲染方式来说是服务端数据渲染,这一章则是浏览器端数据渲染.按照知识总结依据来划分,这是两种不同的技术场景. 下面介绍具体的 ...

  8. xpath教程三---逐层检索和全局检索

    本节主要介绍用xpath来描述html的层级关系 主要使用到的知识点如下: 单独的一个点 .,表示当前位置 两个点 ..,表示上一级父标签的位置 单独的一个斜杠 /,表示只检索下面一级 单独的两个斜杠 ...

  9. jconsole工具监控java运行情况

    jconsole是jdk自带的工具.所以要先安装jdk  1.jconsole工具的路径: 通过which jconsole来查看 /usr/local/jdk1.7.0_79/bin/jconsol ...

  10. [STL] vector基本用法

    vector的数据安排以及操作方式,与array非常相似.两者的唯一区别在于空间的运用的灵活性.array是静态空间,一旦配置了就不能改变.vector是动态空间,随着元素的加入,它的内部机制会自行扩 ...