dtGrid基于bootstrap的表格

最新推荐文章于 2024-06-23 17:16:57 发布

我是小妖怪,潇洒又自在

最新推荐文章于 2024-06-23 17:16:57 发布

阅读量7.3k

点赞数

分类专栏： JavaSE HTML/JavaScript

本文链接：https://blog.csdn.net/lz527657138/article/details/60364333

版权

JavaSE 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

HTML/JavaScript

12 篇文章 0 订阅

订阅专栏

一个通过dtGrid来展示数据的表格

项目结构图：

1、首先下载dtGrid，这个dtGrid文件夹中包含了bootstrap的js、css和相应的jQuery的js等文件。

dtGrid下载地址：http://demo.mycodes.net/chajian/jquery.dtGrid/doc/i18n/zh-cn/download.html

2、把下载的dtGrid放在WebContent文件夹下

dtGridTest.jsp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Azzan_DT_Grid</title>
<!-- jQuery -->
<script type="text/javascript" src="dtGrid/dependents/jquery/jquery.min.js"></script>

<!-- bootstrap -->
<script type="text/javascript" src="dtGrid/dependents/bootstrap/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="dtGrid/dependents/bootstrap/css/bootstrap.min.css">

<!-- font-awesome -->
<link type="text/css" rel="stylesheet" href="dtGrid/dependents/fontAwesome/css/font-awesome.min.css">

<!-- dtGrid -->
<script type="text/javascript" src="dtGrid/jquery.dtGrid.js"></script>
<script type="text/javascript" src="dtGrid/i18n/zh-cn.js"></script>
<link rel="stylesheet" type="text/css" href="dtGrid/jquery.dtGrid.css" />

<!-- datePicker -->
<script type="text/javascript" src="dtGrid/dependents/datePicker/WdatePicker.js"></script>
<link rel="stylesheet" type="text/css" href="dtGrid/dependents/datePicker/skin/WdatePicker.css" />
<link rel="stylesheet" type="text/css" href="dtGrid/dependents/datePicker/skin/default/datepicker.css" />

</head>
<body>
<!-- 模糊查询start -->
 <div style="margin-top:20px;">
	<form class="form-horizontal" action="">
		<div class="form-group">
			<label class="col-sm-4 control-label text-right">模糊查询（用户编号、用户名称）：</label>
			<div class="col-sm-4">
				<input type="text" id="like_user_code_or_user_name" name="like_user_code_or_user_name" class="form-control" />
			</div>
			<div class="col-sm-4">
				<button type="button" class="btn btn-primary" id="custom_search_2_2_3" name="custom_search_2_2_3">
					<i class="fa fa-search"></i>  自定义查询
				</button>
			</div>
		</div>
	</form>
</div> 
<!-- 模糊查询end -->
<div id="gridContainer" class="dlshouwen-grid-container"></div>
<div id="gridToolBarContainer" class="dt-grid-toolbar-container Azzan"></div>
<div id="AzzanLog"></div>

<script type="text/javascript">
$(function(){
	grid.load();
});

 //定义表格
 var gridColumns = [
           {id:'configure', title:'配置名称', type:'string', columnClass:'text-center'},
           {id:'createusers', title:'创建人', type:'string', columnClass:'text-center'},
           {id:'sex', title:'性别', type:'string', columnClass:'text-center'},
           {id:'address', title:'地址', type:'string', columnClass:'text-center'},
           {id:'year', title:'年份', type:'string', columnClass:'text-center'},
           {id:'date', title:'日期', type:'date', columnClass:'text-center',
        	   format:'yyyy-MM-dd hh:mm:ss',hideType:'md|sm|xs',fastQuery:true, fastQueryType:'range' },
      	   {id:'operation', title:'操作', type:'string', columnClass:'text-center', resolution:function(value, record, column, grid, dataNo, columnNo){
      			var content = '';
      			content += '<button class="btn btn-xs btn-default" οnclick="updateConfigure()"><i class="fa fa-edit"></i>  修改</button>';
      			content += '  ';
      			content += '<button class="btn btn-xs btn-danger" οnclick="removeConfigure()"><i class="fa fa-trash-o"></i>  删除</button>';
      			//content += '<button class="btn btn-xs btn-danger" οnclick="alert(\'删除用户：'+record.user_name+'\');"><i class="fa fa-trash-o"></i>  删除</button>';
      			return content;
      		}}
       ];
 		var datas = [{"configure":"样式表","createusers":"江疏影","sex":"女","address":"北京","year":"1991","date":'2014-01-01 19:06:52'},
 		             {"configure":"字体样式","createusers":"Azzan","sex":"男","address":"深圳","year":"2016","date":'2015-05-21 00:05:21'},
 		             {"configure":"字体大小","createusers":"范冰冰","sex":"女","address":"上海","year":"1988","date":'2016-05-07 12:06:06'},
 		             {"configure":"字体颜色","createusers":"赵丽颖","sex":"女","address":"河北","year":"1989","date":'2017-01-01 01:01:01'},
 		             {"configure":"div高","createusers":"江莱","sex":"女","address":"上海","year":"1990","date":'2017-02-27 13:29:55'},
 		             {"configure":"dataGrid","createusers":"孙红雷","sex":"男","address":"广州","year":"1992","date":'2018-08-09 14:30:00'}];
      	//表选项 
 		var gridOption = {
           lang : 'zh-cn', //用于设置表格的语言，目前提供三种语言：英文、简体中文、繁体中文，默认为英文。
           ajaxLoad : false, //是否通过ajax的方式加载数据，如果设置为true，则将通过loadURL的地址获取数据，如果设置为false，则基础数据由datas属性传入。
          // loadURL : '', //ajax加载数据的地址，本属性只有在ajaxLoad参数设置为true时起作用。
           datas : datas, //表格数据，数据格式为JSON数组。该参数仅在ajaxLoad参数设置为false时有效。
           exportFileName : '配置列表', //用于导出文件时的文件名，该文件名由option属性集中的exportFileName获得。
           check:true, //DT Grid提供复选功能，设置该属性为true则将会在所有列之前添加一个复选框的列，并在列标题提供全部选择、全部取消功能。该复选框可以使用getCheckedRecords方法来获取选中的内容。
           columns : gridColumns, //列对象定义，将上述定义列的JSON数组对象传递到此参数中。    见上：var gridColumns =
           gridContainer : 'gridContainer', //表格承载容器对象的id，设置完成后表格将显示在此容器中。 见上：第一个<div id="gridContainer"></div>
           toolbarContainer : 'gridToolBarContainer', //工具条承载容器对象的id，设置完成后表格的工具条将显示在此容器中。 见上：第二个<div id="gridToolBarContainer"></div>
           tools:'refresh|faseQuery|advanceQuery|export[excel,csv,pdf,txt]|print', //工具条可选内容，可选参数。默认：refresh|faseQuery|advanceQuery|export[excel,csv,pdf,txt]|print
           //exportURL:'C:\\Users\\Public\\Desktop', //导出文件的响应地址
           pageSize : 2, //每页显示条数。
           pageSizeLimit : [2, 5, 8], //每页显示条数的限制
           //showHeader:true, //是否显示列标题。不写默认 为true
           //单元格点击事件
           //onCellClick : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
       		//var log = '<p>单元格事件触发。事件类型：'+e.type+'；触发单元格坐标：('+columnNo+','+dataNo+')；单元格内容：'+value+'。</p>';
       		//appendAzzanLog(log);
       	//}
       };
       var grid = $.fn.DtGrid.init(gridOption); //DtGrid的初始化
       
    	 //追加日志
	     function appendAzzanLog(log){
	    	 if($('#AzzanLog p').length>=200){
	    			$('#AzzanLog p:last').remove();
	    		}
	    		$('#AzzanLog').prepend(log);
	       }
       
       //修改操作
       function updateConfigure(){
    	   alert("执行了updateConfigure操作。");
       }
       
       //删除操作
       function removeConfigure(){
    	   alert("执行了removeConfigure操作。");
       }
</script>



</body>
</html>

该例中，数据是前台设置的，并不是从数据库中获取的。
要想学习更多内容，访问：http://demo.mycodes.net/chajian/jquery.dtGrid/doc/i18n/zh-cn/example.html