DLShouWen Grid

基础功能

普通数据加载

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

关键代码：

var gridColumns_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 gridOption_2_1_1 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : gridColumns_2_1_1,
	gridContainer : 'gridContainer_2_1_1',
	toolbarContainer : 'gridToolBarContainer_2_1_1',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_1_1 = $.fn.dlshouwen.grid.init(gridOption_2_1_1);
$(function(){
	grid_2_1_1.load();
});

演示：

响应式表格

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

对于需要调整终端尺寸的特殊需要，请对应修改Bootstrap中的相应媒体对象参数，DLShouWen Grid主要通过visible-lg、visible-md、visible-sm、visible-xs来实现响应式表格的控制，对应修改Bootstrap中的这些样式即可。

关键代码：

var gridColumns_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 gridOption_2_1_2 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : gridColumns_2_1_2,
	gridContainer : 'gridContainer_2_1_2',
	toolbarContainer : 'gridToolBarContainer_2_1_2',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_1_2 = $.fn.dlshouwen.grid.init(gridOption_2_1_2);
$(function(){
	grid_2_1_2.load();
});

演示：

固定列宽New

您可以通过列属性width来固定某一列或几列的列宽，响应式表格当表格容器总宽度不足以承载所有列时，本属性设置的宽度将会失效。您可以通过extraWidth来固定扩展列的列宽。

关键代码：

var gridColumns_2_1_12 = [
	{id:'user_code', title:'用户编号', width:80, type:'string', columnClass:'text-center'},
	{id:'user_name', title:'用户名称', width:120, type:'string', columnClass:'text-center'},
	{id:'sex', title:'性别', width:50, type:'string', codeTable:sex, columnClass:'text-center'},
	{id:'salary', title:'薪水', width:60, type:'number', format:'#,###.00', columnClass:'text-center'},
	{id:'degree', title:'学历', width:50, type:'string', codeTable:degree, 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', 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 gridOption_2_1_12 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	extraWidth : 40,
	columns : gridColumns_2_1_12,
	gridContainer : 'gridContainer_2_1_12',
	toolbarContainer : 'gridToolBarContainer_2_1_12',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_1_12 = $.fn.dlshouwen.grid.init(gridOption_2_1_12);
$(function(){
	grid_2_1_12.load();
});

演示：

自定义布局

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

关键代码：

<div id="gridToolBarContainer_2_1_3" class="dlshouwen-grid-toolbar-container"></div>
<div id="gridContainer_2_1_3" class="dlshouwen-grid-container"></div>

演示：

自定义样式

DLShouWen Grid的样式表内容在dlshouwen.grid.css文件中，您可以对其进行定制，也可以通过tableStyle、tableClass、headerStyle、headerClass、columnStyle、columnClass属性对表格进行单独样式的定制。

关键代码：

var gridColumns_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 gridOption_2_1_4 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : gridColumns_2_1_4,
	gridContainer : 'gridContainer_2_1_4',
	toolbarContainer : 'gridToolBarContainer_2_1_4',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_1_4 = $.fn.dlshouwen.grid.init(gridOption_2_1_4);
$(function(){
	grid_2_1_4.load();
});

演示：

页内数据排序

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

关键代码：

var gridColumns_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 gridOption_2_1_5 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : gridColumns_2_1_5,
	gridContainer : 'gridContainer_2_1_5',
	toolbarContainer : 'gridToolBarContainer_2_1_5',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_1_5 = $.fn.dlshouwen.grid.init(gridOption_2_1_5);
$(function(){
	grid_2_1_5.load();
});

演示：

码表支持

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

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

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

关键代码：

var gridColumns_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 gridOption_2_1_6 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : gridColumns_2_1_6,
	gridContainer : 'gridContainer_2_1_6',
	toolbarContainer : 'gridToolBarContainer_2_1_6',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_1_6 = $.fn.dlshouwen.grid.init(gridOption_2_1_6);
$(function(){
	grid_2_1_6.load();
});

演示：

数据格式化

DLShouWen 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。

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

关键代码：

var gridColumns_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 gridOption_2_1_7 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : gridColumns_2_1_7,
	gridContainer : 'gridContainer_2_1_7',
	toolbarContainer : 'gridToolBarContainer_2_1_7',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_1_7 = $.fn.dlshouwen.grid.init(gridOption_2_1_7);
$(function(){
	grid_2_1_7.load();
});

演示：

复选内容Update

DLShouWen Grid支持原生复选框，当check属性为true时，DLShouWen Grid将会在首列显示复选框，用户选择完成之后您可以使用getCheckedRecords方法获取用户所选择的数据行列表，您可以遍历该列表完成您需要的操作。您亦可以通过checkWidth属性配置复选框所在单元格的宽度。

关键代码：

var gridColumns_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 gridOption_2_1_8 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	check : true,
	checkWidth : 40,
	exportFileName : '用户列表',
	datas : datas,
	columns : gridColumns_2_1_8,
	gridContainer : 'gridContainer_2_1_8',
	toolbarContainer : 'gridToolBarContainer_2_1_8',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_1_8 = $.fn.dlshouwen.grid.init(gridOption_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标签内容，所以在导出、查询中将不会被解析。

注意：自定义解析参数的回调方法中的参数数量及顺序与1.1.8版本不同，请使用者注意。

关键代码：

var gridColumns_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(value, record, column, grid, dataNo, columnNo){
		var content = '';
		if(value==1){
			content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
		}else{
			content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
		}
		return content;
	}},
	{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" onclick="alert(\'编辑用户：'+record.user_name+'\');"><i class="fa fa-edit"></i>  编辑</button>';
		content += '  ';
		content += '<button class="btn btn-xs btn-danger" onclick="alert(\'删除用户：'+record.user_name+'\');"><i class="fa fa-trash-o"></i>  删除</button>';
		return content;
	}}
];
var gridOption_2_1_9 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : gridColumns_2_1_9,
	gridContainer : 'gridContainer_2_1_9',
	toolbarContainer : 'gridToolBarContainer_2_1_9',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_1_9 = $.fn.dlshouwen.grid.init(gridOption_2_1_9);
$(function(){
	grid_2_1_9.load();
});

演示：

国际化

DLShouWen Grid原生支持国际化，我们已经预置了英文[en]、简体中文[zh-cn]、繁体中文[zh-tw]三个语言版本，引入JS文件时引入i18n文件夹中的对应语言文件后将lang属性设置为对应的语言参数即可。

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

关键代码 - 英文版：

var gridColumns_2_1_10_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(value, record, column, grid, dataNo, columnNo){
		var content = '';
		if(value==1){
			content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
		}else{
			content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
		}
		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', 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 gridOption_2_1_10_1 = {
	lang : 'en',
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : gridColumns_2_1_10_1,
	gridContainer : 'gridContainer_2_1_10_1',
	toolbarContainer : 'gridToolBarContainer_2_1_10_1',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_1_10_1 = $.fn.dlshouwen.grid.init(gridOption_2_1_10_1);
$(function(){
	grid_2_1_10_1.load();
});

演示 - 英文版：

关键代码 - 简体中文版：

var gridColumns_2_1_10_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(value, record, column, grid, dataNo, columnNo){
		var content = '';
		if(value==1){
			content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
		}else{
			content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
		}
		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', 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 gridOption_2_1_10_2 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : gridColumns_2_1_10_2,
	gridContainer : 'gridContainer_2_1_10_2',
	toolbarContainer : 'gridToolBarContainer_2_1_10_2',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_1_10_2 = $.fn.dlshouwen.grid.init(gridOption_2_1_10_2);
$(function(){
	grid_2_1_10_2.load();
});

演示 - 简体中文版：

关键代码 - 繁体中文版：

var gridColumns_2_1_10_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(value, record, column, grid, dataNo, columnNo){
		var content = '';
		if(value==1){
			content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
		}else{
			content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
		}
		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', 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 gridOption_2_1_10_3 = {
	lang : 'zh-tw',
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : gridColumns_2_1_10_3,
	gridContainer : 'gridContainer_2_1_10_3',
	toolbarContainer : 'gridToolBarContainer_2_1_10_3',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_1_10_3 = $.fn.dlshouwen.grid.init(gridOption_2_1_10_3);
$(function(){
	grid_2_1_10_3.load();
});

演示 - 繁体中文版：

事件

DLShouWen GIRD支持对单元格、行、表头、表格、扩展行事件的扩展，您可以通过对应的表格属性回调来定制它们，具体调用参数请查阅参考文档。

本示例代码将整合所有的事件属性，为了便于查阅，我们只在日志中输出最近200条的时间监听记录。为了便于显示，我们去掉了所有的MouseMove（鼠标移动）事件，避免日志过多。

关键代码：

var gridColumns_2_1_11 = [
	{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(value, record, column, grid, dataNo, columnNo){
		var content = '';
		if(value==1){
			content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
		}else{
			content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
		}
		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 gridOption_2_1_11 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	check : true,
	columns : gridColumns_2_1_11,
	gridContainer : 'gridContainer_2_1_11',
	toolbarContainer : 'gridToolBarContainer_2_1_11',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50],
	onCellClick : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>单元格事件触发。事件类型：'+e.type+'；触发单元格坐标：('+columnNo+','+dataNo+')；单元格内容：'+value+'。</p>';
		appendLog_2_1_11(log);
	},
	onCellDblClick : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>单元格事件触发。事件类型：'+e.type+'；触发单元格坐标：('+columnNo+','+dataNo+')；单元格内容：'+value+'。</p>';
		appendLog_2_1_11(log);
	},
	onCellMouseOver : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>单元格事件触发。事件类型：'+e.type+'；触发单元格坐标：('+columnNo+','+dataNo+')；单元格内容：'+value+'。</p>';
		appendLog_2_1_11(log);
	},
	onCellMouseMove : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>单元格事件触发。事件类型：'+e.type+'；触发单元格坐标：('+columnNo+','+dataNo+')；单元格内容：'+value+'。</p>';
		//appendLog_2_1_11(log);
	},
	onCellMouseOut : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>单元格事件触发。事件类型：'+e.type+'；触发单元格坐标：('+columnNo+','+dataNo+')；单元格内容：'+value+'。</p>';
		appendLog_2_1_11(log);
	},
	onCellMouseDown : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>单元格事件触发。事件类型：'+e.type+'；触发单元格坐标：('+columnNo+','+dataNo+')；单元格内容：'+value+'。</p>';
		appendLog_2_1_11(log);
	},
	onCellMouseUp : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>单元格事件触发。事件类型：'+e.type+'；触发单元格坐标：('+columnNo+','+dataNo+')；单元格内容：'+value+'。</p>';
		appendLog_2_1_11(log);
	},
	onRowClick : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>行事件触发。事件类型：'+e.type+'；触发行内单元格坐标：('+columnNo+','+dataNo+')；行内单元格内容：'+value+'。</p>';
		appendLog_2_1_11(log);
	},
	onRowDblClick : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>行事件触发。事件类型：'+e.type+'；触发行内单元格坐标：('+columnNo+','+dataNo+')；行内单元格内容：'+value+'。</p>';
		appendLog_2_1_11(log);
	},
	onRowMouseOver : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>行事件触发。事件类型：'+e.type+'；触发行内单元格坐标：('+columnNo+','+dataNo+')；行内单元格内容：'+value+'。</p>';
		appendLog_2_1_11(log);
	},
	onRowMouseMove : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>行事件触发。事件类型：'+e.type+'；触发行内单元格坐标：('+columnNo+','+dataNo+')；行内单元格内容：'+value+'。</p>';
		//appendLog_2_1_11(log);
	},
	onRowMouseOut : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>行事件触发。事件类型：'+e.type+'；触发行内单元格坐标：('+columnNo+','+dataNo+')；行内单元格内容：'+value+'。</p>';
		appendLog_2_1_11(log);
	},
	onRowMouseDown : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>行事件触发。事件类型：'+e.type+'；触发行内单元格坐标：('+columnNo+','+dataNo+')；行内单元格内容：'+value+'。</p>';
		appendLog_2_1_11(log);
	},
	onRowMouseUp : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>行事件触发。事件类型：'+e.type+'；触发行内单元格坐标：('+columnNo+','+dataNo+')；行内单元格内容：'+value+'。</p>';
		appendLog_2_1_11(log);
	},
	onHeaderClick : function(title, column, grid, columnNo, header, headerRow, e){
		var log = '<p>表头事件触发。事件类型：'+e.type+'；触发列坐标：'+columnNo+'；列名称：'+title+'。</p>';
		appendLog_2_1_11(log);
	},
	onHeaderMouseOver : function(title, column, grid, columnNo, header, headerRow, e){
		var log = '<p>表头事件触发。事件类型：'+e.type+'；触发列坐标：'+columnNo+'；列名称：'+title+'。</p>';
		appendLog_2_1_11(log);
	},
	onHeaderMouseMove : function(title, column, grid, columnNo, header, headerRow, e){
		var log = '<p>表头事件触发。事件类型：'+e.type+'；触发列坐标：'+columnNo+'；列名称：'+title+'。</p>';
		//appendLog_2_1_11(log);
	},
	onHeaderMouseOut : function(title, column, grid, columnNo, header, headerRow, e){
		var log = '<p>表头事件触发。事件类型：'+e.type+'；触发列坐标：'+columnNo+'；列名称：'+title+'。</p>';
		appendLog_2_1_11(log);
	},
	onHeaderMouseDown : function(title, column, grid, columnNo, header, headerRow, e){
		var log = '<p>表头事件触发。事件类型：'+e.type+'；触发列坐标：'+columnNo+'；列名称：'+title+'。</p>';
		appendLog_2_1_11(log);
	},
	onHeaderMouseUp : function(title, column, grid, columnNo, header, headerRow, e){
		var log = '<p>表头事件触发。事件类型：'+e.type+'；触发列坐标：'+columnNo+'；列名称：'+title+'。</p>';
		appendLog_2_1_11(log);
	},
	onGridClick : function(grid, e){
		var log = '<p>表格事件触发。事件类型：'+e.type+'；触发表格编号：'+grid.option.id+'。</p>';
		appendLog_2_1_11(log);
	},
	onGridDblClick : function(grid, e){
		var log = '<p>表格事件触发。事件类型：'+e.type+'；触发表格编号：'+grid.option.id+'。</p>';
		appendLog_2_1_11(log);
	},
	onGridMouseOver : function(grid, e){
		var log = '<p>表格事件触发。事件类型：'+e.type+'；触发表格编号：'+grid.option.id+'。</p>';
		appendLog_2_1_11(log);
	},
	onGridMouseMove : function(grid, e){
		var log = '<p>表格事件触发。事件类型：'+e.type+'；触发表格编号：'+grid.option.id+'。</p>';
		//appendLog_2_1_11(log);
	},
	onGridMouseOut : function(grid, e){
		var log = '<p>表格事件触发。事件类型：'+e.type+'；触发表格编号：'+grid.option.id+'。</p>';
		appendLog_2_1_11(log);
	},
	onGridMouseDown : function(grid, e){
		var log = '<p>表格事件触发。事件类型：'+e.type+'；触发表格编号：'+grid.option.id+'。</p>';
		appendLog_2_1_11(log);
	},
	onGridMouseUp : function(grid, e){
		var log = '<p>表格事件触发。事件类型：'+e.type+'；触发表格编号：'+grid.option.id+'。</p>';
		appendLog_2_1_11(log);
	},
	onGridComplete : function(grid){
		var log = '<p>表格加载完成。表格编号：'+grid.option.id+'。</p>';
		appendLog_2_1_11(log);
	},
	onExtraOpen : function(record, grid, dataNo, row, extraCell, e){
		var log = '<p>扩展列展开触发。事件类型：'+e.type+'；触发行坐标：'+dataNo+'。</p>';
		appendLog_2_1_11(log);
	},
	onExtraClose : function(record, grid, dataNo, row, extraCell, e){
		var log = '<p>扩展列关闭触发。事件类型：'+e.type+'；触发行坐标：'+dataNo+'。</p>';
		appendLog_2_1_11(log);
	},
	onCheck : function(isChecked, record, grid, dataNo, row, extraCell, e){
		var log = '<p>复选事件触发。是否复选：'+isChecked+'；触发行坐标：'+dataNo+'。</p>';
		appendLog_2_1_11(log);
	}
};
var grid_2_1_11 = $.fn.dlshouwen.grid.init(gridOption_2_1_11);
$(function(){
	grid_2_1_11.load();
});
//追加日志
function appendLog_2_1_11(log){
	if($('#log_2_1_11 p').length>=200){
		$('#log_2_1_11 p:last').remove();
	}
	$('#log_2_1_11').prepend(log);
}

演示：

这里将显示事件监听日志。

高级功能

Ajax全部加载数据

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

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

关键代码：

var gridColumns_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(value, record, column, grid, dataNo, columnNo){
		var content = '';
		if(value==1){
			content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
		}else{
			content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
		}
		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 gridOption_2_2_1 = {
	lang : 'zh-cn',
	ajaxLoad : true,
	loadAll : true,
	loadURL : '/grid/demo/datas/load_all',
	exportFileName : '用户列表',
	columns : gridColumns_2_2_1,
	gridContainer : 'gridContainer_2_2_1',
	toolbarContainer : 'gridToolBarContainer_2_2_1',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_2_1 = $.fn.dlshouwen.grid.init(gridOption_2_2_1);
$(function(){
	grid_2_2_1.load();
});

演示：

Ajax分页加载数据

DLShouWen Grid支持动态加载数据，通过设置ajaxLoad及loadURL参数来完成动态的Ajax数据加载分页，这样将会极大缓解数据库压力。

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

关键代码：

var gridColumns_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(value, record, column, grid, dataNo, columnNo){
		var content = '';
		if(value==1){
			content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
		}else{
			content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
		}
		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 gridOption_2_2_2 = {
	lang : 'zh-cn',
	ajaxLoad : true,
	loadURL : '/grid/demo/datas/ajax',
	exportFileName : '用户列表',
	columns : gridColumns_2_2_2,
	gridContainer : 'gridContainer_2_2_2',
	toolbarContainer : 'gridToolBarContainer_2_2_2',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_2_2 = $.fn.dlshouwen.grid.init(gridOption_2_2_2);
$(function(){
	grid_2_2_2.load();
});

演示：

自定义传递参数

DLShouWen Grid支持自定义传递参数，通过在Javascript脚本中设置parameters参数来完成自定义传参，后台映射的Pager对象中可以直接获取该参数，参数类型在Javascript语言中文Object，在Java语言中文Map。

自定义传递参数仅支持Ajax分页加载模式，通过拼接SQL的方式来完成自定义的查询调用，具体示例中的详细代码请您下载我们为您提供的项目，查阅项目中服务器端源码的编写方式。

关键代码：

<div>
	<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>
<div id="gridContainer_2_2_3" class="dlshouwen-grid-container"></div>
<div id="gridToolBarContainer_2_2_3" class="dlshouwen-grid-toolbar-container"></div>

var gridColumns_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(value, record, column, grid, dataNo, columnNo){
		var content = '';
		if(value==1){
			content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
		}else{
			content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
		}
		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 gridOption_2_2_3 = {
	lang : 'zh-cn',
	ajaxLoad : true,
	loadURL : '/grid/demo/datas/ajax',
	exportFileName : '用户列表',
	columns : gridColumns_2_2_3,
	gridContainer : 'gridContainer_2_2_3',
	toolbarContainer : 'gridToolBarContainer_2_2_3',
	tools : '',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_2_3 = $.fn.dlshouwen.grid.init(gridOption_2_2_3);
$(function(){
	grid_2_2_3.load();
	//绑定方法
	$('#custom_search_2_2_3').click(customSearch_2_2_3);
});
//自定义查询
function customSearch_2_2_3(){
	var like_user_code_or_user_name = $('#like_user_code_or_user_name').val();
	grid_2_2_3.parameters = new Object();
	grid_2_2_3.parameters['like_user_code_or_user_name'] = like_user_code_or_user_name;
	grid_2_2_3.refresh(true);
}

演示：

打印

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

关键代码：

var gridColumns_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(value, record, column, grid, dataNo, columnNo){
		var content = '';
		if(value==1){
			content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
		}else{
			content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
		}
		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 gridOption_2_2_4 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	datas : datas,
	exportFileName : '用户列表',
	columns : gridColumns_2_2_4,
	gridContainer : 'gridContainer_2_2_4',
	toolbarContainer : 'gridToolBarContainer_2_2_4',
	tools : 'print',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_2_4 = $.fn.dlshouwen.grid.init(gridOption_2_2_4);
$(function(){
	grid_2_2_4.load();
});

演示：

导出

DLShouWen Grid支持导出文件，导出的文件格式支持选择导出列，并支持导出EXCEL、CSV、PDF、TXT等文件格式。导出文件是通过服务器程序实现的，具体的实现内容请您查阅我们为您提供的项目中的源码。

关键代码：

var gridColumns_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(value, record, column, grid, dataNo, columnNo){
		var content = '';
		if(value==1){
			content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
		}else{
			content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
		}
		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 gridOption_2_2_5 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	datas : datas,
	exportFileName : '用户列表',
	columns : gridColumns_2_2_5,
	gridContainer : 'gridContainer_2_2_5',
	toolbarContainer : 'gridToolBarContainer_2_2_5',
	tools : 'export[excel,csv,pdf,txt]',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_2_5 = $.fn.dlshouwen.grid.init(gridOption_2_2_5);
$(function(){
	grid_2_2_5.load();
});

演示：

快速查询

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

快速查询为一套预定义的查询模式，用户将直观的输入或选择查询的内容。快速查询通过DLShouWen Grid中的fastQuery及fastQueryType属性定义。

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

关键代码：

var gridColumns_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(value, record, column, grid, dataNo, columnNo){
		var content = '';
		if(value==1){
			content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
		}else{
			content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
		}
		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 gridOption_2_2_6 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	datas : datas,
	exportFileName : '用户列表',
	columns : gridColumns_2_2_6,
	gridContainer : 'gridContainer_2_2_6',
	toolbarContainer : 'gridToolBarContainer_2_2_6',
	tools : 'fastQuery',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_2_6 = $.fn.dlshouwen.grid.init(gridOption_2_2_6);
$(function(){
	grid_2_2_6.load();
});

演示：

高级查询

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

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

关键代码：

var gridColumns_2_2_7 = [
	{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(value, record, column, grid, dataNo, columnNo){
		var content = '';
		if(value==1){
			content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
		}else{
			content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
		}
		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 gridOption_2_2_7 = {
	lang : 'zh-cn',
	ajaxLoad : false,
	datas : datas,
	exportFileName : '用户列表',
	columns : gridColumns_2_2_7,
	gridContainer : 'gridContainer_2_2_7',
	toolbarContainer : 'gridToolBarContainer_2_2_7',
	tools : 'advanceQuery',
	pageSize : 10,
	pageSizeLimit : [10, 20, 50]
};
var grid_2_2_7 = $.fn.dlshouwen.grid.init(gridOption_2_2_7);
$(function(){
	grid_2_2_7.load();
});

演示：