
第3.1.6章 WEB系统最佳实践 js控件之bootstrap table
下面jsp代码,分为三部分:查询条件、表格的工具栏、表格。
页面除了上面的jsp代码,还有一些需要做的那就是,shiro的标签只能在jsp中才能被解析,放到js中是做不到的,所以这里额外提一下。
发布日期:2021-05-04 17:00:14
浏览次数:10
分类:技术文章
本文共 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源码,找到代码位置添加下面红色方框中的内容即可。
发表评论
最新留言
很好
[***.229.124.182]2025年03月12日 11时04分32秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
干了八年的阿里面试官,给大家分享我面试时最爱问的Java面试题
2019-03-03
华为鸿蒙到底是不是安卓系统套了个壳?
2019-03-03
redis知识点学习
2019-03-03
vue出现sockjs-node/info?t=1462183700002 报错解决方案
2019-03-03
删除mongodb中已存在的用户
2019-03-03
分布式理论基础知识点入门
2019-03-03
SpringCloud之消息总线(Spring Cloud Bus)刷新配置
2019-03-03
多线程之创建线程的两种方式
2019-03-03
fragment中recyclerview的重新加载问题
2019-03-03
集合 List
2019-03-03
设计模式:可复用面向对象软件及基础:3-6 结构型模式:享元模式(FlyWeight)
2019-03-03
window程序设计(1):第一个windows程序
2019-03-03
windows程序设计(4):文本输出
2019-03-03
JZOJ7月5日提高组反思
2019-03-03
JZOJ7月20日提高组T2 昂贵的珍珠垂饰
2019-03-03
JZOJ7月27日提高组反思
2019-03-03
JZOJ7月29日提高组反思
2019-03-03
21.2.3总结
2019-03-03