Bootstrap Table从零开始

Bootstrap Table从零开始

本文博主将从零开始，一步一步的告诉大家如何在前端用bootstrap Table插件展示一个表格

首先，要下载bootstrap Table插件所必须的js，地址：https://github.com/wenzhixin/bootstrap-table

官方文档地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

本文项目地址：bootstraptable

本文需要注意点地方博主已用红笔圈起来

先展示效果图

接下来就开始使用bootstrap Table插件制作表格

将上述地址下载的插件js放到项目中，分别为js,css,fonts

此处有一个细节：locale文件夹的名字不能修改，而且里边的所有语言js，必须全部粘过来

本文以MVC为例，当然WebForm也是可以的

使用步骤：

1、新建一个控制器和视图，该视图引用了_Layout母页版

2、在视图里引用相应的js

在页面上写一个table表格容器，这一句必须要有

3、初始化bootstrap Table

$(function () {

//1.初始化Table

var oTable = new TableInit();

oTable.Init();

});

4、使用bootstrap Table

var TableInit = function () {

var oTableInit = new Object();

//初始化Table

oTableInit.Init = function () {

$('#ArbetTable').bootstrapTable({

url: '/Interface/GetData', //请求后台的URL（*）

method: 'get', //请求方式（*）

toolbar: '#toolbar', //工具按钮用哪个容器

striped: true, //是否显示行间隔色

cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

pagination: true, //是否显示分页（*）

sortable: false, //是否启toHCCS用排序

sortOrder: "asc", //排序方式

queryParams: oTableInit.queryParams,//传递参数（*）

sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）

pageNumber: 1, //初始化加载第一页，默认第一页

pageSize: 10, //每页的记录行数（*）

pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）

search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大

contentType: "application/x-www-form-urlencoded",

strictSearch: true,

showColumns: true, //是否显示所有的列

showRefresh: true, //是否显示刷新按钮

minimumCountColumns: 2, //最少允许的列数

clickToSelect: true, //是否启用点击选中行

height: 700, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度

uniqueId: "no", //每一行的唯一标识，一般为主键列

showToggle: true, //是否显示详细视图和列表视图的切换按钮

cardView: false, //是否显示详细视图

detailView: false, //是否显示父子表

columns: [

{

field: 'ID',

title: 'ID'

}, {

field: 'Name',

title: '名字'

}, {

field: 'Sex',

title: '性别'

},

{

field: 'operate',

title: '操作',

formatter: operateFormatter //自定义方法，添加操作按钮

},

],

rowStyle: function (row, index) {

var classesArr = ['success', 'info'];

var strclass = "";

if (index % 2 === 0) {//偶数行

strclass = classesArr[0];

} else {//奇数行

strclass = classesArr[1];

}

return { classes: strclass };

},//隔行变色

});

};

//得到查询的参数

oTableInit.queryParams = function (params) {

var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

limit: params.limit, //页面大小

offset:params.offset

};

return temp;

};

return oTableInit;

};

function operateFormatter(value, row, index) {//赋予的参数

return [

'编辑',

'档案',

'记录',

'准入'

].join('');

}

5、后台url返回数据

public ActionResult GetData(int limit, int offset)

{

var data = new List

new { ID= 2, Name="Arbet1", Sex="女" },

new {ID=3, Name="Arbet2",Sex="男" },

new {ID=4, Name="Arbet3",Sex="女" },

new {ID=5, Name="Arbet4",Sex="男" },

new {ID=6, Name="Arbet5",Sex="男" },

new {ID=7, Name="Arbet6",Sex="女" },

new {ID=8, Name="Arbet7",Sex="男" },

new { ID=9, Name="Arbet1", Sex="女" },

new {ID=10, Name="Arbet2",Sex="男" },

new {ID=11, Name="Arbet3",Sex="女" },

new {ID=12, Name="Arbet4",Sex="男" },

new {ID=13, Name="Arbet5",Sex="男" },

new {ID=14, Name="Arbet6",Sex="女" },

new {ID=15, Name="Arbet7",Sex="男" }

};

var total = data.Count;

var rows = data.Skip(offset).Take(limit).ToList();

return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);

}

在本文中，博主以匿名集合来设置数据，大家可以通过查询数据库获取数据

在此需要注意：返回的参数必须是total和rows，total返回数据集总个数，rows返回table的json格式

6、展示效果

发现出现了这个bug，这是怎么回事

在浏览器上打开源代码

发现多了一些其他js文件，这是layout母页版里引入的js文件

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

@RenderBody()

@*@Scripts.Render("~/bundles/jquery")*@

@RenderSection("scripts", required: false)

把上图中的红框里的js文件注释掉再运行

发现成功了！这是因为JS库文件的引用是有顺序的，必须先引用JQuery库文件，再引用插件js

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。