Bootstrap结合BootstrapTable的使用，分为两种模试显示列表。引用的css：引用的JS：常用方法：刷新表格：$table.bootstrapTable('refresh')获取选择的行：$table.bootstrapTable('getSelections')1.服务端请求：即当数据量大，千百万条数据的情况下，只获取当页条件下的数据。每点击分页或查询都向服务端重新获取分页数据。前端代码：?1234567functioninitTable(){varqueryUrl='@Url.Content("~/Welcome/QueryList")'+'?rnd='++Math.random()$table=$('#table-javascript').bootstrapTable({//method:'get',method:'post',contentType:"application/x-www-form-urlencoded",//必须的，publicActionResultQueryList(intpageIndex=1,intpageSize=100){try{stringname=Request["UserName"]stringbirthday=Request["Birthday"]stringgender=Request["Gender"]stringAddress=Request["Address"]DocumentdocQuery=newDocument()if(!string.IsNullOrEmpty(name)){docQuery.Add("Name",newMongoRegex(".*"+name+".*",MongoRegexOption.IgnoreCase))}if(!string.IsNullOrEmpty(birthday)){docQuery.Add("Birthday",newMongoRegex(".*"+birthday+".*",MongoRegexOption.IgnoreCase))}if(!string.IsNullOrEmpty(gender)){docQuery.Add("Gender",gender)}if(!string.IsNullOrEmpty(Address)){docQuery.Add("Address",newMongoRegex(".*"+Address+".*",MongoRegexOption.IgnoreCase))}if(this.HttpContext.Request.QueryString.AllKeys.Contains("ToExcel")){ListlistExport=MongoDbHelper.GetList(MongoTables.OpenRoom,docQuery)//ListlistTilte=newList{""}ExportMethod(listExport)}longtotalCount=MongoDbHelper.GetTotalCount(MongoTables.OpenRoom,docQuery)varlist=MongoDbHelper.GetList(MongoTables.OpenRoom,docQuery,newDocument(),pageIndex,pageSize)stringjsonString=JsonHelper.ObjToJson(list)jsonString="{\"total\":"+totalCount.ToString()+",\"rows\":"+jsonString+"}"returnContent(jsonString)}catch(Exceptionex){returnContent(ex.Message)}}注意返回的格式：要返回总记录数total及分页后数据rows。未解决问题：导出Excel时，超出65536行数据时，会异常。怎样解决这个问题？2.客户端请求：当数据量较少，只有上千条数据时，一次性将所有数据返回给客户端，无论点下一页，或搜索条件时，不向服务端发请求，实现全文检索。这个比较简单，将sidePagination属性设为"client",因为客户端会处理分页和全文检索，无需向服务器端发请求，所以也无需传递参数。前端JS:?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143functioninitTable(){varqueryUrl='@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:' ',title:' 号码',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数据即可。后台代码：?123456789101112131415161718192021222324252627publicActionResultQueryList(){try{Listlist=accessHelper.GetUserList()stringjsonString=JsonHelper.ObjToJson(list)returnContent(jsonString)}catch(Exceptionex){returnContent(ex.Message)}}安装
npm install xlsx --save
npm installiview--save
main入口引入
import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
使用
<button @click="exportExcel">导出excel
:columns="columns1" :data="data1"></Table>
JS引入封装excel
import excelfrom '../../config/excel'
data(){
return{
columns1: [
{
title:'Name',
key:'name'
},
{
title:'Age',
key:'age'
},
{
title:'Address',
key:'address'
},
],
data1: [
{
name:'John Brown',
age:18,
address:'New York No. 1 Lake Park',
date:'2016-10-03'
},
{
name:'Jim Green',
age:24,
address:'London No. 1 Lake Park',
date:'2016-10-01'
},
{
name:'Joe Black',
age:30,
address:'Sydney No. 1 Lake Park',
date:'2016-10-02'
},
{
name:'Jon Snow',
age:26,
address:'Ottawa No. 2 Lake Park',
date:'2016-10-04'
},
],
methods: {
exportExcel() {
if (this.data1.length) {
const cloneData =this.data1
const params = {
title: ['Name', 'Age', 'Address', ],
key: ['name', 'age', 'address', ],
data: cloneData,
autoWidth:true,
filename:'工单列表'
}
excel.export_array_to_excel(params)
}else {
this.$Message.info('表格数据不能为空！')
}
}
