基于bootstrap3的表格组件

表格在自己目前的开发中很常用，每次都写那么多重复的代码，感觉很繁琐。为了以后的开发中表格使用方便，特将表格封装成了一个组件，调用方式类似jquery的easyui，比较方便通用。

样子大概如下：

调用方式：引入jquery、bootstrap、lodash，之后在html页面写如下代码：

	<!-- 表格使用例子开始 -->
		<div class="gstable-container">
			<div class="gop">
				<div style="height: 30px">
					<div style="float: left; padding-bottom: 10px">
						<button class="btn btn-primary" id="btn-new">
							<i class="fa fa-plus"></i> 新建
						</button>
						<button class="btn btn-danger" id="btn-del">
							<i class="fa fa-minus"></i> 删除
						</button>
					</div>
					<div class="filter">
						<input name="condition" placeholder="人员名称"
							class="form-control search">
						<div class="dropdown gscolSeletor">
							<i data-toggle="dropdown" class="fa fa-table dropdown-toggle"></i>
							<ul class="dropdown-menu dropdown-menu-right">
							</ul>
						</div>
					</div>
				</div>
			</div>

			<div class="tbOuterDiv">
				<div id="tableDiv" class="gstable"></div>
			</div>
		</div>
		<!-- 表格结束 -->

编写js如下：

$(function(){
	var jsonData={
		    "retCode": "000000",
		    "retMsg": "信息获取成功！",
		    "data": {
		        "page": 1,//当前页码
		        "pageSize": 10,//每页条目数
		        "total": 20,//总条目数
		        "totalPage": 3,//总页数
		        "data": [
		            {
		                "id": 1,
		                "createDate": null,
		                "userName": "liweiwei1",
		                "realName": "liweiwei11",
		                "phoneNum": "123456",
		                "userType": null
		            },
		            {
		                "id": 2,
		                "createDate": null,
		                "userName": "liweiwei2",
		                "realName": "liweiwei22",
		                "phoneNum": "123456",
		                "userType": null
		            },
		            {
		                "id": 3,
		                "createDate": null,
		                "userName": "liweiwei3",
		                "realName": "liweiwei33",
		                "phoneNum": "123456",
		                "userType": null
		            },
		            {
		                "id": 4,
		                "createDate": null,
		                "userName": "liweiwei4",
		                "realName": "liweiwei44",
		                "phoneNum": "123456",
		                "userType": null
		            },
		            {
		                "id": 5,
		                "createDate": null,
		                "userName": "liweiwei5",
		                "realName": "liweiwei55",
		                "phoneNum": "123456",
		                "userType": null
		            },
		            {
		                "id": 6,
		                "createDate": null,
		                "userName": "liweiwei6",
		                "realName": "liweiwei66",
		                "phoneNum": "123456",
		                "userType": null
		            },
		            {
		                "id": 7,
		                "createDate": null,
		                "userName": "liweiwei7",
		                "realName": "liweiwei77",
		                "phoneNum": "123456",
		                "userType": null
		            },
		            {
		                "id": 8,
		                "createDate": null,
		                "userName": "liweiwei8",
		                "realName": "liweiwei88",
		                "phoneNum": "123456",
		                "userType": null
		            },
		            {
		                "id": 9,
		                "createDate": null,
		                "userName": "liweiwei9",
		                "realName": "liweiwei99",
		                "phoneNum": "123456",
		                "userType": null
		            },
		            {
		                "id": 10,
		                "createDate": null,
		                "userName": "liweiwei10",
		                "realName": "liweiwei1010",
		                "phoneNum": "123456",
		                "userType": null
		            }
		        ]
		    }
		};
	
	
	$(".gstable-container").datagrid({
		//
		title : '服务器管理列表',
		//是否显示下方的分页
		pagination: true, 
		//当前页码
		page:1,
		//每页展示的条数
		rows: 10,
		//静态给定数据，用来测试，实际使用中，数据应通过ajax请求过来
		jsonData:jsonData,
		//表格数据请求的url，当url给定的时候，jsonData项将不起作用
//		url:  '/websvn/app/users.json',
		//url:'test.json',
		//ajax请求的时候是同步还是异步。true为异步
		async:true,
		//是否可以自定义展示的列（右上角的表格小图标事件）
		customColumns: true,
		//是否展示列标题，即列头
	    showThead:true,
	    //可以附加查询条件。json方式传递
	    qData : {},
	    idField : "id",
	    //是否显示复选框
	    withCheckbox : true,
	    //是否显示列头的复选框（全选作用）
	    titleCheckbox : true,
	    //记录为空时的提示信息
	    emptyTips : "数据条目为空！",
	    //复选框存在的情况下，最多可以选择几个,1代表单选，只能选择一个。0为不限制
	    selectedNums : 1,
	    //列信息。title为列头，field此列取得数组对象的属性
		columns:[		         
		         {field: 'id', hidden:true},
		         {field: '', title:"序号",formatter: function(value,row,index){
		        	 return index+1;
		         }},
		         {field: 'userName', title: '登录名', sortable: true, formatter: function(value,row,index){
		        	 return "<a href='/user/"+row.id+"'>"+value+"</a>";
		         }},
		         {field:'realName',title:'中文名称',cls: "", sortable: false},
		         {field: 'phoneNum', title: '手机号', cls: "hidemobile"},
		         {field: 'userType', title: '用户类型', cls: "hidemobile"},
		         {field: 'createDate', title: '创建时间', cls: "hidemobile"}
		        ],
		        //表格加载前，可以在此方法里处理一些逻辑
		        onBeforeLoad : function(datagrid) {
		        	console.log('开始加载 表格数据');
		        },
		        //ajax请求成功时调用的方法
		        onComplete:function(datagrid){
		        	console.log("数据请求完成！");
		        },
		        //ajax请求失败处理
		        onError:function(datagrid){
		        	console.log("数据请求发生错误！");
		        },
		        //ajax请求成功返回，表格加载完毕后的处理
		         onLoadSuccess: function(obj){
		        	 console.log("表格加载成功！");
		         }   
	})
	
	
	
})

数据通过ajax请求过来，也可以给定jsonData展示（不能动态，意义不大）。具体例子下载连接：

http://download.csdn.net/detail/acweilisky0825/9590139

具体的使用例子可见:

http://svn.infowk.com/svncm/pages/bs_oplog.jsp?chechedmenuid=10421&submenu=10420

（样式上稍微有些区别，基本功能一样）

用户名：admin

密码：123456