博客
关于我
第3.1.6章 WEB系统最佳实践 js控件之bootstrap table
阅读量:254 次
发布时间:2019-03-01

本文共 2071 字,大约阅读时间需要 6 分钟。

,

这个表格比datatable是好用,而且js使用与easyui类似,可降低学习曲线
效果如下:
1
下面jsp代码,分为三部分:查询条件、表格的工具栏、表格。
2
页面除了上面的jsp代码,还有一些需要做的那就是,shiro的标签只能在jsp中才能被解析,放到js中是做不到的,所以这里额外提一下。

/**     * 初始化主表格的事件绑定     */    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源码,找到代码位置添加下面红色方框中的内容即可。

2

转载地址:http://dqwo.baihongyu.com/

你可能感兴趣的文章
斩获23项冠军,日均调用破万亿!百度交出年度AI成绩单:语音语言领衔技术突破,国产自研成大趋势...
查看>>
一只53万!波士顿动力网红机器狗开售,充电器价格1万多!
查看>>
对曲线的坐标的积分的斯托克斯公式+参数定积分法
查看>>
幂函数
查看>>
200118堆排序(Heap Sort)
查看>>
剑指Offer--Java--字符串中第一个只出现一次的字符
查看>>
阶乘分解 (算法竞赛进阶指南 P136,质因数分解)
查看>>
2021-04-13 Python 随机列表、集合、元组、字典的生成和排序
查看>>
hslogic_基于FPGA的混沌加密
查看>>
SAR图像超分辨技术
查看>>
fpga工程师笔试题
查看>>
神经网络遗传算法函数极值寻优-非线性函数极值
查看>>
emd分解matlab程序
查看>>
Java版取色器(7)——界面简单装饰
查看>>
Problem F: 零起点学算法106——首字母变大写
查看>>
Problem H: 计算数列和2/1,3/2,5/3,8/5......
查看>>
C/C++中的字符串4个库函数
查看>>
201604-4 游戏 ccf
查看>>
1144. The Missing Number (20)
查看>>
Java之StringUtils的常用方法
查看>>