本文共 2071 字,大约阅读时间需要 6 分钟。
,
这个表格比datatable是好用,而且js使用与easyui类似,可降低学习曲线 效果如下:/** * 初始化主表格的事件绑定 */ function initMainGridEvents(){ mainEvents = { 'click .edit':function(e,value,row,index){ edit(row); }, 'click .remove':function(e,value,row,index){ remove(row); } }; }/** * 初始化列表 */ function initMainGrid(){ mainGrid = $('#main-grid').bootstrapTable({ sidePagination:'server',cache:false,method:'post',url:ctx+'/ucsUser/find',queryParams:queryParams,contentType: 'application/x-www-form-urlencoded', uniqueId:'id',sortName:'username',height:490, pagination:true,pageNumber:1,pageSize:20,pageList:[20,30,50],search:false, toolbar:'#main-grid-tb',singleSelect:false,striped:true,clickToSelect:true, columns:[ { checkbox:true}, { field:'username',title:'用户帐号',sortable:true,width:100,align: 'center',valign: 'middle'}, { field:'name',title:'用户实名',sortable:true,width:100,align: 'center',valign: 'middle',hide:true}, { field:'email',title:'email',sortable:true,width:100,align: 'center',valign: 'middle'}, { field:'phone',title:'联系电话',sortable:true,width:100,align: 'center',valign: 'middle',formatter:fmtPhone}, { field:'events',title:'操作',sortable:false,width:100,align: 'center',valign: 'middle',formatter:fmtEvents,events:mainEvents} ] }); } function fmtPhone(val){ return util.fmtMobile(val); } /** * 查询条件 */ function queryParams(params){ var solidParams = { page:params.pageNumber, rows:params.limit, sort:params.sort, order:params.order }; solidParams = $.extend(solidParams,searchForm.serializeObject()); return solidParams; } /** * 格式化列表中的事件 */ function fmtEvents(){ return mainGridPermissions.join(''); }
你会发现queryParams中params.pageNumber
没有这个变量,所以需要修改一下bootstrap table源码,找到代码位置添加下面红色方框中的内容即可。
转载地址:http://dqwo.baihongyu.com/