基础功能

普通数据加载

DT GRID支持普通数据加载模式,将JSON格式数据传入到初始化参数中的datas属性中,配置好相应属性(如每页显示条数等)后DT GRID将自动对这些数据进行静态分页和加载。

关键代码

var dtGridColumns_2_1_1 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center'},
	{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center'}
];
var dtGridOption_2_1_1 = {
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : dtGridColumns_2_1_1,
	gridContainer : 'dtGridContainer_2_1_1',
	toolbarContainer : 'dtGridToolBarContainer_2_1_1',
	tools : '',
	pageSize : 10
};
var grid_2_1_1 = $.fn.DtGrid.init(dtGridOption_2_1_1);
$(function(){
	grid_2_1_1.load();
});

演示

响应式表格

DT GRID通过使用hidehideTypeextra来完成响应式表格的列配置。DT GRID的响应式支持是完全基于Bootstrap实现的,对于每一个尺寸的终端媒体对象显示不同的列内容,我们对于每一列可以进行终端显示的定义,如可以使某一列在Pad终端中显示,在Phone终端中不显示而是在扩展中显示,扩展的模式采用单击前缀列中的+按钮来完成查阅。

对于需要调整终端尺寸的特殊需要,请对应修改Bootstrap中的相应媒体对象参数,DT GRID主要通过visible-lgvisible-mdvisible-smvisible-xs来实现响应式表格的控制,对应修改Bootstrap中的这些样式即可。

关键代码

var dtGridColumns_2_1_2 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs'},
	{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs'},
	{id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs'},
	{id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs'},
	{id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs'},
	{id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center', hideType:'lg|md|sm|xs'},
	{id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs'},
	{id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs'}
];
var dtGridOption_2_1_2 = {
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : dtGridColumns_2_1_2,
	gridContainer : 'dtGridContainer_2_1_2',
	toolbarContainer : 'dtGridToolBarContainer_2_1_2',
	tools : '',
	pageSize : 10
};
var grid_2_1_2 = $.fn.DtGrid.init(dtGridOption_2_1_2);
$(function(){
	grid_2_1_2.load();
});

演示

自定义布局

DT GRID的工具条容器和表样展示容器是独立分开的,并需要在参数中通过gridContainertoolbarContainer分别控制,如果您需要让工具条在表格的上方,那么只需要将工具条的html承载容器在表格的html承载容器上方即可。

关键代码

<div id="dtGridToolBarContainer_2_1_3" class="dt-grid-toolbar-container"></div>
<div id="dtGridContainer_2_1_3" class="dt-grid-container"></div>

演示

自定义样式

DT GRID的样式表内容在jquery.dtGrid.css文件中,您可以对其进行定制,也可以通过tableStyletableClassheaderStyleheaderClasscolumnStylecolumnClass属性对表格进行单独样式的定制。

关键代码

var dtGridColumns_2_1_4 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', headerStyle:'background:#00a2ca;color:white;'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', headerStyle:'background:#00a2ca;color:white;'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', headerStyle:'background:#00a2ca;color:white;'},
	{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', headerStyle:'background:#00a2ca;color:white;'}
];
var dtGridOption_2_1_4 = {
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : dtGridColumns_2_1_4,
	gridContainer : 'dtGridContainer_2_1_4',
	toolbarContainer : 'dtGridToolBarContainer_2_1_4',
	tools : '',
	pageSize : 10
};
var grid_2_1_4 = $.fn.DtGrid.init(dtGridOption_2_1_4);
$(function(){
	grid_2_1_4.load();
});

演示

页内数据排序

DT GRID支持页内数据排序。当数据加载完成后,您可以点击表头来实现排序,排序仅针对当前页面中的数据进行排序。排序支持日期、数值的排序,并支持正序、倒序、还原原顺序三种方式相互切换。

关键代码

var dtGridColumns_2_1_5 = [
	{id:'user_code', title:'用户编号(点我排序)', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'用户名称(点我排序)', type:'string', columnClass:'text-center'},
	{id:'sex', title:'性别(点我排序)', type:'string', codeTable:sex, columnClass:'text-center'},
	{id:'salary', title:'薪水(点我排序)', type:'number', format:'#,###.00', columnClass:'text-center'}
];
var dtGridOption_2_1_5 = {
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : dtGridColumns_2_1_5,
	gridContainer : 'dtGridContainer_2_1_5',
	toolbarContainer : 'dtGridToolBarContainer_2_1_5',
	tools : '',
	pageSize : 10
};
var grid_2_1_5 = $.fn.DtGrid.init(dtGridOption_2_1_5);
$(function(){
	grid_2_1_5.load();
});

演示

码表支持

对于嵌入到有码表机制的业务系统DT GRID也有较为便捷的解决方案,比如性别字段,1表示男,2表示女,在后台拼接数据的方式需要通过表关联的方式实现,如果此种类型字段过多会造成开发效率低下,所以我们引入codeTable参数,在codeTable参数中传入一个JSON对象,指明对应的keyvalue属性,我们将根据这个对象来决定需要显示的值。

DT GRID在查询中对于码表有非常优秀的解析,在快速查询、高级查询中,如果查询码表字段,我们将通过下拉框的方式供用户选择,便于用户通过枚举的方式来完成操作,方便快捷。

注意:如果单元格内容在码表的定义对象中并没有返回值,我们会将数据原样输出,如果您有定制化更高的解析需要,请参照resolution属性。

关键代码

var dtGridColumns_2_1_6 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', columnStyle:'background:#00a2ca;color:white;', headerStyle:'background:#00a2ca;color:white;'},
	{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center'}
];
var dtGridOption_2_1_6 = {
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : dtGridColumns_2_1_6,
	gridContainer : 'dtGridContainer_2_1_6',
	toolbarContainer : 'dtGridToolBarContainer_2_1_6',
	tools : '',
	pageSize : 10
};
var grid_2_1_6 = $.fn.DtGrid.init(dtGridOption_2_1_6);
$(function(){
	grid_2_1_6.load();
});

演示

数据格式化

DT GRID针对某些特殊类型的数据可以完成自动格式化。

数值型字段通过format属性可以完成对数值的格式化,格式化脚本采用#0的方式解析,如格式化金额,那么解析字段的内容即为:#,###.00,格式化后的内容为:12,345,678.90

日期型字段通过format属性可以完成对日期的格式化,格式化脚本类似JAVA中的SimpleDateFormat中要求的格式,格式化完整日期为:yyyy-MM-dd hh:mm:ss.S,格式化后的内容为:2014-10-20 16:41:16.188

针对多种多样的日期格式,我们提供了丰富多样的格式化体系,几乎可以涵盖所有日期格式的格式化。格式化的方式通过typeformatotypeoformat四个参数完成,详细使用方式请查阅参考文档。

关键代码

var dtGridColumns_2_1_7 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'},
	{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center'},
	{id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center'},
	{id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center'},
	{id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center'},
	{id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center'},
	{id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center'}
];
var dtGridOption_2_1_7 = {
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : dtGridColumns_2_1_7,
	gridContainer : 'dtGridContainer_2_1_7',
	toolbarContainer : 'dtGridToolBarContainer_2_1_7',
	tools : '',
	pageSize : 10
};
var grid_2_1_7 = $.fn.DtGrid.init(dtGridOption_2_1_7);
$(function(){
	grid_2_1_7.load();
});

演示

复选内容

DT GRID支持原生复选框,当check属性为true时,DT GRID将会在首列显示复选框,用户选择完成之后您可以使用getCheckedRecords方法获取用户所选择的数据行列表,您可以遍历该列表完成您需要的操作。

关键代码

var dtGridColumns_2_1_8 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center'}
];
var dtGridOption_2_1_8 = {
	ajaxLoad : false,
	check : true,
	exportFileName : '用户列表',
	datas : datas,
	columns : dtGridColumns_2_1_8,
	gridContainer : 'dtGridContainer_2_1_8',
	toolbarContainer : 'dtGridToolBarContainer_2_1_8',
	tools : '',
	pageSize : 10
};
var grid_2_1_8 = $.fn.DtGrid.init(dtGridOption_2_1_8);
$(function(){
	grid_2_1_8.load();
});
function getGrid_2_1_8CheckedRecordsLength(){
	var recordCount = grid_2_1_8.getCheckedRecords().length;
	alert('您一共选择了 '+recordCount+' 条。');
}
<button class="btn btn-primary btn-xs" onclick="getGrid_2_1_8CheckedRecordsLength();">
	<i class="fa fa-table"></i>  获取选中的数据条数
</button>

演示

点击获取选中的条数:

自定义解析

如果以上内容仍然无法完成您对于您数据的处理,那么您可以通过设置resolution属性来完成对数据的自定义解析,resolution属性定义一个JS方法,该方法中将会传递行数据、单元格数据,通过这些参数您可以完成对该数据的自定义解析。

注意:由于自定义解析可能会出现HTML标签内容,所以在导出、查询中将不会被解析。

关键代码

var dtGridColumns_2_1_9 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', resolution:function(record, value){
		var content = '';
		if(value==1){
			content += 'Male';
		}else{
			content += 'Female';
		}
		return content;
	}}
];
var dtGridOption_2_1_9 = {
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : dtGridColumns_2_1_9,
	gridContainer : 'dtGridContainer_2_1_9',
	toolbarContainer : 'dtGridToolBarContainer_2_1_9',
	tools : '',
	pageSize : 10
};
var grid_2_1_9 = $.fn.DtGrid.init(dtGridOption_2_1_9);
$(function(){
	grid_2_1_9.load();
});

演示

国际化

DT GRID原生支持国际化,我们已经预置了简体中文繁体中文英文三个语言版本,您只需要在引入JS文件时引入i18n文件夹中的对应语言文件即可。

对于需要定制的语言,您可以自己复制一份并修改语言文件内容。

由于国际化演示需要在文件中引入对应的语言文件,所以我们的示例是在新页面中完成的,您可以点击下面的链接查看示例:

  英文版   简体中文版   繁体中文版

事件

DT GIRD目前支持对行单击和行双击事件进行扩展,您可以通过onRowClickonRowDblClick来定制它们。

关键代码

var dtGridColumns_2_1_11 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center'},
	{id:'salary', title:'薪水', type:'number', columnClass:'text-center', format:'#,###.00'}
];
var dtGridOption_2_1_11 = {
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : dtGridColumns_2_1_11,
	gridContainer : 'dtGridContainer_2_1_11',
	toolbarContainer : 'dtGridToolBarContainer_2_1_11',
	tools : '',
	pageSize : 10,
	onRowClick : function(record){
		var log = '您<code>单击</code>了用户名为 [ '+record.user_name+' ] 所在的行,详细数据为:<br /><br />';
		for(var i=0; i<grid_2_1_11.option.columns.length; i++){
			var column = grid_2_1_11.option.columns[i];
			log += column.title + ':' + grid_2_1_11.formatContent(column, record[column.id]) + '<br />';
		}
		$('#log_2_1_11').html(log);
	},
	onRowDblClick : function(record){
		var log = '您<code>双击</code>了用户名为 [ '+record.user_name+' ] 所在的行,详细数据为:<br /><br />';
		for(var i=0; i<grid_2_1_11.option.columns.length; i++){
			var column = grid_2_1_11.option.columns[i];
			log += column.title + ':' + grid_2_1_11.formatContent(column, record[column.id]) + '<br />';
		}
		$('#log_2_1_11').html(log);
	}
};
var grid_2_1_11 = $.fn.DtGrid.init(dtGridOption_2_1_11);
$(function(){
	grid_2_1_11.load();
});

演示

这里将显示点击事件的内容。
高级功能

Ajax全部加载数据

DT GRID通过loadAllloadURL参数支持将数据全部查询后完成加载,这其实同普通数据加载是同一个模式,只不过您定义取数的http服务(即loadURL参数),我们通过ajax取得所有数据。您也可以自行获取数据后通过普通数据加载模式完成数据初始化。

注意:http服务只支持Post模式,返回值必须是一套符合JSON数组的文本。

关键代码

var dtGridColumns_2_2_1 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'eq', resolution:function(record, value){
		var content = '';
		if(value==1){
			content += 'Male';
		}else{
			content += 'Female';
		}
		return content;
	}},
	{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_ms S', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }
];
var dtGridOption_2_2_1 = {
	ajaxLoad : true,
	loadAll : true,
	loadURL : '../../app/loadAll.php',
	exportFileName : '用户列表',
	columns : dtGridColumns_2_2_1,
	gridContainer : 'dtGridContainer_2_2_1',
	toolbarContainer : 'dtGridToolBarContainer_2_2_1',
	tools : '',
	pageSize : 10
};
var grid_2_2_1 = $.fn.DtGrid.init(dtGridOption_2_2_1);
$(function(){
	grid_2_2_1.load();
});

演示

Ajax分页加载数据

DT GRID支持动态加载数据,通过设置ajaxLoadloadURL参数来完成动态的Ajax数据加载分页,这样将会极大缓解数据库压力。

对于Ajax分页加载的示例请您下载我们为您提供的项目,查阅项目中服务器端源码的编写方式。

关键代码

var dtGridColumns_2_2_2 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'eq', resolution:function(record, value){
		var content = '';
		if(value==1){
			content += 'Male';
		}else{
			content += 'Female';
		}
		return content;
	}},
	{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_ms S', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }
];
var dtGridOption_2_2_2 = {
	ajaxLoad : true,
	loadURL : '../../app/ajaxDatas.php',
	exportFileName : '用户列表',
	columns : dtGridColumns_2_2_2,
	gridContainer : 'dtGridContainer_2_2_2',
	toolbarContainer : 'dtGridToolBarContainer_2_2_2',
	tools : '',
	pageSize : 10
};
var grid_2_2_2 = $.fn.DtGrid.init(dtGridOption_2_2_2);
$(function(){
	grid_2_2_2.load();
});

演示

打印

DT GRID支持选择列打印,但由于IE8本身对于打印接口支持的不完善,暂时对于IE8浏览器无法执行打印操作。

关键代码

var dtGridColumns_2_2_3 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'eq', resolution:function(record, value){
		var content = '';
		if(value==1){
			content += 'Male';
		}else{
			content += 'Female';
		}
		return content;
	}},
	{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }
];
var dtGridOption_2_2_3 = {
	ajaxLoad : false,
	datas : datas,
	exportFileName : '用户列表',
	columns : dtGridColumns_2_2_3,
	gridContainer : 'dtGridContainer_2_2_3',
	toolbarContainer : 'dtGridToolBarContainer_2_2_3',
	tools : 'print',
	pageSize : 10
};
var grid_2_2_3 = $.fn.DtGrid.init(dtGridOption_2_2_3);
$(function(){
	grid_2_2_3.load();
});

演示

导出

DT GRID支持导出文件,导出的文件格式支持选择导出列,并支持导出EXCELCSVPDFTXT等文件格式。导出文件是通过服务器程序实现的,具体的实现内容请您查阅我们为您提供的项目中的源码。

关键代码

var dtGridColumns_2_2_4 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'eq', resolution:function(record, value){
		var content = '';
		if(value==1){
			content += 'Male';
		}else{
			content += 'Female';
		}
		return content;
	}},
	{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }
];
var dtGridOption_2_2_4 = {
	ajaxLoad : false,
	datas : datas,
	exportFileName : '用户列表',
	columns : dtGridColumns_2_2_4,
	gridContainer : 'dtGridContainer_2_2_4',
	toolbarContainer : 'dtGridToolBarContainer_2_2_4',
	tools : 'export[excel,csv,pdf,txt]',
	pageSize : 10
};
var grid_2_2_4 = $.fn.DtGrid.init(dtGridOption_2_2_4);
$(function(){
	grid_2_2_4.load();
});

演示

快速查询

DT GRID原生支持快速查询。对于非Ajax分页加载数据模式的表格,我们原生JS即支持快速查询过滤,对于Ajax分页加载数据模式的表格,为了实现更高的查询效率,我们是通过服务器拼接查询SQL的方式完成的。

快速查询为一套预定义的查询模式,用户将直观的输入或选择查询的内容。快速查询通过DT GRID中的fastQueryfastQueryType属性定义。

快速查询支持等于不等于模糊匹配左侧模糊匹配右侧模糊匹配大于大于等于小于小于等于等快速查询类型。

关键代码

var dtGridColumns_2_2_5 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'eq', resolution:function(record, value){
		var content = '';
		if(value==1){
			content += 'Male';
		}else{
			content += 'Female';
		}
		return content;
	}},
	{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }
];
var dtGridOption_2_2_5 = {
	ajaxLoad : false,
	datas : datas,
	exportFileName : '用户列表',
	columns : dtGridColumns_2_2_5,
	gridContainer : 'dtGridContainer_2_2_5',
	toolbarContainer : 'dtGridToolBarContainer_2_2_5',
	tools : 'faseQuery',
	pageSize : 10
};
var grid_2_2_5 = $.fn.DtGrid.init(dtGridOption_2_2_5);
$(function(){
	grid_2_2_5.load();
});

演示

高级查询

高级查询为高定制化的查询而生,高级查询支持选择所有advanceQuery属性为true的字段,针对这些字段完成非常复杂的过滤条件,并支持自定义的排序功能。该排序同基础功能中的排序不同,基础功能的排序只对本页数据进行排序,而高级查询中的数据是所有数据排序后分页显示。

对于Ajax分页加载数据模式,我们也是通过服务器端拼接SQL的方式完成实现的,这样做也是出于查询效率的考虑,具体实现方式请您查阅我们提供的服务器端程序。

关键代码

var dtGridColumns_2_2_6 = [
	{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'eq', resolution:function(record, value){
		var content = '';
		if(value==1){
			content += 'Male';
		}else{
			content += 'Female';
		}
		return content;
	}},
	{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' },
	{id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }
];
var dtGridOption_2_2_6 = {
	ajaxLoad : false,
	datas : datas,
	exportFileName : '用户列表',
	columns : dtGridColumns_2_2_6,
	gridContainer : 'dtGridContainer_2_2_6',
	toolbarContainer : 'dtGridToolBarContainer_2_2_6',
	tools : 'advanceQuery',
	pageSize : 10
};
var grid_2_2_6 = $.fn.DtGrid.init(dtGridOption_2_2_6);
$(function(){
	grid_2_2_6.load();
});

演示