第3.1.6章 WEB系统最佳实践 js控件之bootstrap table

bootstrap table控件下载地址,
bootstrap table example地址
这个表格比datatable是好用，而且js使用与easyui类似，可降低学习曲线
效果如下：

下面jsp代码，分为三部分：查询条件、表格的工具栏、表格。

页面除了上面的jsp代码，还有一些需要做的那就是,shiro的标签只能在jsp中才能被解析，放到js中是做不到的，所以这里额外提一下。

<script>
	require(['ucs/ucsUserList']);
	// 列表权限
	window.mainGridPermissions = [
		'<shiro:hasPermission name="ucsUser:edit"><a class="edit btn btn-primary" href="javascript:void(0)" title="编辑"><i class="glyphicon glyphicon-edit"></i>编辑</a></shiro:hasPermission>',
		'<shiro:hasPermission name="ucsUser:remove"><a class="remove btn btn-danger" href="javascript:void(0)" title="删除"><i class="glyphicon glyphicon-remove"></i>删除</a></shiro:hasPermission>'
	]
	</script>

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