bootstrapr表格父子框_bootstrap-table的基本使用方法和属性

最新推荐文章于 2024-04-17 16:56:31 发布

weixin_39745269

最新推荐文章于 2024-04-17 16:56:31 发布

阅读量798

点赞数

文章标签： bootstrapr表格父子框

本文链接：https://blog.csdn.net/weixin_39745269/article/details/111482501

版权

引入相应的js、css

先引入jQuery，jQuery必须在前面！

引入bootstrap的js和css

下载bootstrap-table的js和css并引用到项目中=>传送门

使用bootstrap-table

创建一个table标签，给这个标签取一个id(我取的id是exampleTableToolbar)，然后开始写javascript代码

$(function () {

$('#exampleTableToolbar').bootstrapTable({

url: "/WGR/AddDeleteUser",

search: true,

showRefresh: true,

showToggle: true,

showColumns: true,

toolbar: '#exampleToolbar',

iconSize: 'outline',

icons: {

refresh: 'glyphicon-repeat',

toggle: 'glyphicon-list-alt',

columns: 'glyphicon-list'

pagination: true,

showColumns: true,

showRefresh: true,

pageSize: 5,

pageList: [5, 10, 15, 20],

columns: [

{

checkbox: true

{

field: 'ID',

title: 'ID'

}, {

field: 'RealName',

title: '姓名'

}, {

field: 'title',

title: '部门'

}, {

field: 'Email',

title: 'Email'

}, {

field: 'Money',

title: 'Money'

}, {

field: 'Address',

title: '地址'

}]

});

$(function(){

$('#exampleTableToolbar').bootstrapTable({

url:"/WGR/AddDeleteUser",

search:true,

showRefresh:true,

showToggle:true,

showColumns:true,

toolbar:'#exampleToolbar',

iconSize:'outline',

icons:{

refresh:'glyphicon-repeat',

toggle:'glyphicon-list-alt',

columns:'glyphicon-list'

pagination:true,

showColumns:true,

showRefresh:true,

pageSize:5,

pageList:[5,10,15,20],

columns:[

{

checkbox:true

{

field:'ID',

title:'ID'

},{

field:'RealName',

title:'姓名'

},{

field:'title',

title:'部门'

},{

field:'Email',

title:'Email'

},{

field:'Money',

title:'Money'

},{

field:'Address',

title:'地址'

}]

});

url是后台返回的json，columns是后台查询的字段，field必须与后台处理的字段一样，我后台如下

public ActionResult AddDeleteUser()

{

UsersBll user = new UsersBll();

ViewBag.user = user.GetList(u=>true).Select(u => new {u.Address,u.Email,u.Money,u.RealName,title=u.Dept.Title,u.ID });

return Json(ViewBag.user, JsonRequestBehavior.AllowGet);

}

publicActionResultAddDeleteUser()

{

UsersBlluser=newUsersBll();

ViewBag.user=user.GetList(u=>true).Select(u=>new{u.Address,u.Email,u.Money,u.RealName,title=u.Dept.Title,u.ID});

returnJson(ViewBag.user,JsonRequestBehavior.AllowGet);

}

单选或多选获取行id来删除数据

$('#delete').click(function () {

var data = $('#exampleTableToolbar').bootstrapTable("getSelections");

if (data.length > 0) {

layer.confirm('你确定要删除选中的数据吗？', {

btn: ['确定', '取消'] //按钮

}, function () {

for (var i = 0; i < data.length; i++) {

var userid = data[i].ID;

$.post('/WGR/DeleteUser', {userid:userid}, function (msg) {

if (msg == "no") {

layer.msg('删除失败！', { icon: 2 });

}

});

}

layer.msg('删除成功！', { icon: 1,time:1000 });

window.location.reload();

});

}

});

$('#delete').click(function(){

vardata=$('#exampleTableToolbar').bootstrapTable("getSelections");

if(data.length>0){

layer.confirm('你确定要删除选中的数据吗？',{

btn:['确定','取消']//按钮

},function(){

for(vari=0;i

varuserid=data[i].ID;

$.post('/WGR/DeleteUser',{userid:userid},function(msg){

if(msg=="no"){

layer.msg('删除失败！',{icon:2});

}

});

}

layer.msg('删除成功！',{icon:1,time:1000});

window.location.reload();

});

}

});

delete是我的删除按钮的id，通过getSelections方法获取选中行的数据(为数组)，若是没有选中getSelections获取的数组长度为0

bootstrap-table常用的属性和方法

属性

url: '/Interface/GetData', //请求后台的URL(*)

method: 'get', //请求方式(*)

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

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

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

pagination: true, //是否显示分页(*)

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

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, //是否显示父子表

url:'/Interface/GetData',//请求后台的URL(*)

method:'get',//请求方式(*)

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

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

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

pagination:true,//是否显示分页(*)

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

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,//是否显示父子表

方法

定义方法响应的语法 $('#table').bootstrapTable('method', parameter);

方法名

参数

描述

举例

getOptions

none

返回各项的object

$table.bootstrapTable(‘getOptions’);

- 请查看： getOptions

getSelections

none

返回被选择的行，当没有行被选择，则返回空数组(但并不是undefined，也不是null，是长度为0的空数组，所以可以判断长度是否大于0来确定是否选择了行)

$table.bootstrapTable(‘getSelections’);

- 请查看： getSelections

getAllSelections

none

返回所有被选的行(原文中：contain search or filter，其实就是你选择的筛选之后的数据)，当没有行被选择，则返回空数组

$table.bootstrapTable(‘getAllSelections’);

- 请查看： getAllSelections

showAllColumns

none

显示所有的列

$table.bootstrapTable(‘showAllColumns’);

- 就是显示所有的列，并没什么可说的

hideAllColumns

none

隐藏所有的列

$table.bootstrapTable(‘hideAllColumns’);

- 就是隐藏所有的列

getData

useCurrentPage

获取被加载的表的数据，如果你设置了使用当前页的数据(useCurrentPage)，则返回当前页的数据

$table.bootstrapTable(‘getData’);

- 请查看： getData

getRowByUniqueId

获取你想要的某行的数据(设置某行的id)

$table.bootstrapTable(‘getRowByUniqueId’, 1);后面的1就是你要的那一行的ID

- 请查看： getRowByUniqueId

load

data

向表中加载数据，原来的数据将被移除

$table.bootstrapTable(‘load’, data);

- 请查看： load

append

data

将数据追加在最后一行后

$table.bootstrapTable(‘append’, data);data可以是数组

- 请查看： append

prepend

data

也是追加，只是在第一行之前

$table.bootstrapTable(‘prepend’, data);data可以是数组

- 请查看： prepend

remove

params

移除一行或多行你所选的数据

$table.bootstrapTable(‘remove’, {field: ‘id’, values: ids});

- id：所需移除的那一行(rows，一或多行)的字段

- values：被移除的行的数组

- 请查看： remove

removeAll

移除表中所有的数据

$table.bootstrapTable(‘removeAll’);

- 请查看： removeAll

removeByUniqueId

移除某行数据(设置某行的id)

$table.bootstrapTable(‘removeByUniqueId’, 1);后面的1就是你想移除的那一行的ID

- 请查看： removeByUniqueId

insertRow

params

新增一行，所需的参数如下：

- index：你想插入到哪(只要愿意，想插哪就插哪，想插谁就插谁)

- row：你想插入的数据

$table.bootstrapTable(‘insertRow’, {index: 1, row: row});

- 请查看： insertRow

updateRow

params

更新行数据，所需的参数如下：

- index：所要更新的行的索引(index)

- row：你想换的新的数据

$table.bootstrapTable(‘updateRow’, {index: 1, row: row});

- 请查看： updateRow

- 请查看： Bootstrap Table实现定时刷新数据

updateByUniqueId

params

更新某行数据，所需的参数如下：

- id：你想更新那行的id(唯一)，(只要愿意，想换哪个换哪个)

- row：你想换的新的数据

$table.bootstrapTable(‘updateByUniqueId’, {id: 3, row: row});

- 请查看： updateByUniqueId

showRow

params

显示特定行，所需的参数至少包括下面所列的一个：

- id：所要显示的行的索引(index)

- uniqueId：那一行的id

$table.bootstrapTable(‘showRow’, {index:1});

- 请查看： showRow/hideRow

hideRow

params

隐藏特定行，所需的参数至少包括下面所列的一个：

- id：所要隐藏的行的索引(index)

- uniqueId：那一行的id

$table.bootstrapTable(‘hideRow’, {index:1});

- 请查看： showRow/hideRow

getRowsHidden

boolean

获取隐藏的行(官方原话很多，其实总结起来就前面那一句)

$table.bootstrapTable(‘getRowsHidden’);

方法名

参数

描述

举例

mergeCells

options

融合~(把多格合并为一格)，所需的参数如下：

- index：所要合并的格所在行的索引(index)

- field：所在列的字段名

- rowspan：合并的行总数目

- colspan：合并的列总数目

$table.bootstrapTable(‘mergeCells’, {index: 1, field: ‘name’, colspan: 2, rowspan: 3});

- 请查看： mergeCells

updateCell

params

更新某格数据，所需的参数如下：

- index：所要合并的格所在行的索引(index)

- field：所在列的字段名

- value：要换的新的数据

你也可以设置{reinit:false}来禁用表格的再次初始化

$table.bootstrapTable(‘updateCell’,{index:index,field:’id’,value:value});

refresh

params

刷新服务端的数据：

- 可以设置{silent:true}来偷偷地(<_>

- 设置{url:newUrl,pageNumber:pageNumber,

pageSize:pageSize}改变请求的地址，页数，每页所显示的条数

- 可以设置{query:{foo:’bar’}}增加特定的参数

$table.bootstrapTable(‘refresh’);

- 请查看： refresh

refreshOptions

options

看例子吧

resetSearch

text

重置搜索的文本(text)

showLoading

none

显示正在加载……

hideLoading

none

隐藏正在加载……

checkAll

none

选择当前页的所有行

$table.bootstrapTable(‘checkAll’);

- 请查看： checkAll/uncheckAll

uncheckAll

none

取消选择当前页的所有行

$table.bootstrapTable(‘uncheckAll’);

- 请查看： checkAll/uncheckAll

checkInvert

none

反向选择，不难理解吧

$table.bootstrapTable(‘checkInvert’);

check

index

选择某一行，索引(index)从0开始

$table.bootstrapTable(‘check’, 1);

- 请查看： check/uncheck

uncheck

index

取消选择某一行，索引(index)从0开始

$table.bootstrapTable(‘uncheck’, 1);

- 请查看： check/uncheck

checkBy

params

通过数组选择某一行，所需的参数如下：

- field：所要选的字段名

- values：所要选的那些值(数组)

官方没，啊，有例纸：

- $(“#table”).bootstrapTable(“checkBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]});

- 请查看： checkBy/uncheckBy

uncheckBy

params

通过数组选择某一行，所需的参数如下：

- field：所要取消选择的字段名

- values：所要取消选择的那些值(数组)

$(“#table”).bootstrapTable(“uncheckBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]});

- 请查看： checkBy/uncheckBy

resetView

params

改变表格的样式，例如改变表格的高度(height)

$table.bootstrapTable(‘resetView’);

- 请查看： resetView

resetWidth

none

自动改变表头和表脚(就译成脚，任性)的宽度来适应每列的宽度

$table.bootstrapTable(‘resetWidth’);

destroy

none

销毁表格 A！T！T！A！C！K！

$table.bootstrapTable(‘destroy’);

- 请查看： destroy

showColumn

field

显示特定的列

$table.bootstrapTable(‘showColumn’, ‘name’);

- 请查看： showColumn/hideCoulumn

hideColumn

field

隐藏特定的列

$table.bootstrapTable(‘hideColumn’, ‘name’);

- 请查看： showColumn/hideCoulumn

方法名

参数

描述

举例

getHiddenColumns

获取所有隐藏的列

$table.bootstrapTable(‘getHiddenColumns’);

getVisibleColumns

获取所有显示的列

$table.bootstrapTable(‘getVisibleColumns’);

scrollTo

value

滚……到哪个位置，单位是’px’，如果设为’bottom’，嗖，恭喜你已到表尾

$table.bootstrapTable(‘scrollTo’, 0);

- 请查看： scrollTo

getScrollPosition

none

获取当前所滚到的位置，单位你懂得，就是’px’

$table.bootstrapTable(‘getScrollPosition’);

filterBy

none

只能在客户端(client-side，相对server-side)这边用，过滤表中的数据

例如：

- 可以设置{age:10}来只显示age为10的数据

- 不仅单的，你还可以双飞，甚至多p，设置{age: 10, hairColor: [“blue”, “red”, “green”]} ，这样你就得到了一群10岁的，头发颜色为蓝，红，绿的……数据

$table.bootstrapTable(‘filterBy’, { id: [1, 2, 3] });

- 请查看： filterBy

selectPage

page

跳转到特定的页面

$table.bootstrapTable(‘selectPage’, 1);

- 请查看： selectPage/prevPage/nextPage

none

跳转到上一页

$table.bootstrapTable(‘prevPage’);

- 请查看： selectPage/prevPage/nextPage

none

跳转到下一页

$table.bootstrapTable(‘nextPage’);

- 请查看： selectPage/prevPage/nextPage

togglePagination

none

词穷，请看例纸

$table.bootstrapTable(‘togglePagination’);

- 请查看： togglePagination

toggleView

none

改变视图

$table.bootstrapTable(‘toggleView’);

- 请查看： toggleView

expandRow

index

可使用条件：detail view设为了true，不然无法使用视图功能，这个也没用

- 通过参数index来展开此列的详细视图

collapseRow

index

可使用条件：detail view设为了true

- 通过参数index来关闭此列的详细视图

expandAllRow

is subtable

可使用条件：detail view设为了true

- 展开所有列的详细视图

$table.bootstrapTable(‘expandAllRow’);

- 参考上面的实例，上面是展开(折叠)某一行的视图，这个是所有行的

collapseAllRow

is subtable

可使用条件：detail view设为了true

- 关闭所有列的详细视图

$table.bootstrapTable(‘collapseAllRow’);

- 参考上面

实例效果图

weixin_39745269

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrapr表格父子框_bootstrap-table的基本使用方法和属性

引入相应的js、css先引入jQuery，jQuery必须在前面！1引入bootstrap的js和css12345678下载bootstrap-table的js和css并引用到项目中=>传送门使用bootstrap-table创建一个table标签，给这个标签取一个id(我取的id是exampleTableToolbar)，然后开始写javascript代码$(function () {$(...
复制链接

扫一扫