jquery是什么功能组件【Bootstrap】bootstrap-table表格组件
【Bootstrap-table】
  顾名思义，这个组件专注于bootstrap风格的表格的设计，并且提供了很多表格的基础和进阶的功能，给我们开发前端的表格省下很多⼒⽓。
  本⽂主要参考这位博主的系列⽂章：
  【wwwblogs/landeanfen/p/5005367.html】
  有兴趣的可以移步看原版，我⾃⼰做⼀个笔记性质的东西。
■  基本使⽤
  和⼤多数bs组件⼀样，⾸先我们要确保引⼊以下⼏个基本⽂件：
<link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
  然后是引⼊bootstrap-table的⼀些⽂件：
<link href="/static/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet"/>
<script src="/static/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="/static/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
  最后⼀个是国际化显⽰⽂件，即⽀持组件显⽰中⽂。
  引⼊⽂件完毕之后，我们在HTML中简单地写上⼀个table标签即可：
<table id="bsTableTest"></table>
  然后在相应的js中写如下内容：
$(document).ready(function(){
$('#skillContentTable').bootstrapTable({
url: querySkillUrl,
columns: [...],
resizable: true,
pagination: true,
sidePagination: 'client',
pageNumber: 1,
pageSize: 10,
pageList: [10,20,50,'All'],
search: true,
showRefresh: true,
showToggle: true,
showColumns: true,
});
});
  依次解释⼀下各个参数的话：
  url  代表了表格加载数据（包括页⾯的⾸次加载和点击刷新按钮等时机）时向后端某⼀个url索取数据。此参数和data参数可⼆选其⼀
  columns  指出了表格的<th>部分的结构，⽐较重要且似乎必须在前端写出，这⾥因为⽐较长没有具体写出来，下⾯再细说。
  resizable  可以让⽤户通过拖动调整各个列的列宽，需要其他组件的⽀持，上⾯也没有写出来，下⾯细说
  pagination  是否分页。bootstrap-table可以⾃动给我们⽣成分页，这个功能很好（回想起⾃⼰⼿动写分页的痛苦。。）
  sidePagination  bs-table中分页分成两种模式，即所谓的server模式和client模式。两种模式下后端给出的数据结构不同，分页运算也在不同的地⽅完成。⾄于结构如何不同后⾯细说
  pageNumber，pageSize，pageList  很显然是⼀些分页的参数，pageNumber是默认显⽰第⼏页，⼀般设置成1；pageSize是默认⼀页显⽰多少⾏；pageList是提供给⽤户可以调整的⼀页显⽰的⾏数，是个列表
  showRefresh  是否显⽰刷新按钮，在右上⾓
  showColumns  是否显⽰“显⽰列控制"按钮，通过这个按钮可以调整页⾯上显⽰哪些字段⽽不显⽰哪些
  showToggle  是否显⽰试图切换按钮，通过这个按钮可以在表格切换和卡⽚视图间切换
  除了上⾯这些还有⼀些基本的初始化参数：
  striped  设置为true时表格样式为table-striped的样⼦
  classes  渲染出的table的class，默认是table table-hover
  strictSearch  启⽤完全匹配搜索⽽不是模糊搜索
  undefinedText  当数据为undefined时显⽰的字符，默认是'-'。
  uniqueId  指定⼀列作为ID，但是没有直接作⽤，在相关⽅法中才有⽤
  height  指出表格⾼度，当表格⾼度超过指定值时就有滚动条了。
  maintainSelected  如果设置为true，那么表格在多页且有checkbox之类的东西在时，翻页后仍然记住之前选中项
■  上述参数的细化说明
  先来说说resizable吧，这个参数是设置为true之后还需要在页⾯上引⼊下⾯两个东西：
<script src="colResizable-1.6.min.js"></script>
<script src="bootstrap-table/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>
  请注意，colResizable-1.6.min.js不是bootstrap-table的⼀部分，需要另外去⽹上并且下载。这是⼀个jquery调整列宽的组件。⽽bootstrap-table-resizable.min.js是bootstrap-table中的⼀个扩展。在extensions⽬录下。这个⽬录中有很多好⽤的拓展，以后可能也会再说到。
  再简单说下data，data参数可以在js内部就给表格充实内容。但是由于很少会有在前端计算决定表格内容的场景，基本上都是⽤不到的，除了在测试或者⼲嘛的时候⽤⼀下。
  ●  columns参数说明
  正如上⾯说明的，columns参数的值指出了这个表格<th>部分应该如何构建，其数据结构是这样的：⽐如我要构建⼀张⼝袋妖怪的招式的统计表格：
columns: [{
checkbox:true,
align: 'center'
},{
field: 'id',
title: '编号',
sortable: true
},{
field: 'cn_name',
title: '中⽂名',
sortable: true
},{
field: 'jp_name',
title: '⽇⽂名'
},{
field: 'en_name',
title: '英⽂名'
},{
field: 'nature',
title: '属性',
sortable: true
},{
field: 'generation',
title: '世代',
sortable: true
},{
field: 'power',
title: '威⼒'
},{
field: 'hirate',
title: '命中'
field: 'type',
title: '攻击类型'
},{
field: 'pp',
title: 'pp点数'
}],
  可以看出其值是⼀个字典的列表（or you say object的数组），field指出了字段名⽽title指出了页⾯上显⽰的列名。此外还有额外的参数sortable指出了⽤户可以点击某列表头，依此列对当前数据进⾏排序。另外还可以注意第⼀项的checkbox:true，这表⽰在开头的第⼀列有⼀列checkbox，点击每⼀⾏前⾯的可以选中这⼀⾏，⽽点击表头的checkbox更是可以全选。
  除了上述列参数，还有很多其他的列参数，⽐如：
  radio  和checkbox类似，渲染出⼀列radio
  align,vlign,halign  指出了列的对其/垂直对其/⽔平对齐⽅式。
  visible  指出该列是否默认显⽰，如果设置为false即隐藏了，那么可以通过showColumns的那个按钮再调出来
  formatter  是⼀个函数，可以对传⼊此列所有单元格的数据做⼆次加⼯。这个函数接收三个参数value , row , index。这三个参数分别代表了单元格的值，单元格所在的⾏的⾏对象，单元格下标。除此之外formatter还有⼀个很重要的⽤法，那就是向单元格中添加按钮等⾮⽂本⽽是HTML的内容。
  responseHandler  也是⼀个函数，当后端传递来的数据不符合bootstrap-table需要的格式时可以通过这个函数做⼀个适应性处理，接受⼀个reponse作为参数代表收到的回应的JSON。
  这⾥也只是简单的说了⼀些列参数，更完全的参数列表可以参考官⽅⽂档【bootstrap-table.wenzhixin/zh-
cn/documentation/#%E5%88%97%E5%8F%82%E6%95%B0】
  ●  sidePagination和后端传来的数据格式
  当设置sidePagination为client模式时，即所有分页排序操作都在客户端的浏览器中完成。当数据总量
⽐较少时这种模式可以减少前后端多余的通信成本，⽐较适合。⽽且在这种模式下，后端传来数据格式⽐较简单。⽐如上⾯这个表，在后端的django框架中我可以这样返回：
def query_for_skill(request):
data_set = []
for skill in Skill.objects.all():
data_set.Attrs())
# return HttpResponse(json.dumps({'rows':data_set,'total':len(data_set)}),content_type='application/json')
return HttpResponse(json.dumps(data_set),content_type="application/json")
  这⾥模型类Skill还实现了⼀个⽅法getAttrs，这个⽅法是返回了模型类对象定义的各个字段和各⾃值对应的字典。所以当我们要把数据⼀股脑⼉地传递给前端时，Skill.objects.all()是⼀个模型类对象的列表，前端尚⽆法识别，要我们做个⼩循环来处理下数据，这样就传递给前端的数据就是JSON的，像这样的: [{id: 1,cn_name: 'xxx',}, ...]。因为采取客户端分页排序的⽅式，所以⼀股脑⼉把数据传递给前端之后，前端再进⾏分页排序等操作时不会再向后端请求数据。效果：
  同样的分页效果，还可以通过server的sidePagination来实现。
  当通过server的sidePagination来做时需要注意后端返回的数据结构有变化，应该像上⾯view函数中被注释掉的那个return的json串那样。即返回⼀个字典，含有rows和total两个key，前者的value和之前client模式的返回内容⼀样，⽽后者的value是指出了所有记录的总长
  当采⽤server模式时，像上⾯那样的view函数就不是很管⽤了。事实上，点击server模式的分页，会
向后台发出⼀个新的ajax请求来请求数据，其请求参数默认包含了limit,offset,search,sort,order，分别代表⼀页显⽰数⽬；跳过前offset条记录；查字符串内容；排序字段名；排序⽅式('asc'或'desc')。如果想要传⼊更多的参数可以设置queryParams这个初始化参数。这个ajax请求默认是GET⽅法，如果想要⽤POST，可以在初始化参数method中指出
  queryParams的值是⼀个函数对象。这个函数接受⼀个参数params，代表上⾯提到的那五个参数和各⾃值形成的对象（如果是空值则是undefined）。最终返回是⼀个经过函数处理的object作为真的请求参数发出请求。如果返回false则取消请求，所以也可以在这个函数中增加⾃定义过滤条件或进⾏查询条件合法性的检查。
  对view函数的改造，很明显应该适应于前端传递过来的参数。在后端做出⼀些过滤筛选后返回⼀个有限的结果集。⽐如像上⾯那个函数我们可以这么改造来适应分页、排序的需求：
def query_for_skill(request):
data_set = []
offset = ('offset')
limit = ('limit')
sort = ('sort')
order = ('order')
length = len(Skill.objects.all())
if not offset or not limit:
targets = Skill.objects.all()
if sort:
sort = sort if order == 'asc'else'-'+sort
targets = der_by(sort)
else:
offset = int(offset)
limit = int(limit)
if sort:
sort = sort if order == 'asc'else'-' + sort
targets = Skill.objects.all().order_by(sort)[offset:offset+limit]
else:
targets = Skill.objects.all()[offset:offset+limit]
for skill in targets:
data_set.Attrs())
return HttpResponse(json.dumps({'rows':data_set,'total':length}),content_type='application/json')
  再额外提⼀句，在client模式中，search是直接在客户端中完成搜索，不涉及额外通信以及耗费后台资源。但是search该参数并没有指出是search了哪个字段的内容，这就导致，如果在server模式下也⽤search的话，势必要对整个表的所有字段进⾏检查，来寻和search给出的值相关的内容。这个不仅编程⿇烦，还会给数据库带来很⼤负担。所以不推荐⽤bootstrap-table⾃带的search。如果有search
的这需求，可以考虑通过在表格上⾯写⼀个filter，然后在queryParams的函数中加上额外的参数来进⾏查询。
■  相关⽅法
  和其他很多组件⼀样，bs-table有⾃⼰的⼀些⽅法接⼝，可以让程序员实现⾃⼰的逻辑。这些⽅法的调⽤⽅法主要是
$('#bsTableTest').bootstrap('<⽅法名>',<⼀个object形式的参数>)。常⽤的⽅法有：
  getOptions  获取表格的⼀些基本属性，返回⼀个object，key有像conlumns，data，sortOrder，class这些
  getSelections  获取被选中的（包括radio或者checkbox）各⾏对象组成的列表。
  load,append,prepend  这三个⽅法的参数都是data，即[{...},{...}...]形式的数据，load是清空当前表中所有数据，append是在表尾
加，prepend是在第⼀⾏前⾯插⼊数据
  remove  参数是⼀个object，含有两个字段，field和values。通过两个字段的值可以定位⼀个或多个单元格，把这些单元格所在的⾏删除。例如bootstrapTable('remove',{field:'id',values:[3]})。需要注意的是即便是只定位⼀个单元格，即values后列表中只有⼀个值，那也要写出是个列表，否则会识别失败
  insertRow,updateRow  这两个⽅法分别⽤于在指定位置插⼊⼀个新⾏或者更新指定⾏的信息。参数有index和row，如bootstrapTable('insertRow',{index:2,row:{id:99,name:'New Row',desc:'Test'}})，需注意，如果某些字段没有在params中给出值的话，那么insert时默认这些字段为undefined，update时默认这些字段没有改变。
  getRowByUniqueId  这个⽅法要配合初始化时的uniqueId参数指定的字段，参数为此字段的某个值，返回值等于参数中给出值的那⼀⾏的⾏对象
  showRow,hideRow  显⽰隐藏⾏，参数可⽤index，也可⽤uniqueId，如bootstrapTable('showRow',{index:2})
  showLoading,hideLoading  显⽰/隐藏加载状态
  mergeCells  ⽤于合并单元格，参数有四个，如果把合并后最左上⾓的那个单元格称为初始单元格的
话，那么index是初始单元格的⾏的index，field是初始单元格所在列字段名。这两个参数确定了⼀个起始单元格，然后还有两个参数rowspan和colspan都是int型，指出了从初始单元格开始向下并⼏⾏向右并⼏列。
  updateCell  index，field和value三个参数⽤来更新单个单元格内的值
  refresh  刷新表格数据，可以加⼊参数url指定请求发向的url（可以是⼀个新的），silent:true时静默更新，query:{} 可以指出⼀些新的ajax请求时的参数。 
  resetSearch  可以设置搜索框中⽂字，这个⽅法⽐较特殊的是参数不是⼀个object⽽是单纯的string。例如
bootstrapTable('resetSearch','Hello')
  resetView/Width  可以重设样式（如宽度⾼度等），常⽤在页⾯⼤⼩、宽度等发⽣变化时。⽐如侧边栏收放引起表格所在容器宽度发⽣变化，容易导致表头和表内容列错位。在宽度变化时调⽤这个函数便可以⾃动修正。
  checkAll,uncheckAll  全选/全不选当前页⾯中的⾏
  check/uncheck  选中/不选⼀⾏，同resetSearch⼀样，不⽤传递object，直接写int型的index数据即可例如 bootstrapTable('check',2)
  checkBy/uncheckBy  bootstrapTable('checkBy',{field:'id',values:[1,3,5]})，选中部分，条件由参数给出
  getHiddenRows/getHiddenColumns  获取隐藏着的⾏和列们
  getScrollPosition/scrollTo  当表格有滚动条时，前者返回滚动条滚动位置，后者设置。单位是px，scrollTo可以是'bottom'来拉到底
  filterBy  在客户端进⾏数据过滤，参数是field和values
  prevPage/nextPage/selectPage  跳往前⼀页/后⼀页/指定页
■  相关事件
  除了⽅法之外，组件另外⼀个重要的组成部分就是事件了。boostrap-table的事件的使⽤⽅法并不是经典的$(xxx).on('事件',function)，⽽是采⽤将事件作为初始化参数的⼀部分传⼊初始化函数中。⽐如：
$('#bsTableTest').bootstrapTable({
xxx: xxx,
事件: function(params){...}
});
  正如上⾯所⽰，事件会关联⼀个函数，⽽不同的事件，关联的函数有哪些参数也都是不⼀样的。下⾯列出主要可能⽤到的事件：
  onClickRow  点击⼀⾏时触发的事件，参数有row , element , field三个，分别代表点击⾏的⾏对象，点击⾏的jquery<tr>对象，点击的列的title
  onDblClickRow  双击⾏事件，参数和onDblClickRow⼀样
  onClickCell  点击单元格触发的事件，参数包括field , value , row , element，分别表⽰点击单元格所在列title，单元格的值，单元格所在⾏⾏对象，单元格的jquery<td>对象
  onDblClickCell  双击单元格事件，参数和onClickCell⼀样
  onSort  点击排序按钮进⾏数据排序时触发的事件，包括参数name和order分别代表排序字段名和排序⽅式（asc和desc）
  onCheck/onUncheck  当某⼀⾏被选中/取消选中时触发事件，参数有row和element
  onCheckAll/onUncheckAll  参数是rows，⼀个被选中所有⾏对象的数组。需要注意，⼿动⼀个⼀个选择时不会触发这个事件，只有按表头的那个全选，全选⾏时才会触发。
  onLoadSuccess/onLoadError  当加载数据成功/失败时触发的事件，前者参数data，后者参数status（HTTP返回码，如500,404之类的）
  onColumnSwitch  当设置某⼀列可见/不可见时触发，参数是field和checked，field是被操作的字段title名，⽽checked是boolean 值，表⽰操作后该字段是否是显⽰状态。
  onPageChange  换页时触发事件，参数有number和size，分别代表跳转后位于第⼏页且页⾯内有多少条记录
  onSearch  使⽤bs-table⾃带搜索框进⾏搜索时触发事件，参数是text即搜索关键⽂
  onRefresh  刷新表格数据是触发的事件，参数params是⼀个挺复杂的对象，包含了此次刷新的⼀些信息。不具体展开说了，有需要的话可以测试下
■  ⼀些实践

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。