部署

基础文件引入

我们为您推荐的javascript文件css文件的引用顺序如下:

<!-- jQuery -->
<script type="text/javascript" src="../dependents/jquery/jquery.min.js"></script>
<!-- bootstrap -->
<script type="text/javascript" src="../dependents/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="../dependents/bootstrap/css/bootstrap.min.css" />
<!--[if lt IE 9]>
	<script src="../dependents/bootstrap/plugins/ie/html5shiv.js"></script>
	<script src="../dependents/bootstrap/plugins/ie/respond.js"></script>
<![endif]-->
<!--[if lt IE 8]>
	<script src="../dependents/bootstrap/plugins/ie/json2.js"></script>
<![endif]-->
<!-- font-awesome -->
<link rel="stylesheet" type="text/css" href="../dependents/fontAwesome/css/font-awesome.min.css" media="all" />
<!-- dtGrid -->
<script type="text/javascript" src="../jquery.dtGrid.js"></script>
<script type="text/javascript" src="../i18n/en.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery.dtGrid.css" />
<!-- datePicker -->
<script type="text/javascript" src="../dependents/datePicker/WdatePicker.js" defer="defer"></script>
<link rel="stylesheet" type="text/css" href="../dependents/datePicker/skin/WdatePicker.css" />
<link rel="stylesheet" type="text/css" href="../dependents/datePicker/skin/default/datepicker.css" />
语言文件引入

将i18n文件夹中您所需要的语言文件引入到jquery.dtGrid.js文件下方即可。

<script type="text/javascript" src="../i18n/en.js"></script>
对象实例化

您可以使用如下代码对DtGrid对象进行对象实例化,实例化后的对象将支持众多方法,具体的实例化参数及相关方法请查阅后续参考文档。

//映射内容
	var sex = {1:'男', 2:'女'};
	var degree = {1:'小学', 2:'初中', 3:'高中', 4:'中专', 5:'大学', 6:'硕士', 7:'博士', 8:'其他'};
	//模拟数据(薪水在6000-12000之间,日期在1980-01-01 00::00:00到2014-10-01 00:00:00之间)
	var datas = new Array();
	for(var i=0; i<186; i++){
		var user = new Object();
		user.user_id = 'user_'+i;
		user.user_code = 'user_'+i;
		user.user_name = '模拟用户'+(Math.floor(Math.random()*1000)+10000)+'号';
		user.sex = (Math.floor(Math.random()*2)+1);
		user.salary = (Math.floor(Math.random()*6000)+6000);
		user.degree = (Math.floor(Math.random()*8)+1);
		user.time = new Date(Math.floor(Math.random()*1096588800000)+315504000000);
		user.time_stamp_s = Math.floor((Math.floor(Math.random()*1096588800000)+315504000000)/1000);
		user.time_stamp_ms = Math.floor(Math.random()*1096588800000)+315504000000;
		user.string_date = $.fn.DtGrid.tools.dateFormat(new Date(Math.floor(Math.random()*1096588800000)+315504000000), 'yyyy-MM-dd');
		user.string_time = $.fn.DtGrid.tools.dateFormat(new Date(Math.floor(Math.random()*1096588800000)+315504000000), 'yyyy-MM-dd hh:mm:ss');
		datas.push(user);
	}
	//定义表格
	var dtGridColumns = [
   		{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', 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 = {
   		ajaxLoad : false,
   		exportFileName : '用户列表',
   		datas : datas,
   		columns : dtGridColumns,
		pageSize : 10
   	};
   	var grid = $.fn.DtGrid.init(dtGridOption);
   	$(function(){
   		grid.load();
   	});
列属性

DT GRID对于列是通过JSON数组的方式完成定义的,每一列都会有很多属性可以自由配置。

id

定义列编号,该编号将会对应数据中的字段名称,如果是自定义解析内容列,该属性可以随意填写,注意列与列之间该属性不能重复。

参数类型:字符串(string)

默认值:field

title

列名,可以随意填写。

参数类型:字符串(string)

默认值:field

type

列展示数据的类型,可选类型如下:

string:字符型数据

date:日期型数据

number:数值型数据

参数类型:弱枚举类型,可选值:string,date,number

默认值:string。

format

内容格式化属性,该属性仅当列类型为datenumber时有效。

对于date类型数据来说,格式化脚本如下:

y:年

M:月

d:日

h:小时

m:分钟

s:秒

S:毫秒

典型的示例如下:yyyy-MM-dd hh:mm:ss.S,显示的内容为:2014-10-21 09:50:33.386

对于number类型数据来说,格式化脚本如下:

#:如果顶位为0则不显示该内容

0:无论如何都会显示,没有数据的情况下补全0

典型的示例如下:#,###.00,显示的内容为:12,345,678.90

注意:format属性是影响打印和导出功能的,使用了format参数格式的内容在打印和导出时也会按照此格式进行解析。

参数类型:字符串(string)

默认值:null

otype

列展示数据的原始类型,该参数主要用于格式化时判断原始数据的类型,目前仅当type参数为date时有效。当该属性不填写的时候,我们默认认为您传递的数据是JS的日期对象来进行格式化处理。可选类型如下:

time_stamp_s:秒级时间戳

time_stamp_ms:毫秒级时间戳

string:字符串类型

参数类型:弱枚举类型,可选值:time_stamp_s,time_stamp_ms,string

默认值:null。

oformat

配合otype参数使用,当otype参数为string时,我们需要您告知该日期字符串的格式,该格式就是在此标识的,脚本格式同format中日期的脚本格式相同。

参数类型:字符串(string)

默认值:null

columnStyle

定义列内容的样式,样式遵循标准css规范。

参数类型:字符串(string)

默认值:空字符串

columnClass

定义列内容的样式表,使用自定义的class定义样式。

参数类型:字符串(string)

默认值:空字符串

headerStyle

定义列标题的样式,样式遵循标准css规范。

参数类型:字符串(string)

默认值:空字符串

headerClass

定义列标题的样式表,使用自定义的class定义样式。

参数类型:字符串(string)

默认值:空字符串

hide

是否彻底隐藏,当hide设置为true时,将在表样解析时不会被显示,在dom中也不会被查找得到。该属性主要用于一些比如主键之类的编号型数据的处理,使用hide属性将其隐藏,调用的时候通过方法获取数据取得编号使用。

参数类型:布尔类型(boolean)

默认值:false

hideType

该属性主要用于响应式表格的配置,用于配置在哪些终端下进行隐藏,提供的属性如下:

xs:在小屏幕下隐藏,主要用于手机终端,触发宽度:小于768像素

sm:在较小屏幕下隐藏,主要用于平板终端,触发宽度:介于768像素到992像素之间

md:在中等屏幕下隐藏,主要用于分辨率较低的电脑终端:介于992像素到1200像素之间

lg:在大屏幕下隐藏,主要用于大分辨率的电脑终端:大于1200像素

DT GRID的响应式是完全基于Bootstrap组件的,并且基于visible-lgvisible-mdvisible-smvisible-xs四个css样式完成响应式的解析,如果您需要调整各种触发终端的参数,您可以直接修改Bootstrap中这四个样式对应的media内容。

多个参数使用|方式分割,如:md|sm|xs,表示该列仅在大屏幕下显示。

参数类型:字符串(string)

默认值:空字符串,即所有终端全部显示。

extra

是否在扩展列中显示该内容。由于我们的响应式是基于样式控制的,所以表样显示的数据内容和隐藏起来的内容是独立实现的,也就是说每一个单元格的内容实际上被展示了两份,只不过DT GRID会通过程序和配置来控制是在表样中显示还是在扩展中显示,这就导致有些自定义解析的内容会产生获取错误,比如一个自定义解析的单元格中显示的是复杂条件复选框,通过check属性无法直接完成,只能通过自定义解析器resolution属性来自定解析,这就导致每一个复选框会解析出两个复选框,以dom的方式获取选中内容会发生错误,所以我们提供了extra属性,当extra属性为false时,扩展中将不会显示该内容,避免获取数据时发生的错误。

参数类型:布尔类型(boolean)

默认值:true

codeTable

用于码表信息的扩展。目前很多大型系统都提供码表机制,通过缓存(对于J2EE项目来说通常存储在application域中)来存储码表信息,调用时可以实时调用,避免频繁访问数据库,并且也能很好的规划码表信息,避免通用信息解析混乱。

DT GRID通过此参数可以实现码表的解析,如性别,1表示男,2表示女,那么获取数据时直接获取1或2即可,在此属性中设置一个JSON对象,以性别为例格式则为:{1:'男', 2:'女'},则我们在显示表样是将会显示男或女。

注意:如果码表中并没有解析的内容,如上述示例,传递的内容为3,那么我们将原样显示3。

注意:码表信息是影响打印和导出的,在打印和导出过程中也会对码表信息进行解析。

参数类型:对象(Object)

默认值:null

fastQuery

是否启用快速查询,如果启用快速查询,在点击查询按钮显示的面板中将显示该列的快速查询表单内容。

参数类型:布尔类型(boolean)

默认值:false

fastQueryType

启用快速查询的类型,类型可选参数为:

eq:equals,等于

ne:not equals,不等于

lk:like,模糊匹配

ll:left like,左侧模糊匹配

rl:right like,右侧模糊匹配

gt:great than,大于

ge:great than equals,大于等于

lt:less than,小于

le:less than equals,小于等于

range:range,范围,通常用于时间或数值

参数类型:弱枚举类型,可选值:eq、ne、lk、ll、rl、gt、ge、lt、le、range

默认值:空字符串

advanceQuery

是否启用高级查询,当该参数为false时,高级查询将不会作为可选项进行过滤或排序。

参数类型:布尔类型(boolean)

默认值:true

export

是否可以执行导出,当该参数为false时,导出时将不会作为可选项进行导出。

注意:exportjavascript的保留关键字,使用时请尽量按此方式定义:'export':false,不推荐直接写为:export:false

参数类型:布尔类型(boolean)

默认值:true

print

是否可以执行打印,当该参数为false时,打印时将不会作为可选项进行打印。

参数类型:布尔类型(boolean)

默认值:true

resolution

自定义解析函数。通过匿名方法(或外层预置方法)的方式定义,示例代码如下:

resolution:function(record, value){
	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;
}

方法中将传递以下两个参数:

record:记录集,可以直接获取该行的数据。

value:当前单元格的值。

参数类型:方法(function)

默认值:null

表格属性

表格属性主要用于对表格全局属性的配置。

id

用于设置表格的编号,如果没有特殊需要可以不设置该属性,表格构建过程中将会自动生成唯一的GUID来处理。

注意:同一页面中的多个表格中的该属性不能重复。

参数类型:字符串(string)

默认值:GUID

ajaxLoad

是否通过ajax的方式加载数据,如果设置为true,则将通过loadURL的地址获取数据,如果设置为false,则基础数据由datas属性传入。

参数类型:布尔类型(boolean)

默认值:true

loadAll

是否一次全部加载数据。该参数仅在ajaxLoad属性为true时起作用,不过我们并不推荐这种方式,全部加载会影响第一次的执行效率,带来较差的用户体验,而且数据展现有可能并非是实时的。优势在于一次加载,后期的处理效率非常高。

参数类型:布尔类型(boolean)

默认值:false

loadURL

ajax加载数据的地址,本属性只有在ajaxLoad参数设置为true时起作用。

注意:如果是一次全部数据加载模式(即loadAll属性为true),请保证loadURL返回值为JSON数组,如果非全部数据加载模式,则需要返回对应的Pager对象Pager对象的格式在提供的下载项目中有具体实现。

参数类型:字符串(string)

默认值:空字符串

datas

表格数据,数据格式为JSON数组。该参数仅在ajaxLoad参数设置为false时有效。

参数类型:JSON数组

默认值:null

tableStyle

定义表格的全局样式,样式遵循标准css规范

参数类型:字符串(string)

默认值:空字符串

tableClass

定义表格的全局样式表,使用自定义的class定义样式。

参数类型:字符串(string)

默认值:table table-bordered table-hover table-responsive

check

DT GRID提供复选功能,设置该属性为true则将会在所有列之前添加一个复选框的列,并在列标题提供全部选择、全部取消功能。该复选框可以使用getCheckedRecords方法来获取选中的内容。

参数类型:布尔类型(boolean)

默认值:false

showHeader

是否显示列标题。

参数类型:布尔类型(boolean)

默认值:true

girdContainer

表格承载容器对象的id,设置完成后表格将显示在此容器中。

参数类型:字符串(string)

默认值:dtGridContainer

toolbarContainer

工具条承载容器对象的id,设置完成后表格的工具条将显示在此容器中。

参数类型:字符串(string)

默认值:dtGridToolBarContainer

tools

工具条可选内容,可选参数如下:

refresh:刷新表格

fastQuery:快速查询

advanceQuery:高级查询

export:导出

excel:导出excel文件

csv:导出csv文件

pdf:导出pdf文件

txt:导出txt文件

print:打印

多参数采用|符号进行分割,export的典型格式为:export[excel,csv,pdf,txt],全格式参考:refresh|faseQuery|advanceQuery|export[excel,csv,pdf,txt]|print

参数类型:字符串(string)

默认值:refresh|faseQuery|advanceQuery|export[excel,csv,pdf,txt]|print

exportFileName

导出文件的文件名。

参数类型:字符串(stirng)

默认值:datas

exportURL

导出文件的响应地址,该属性对ajax动态加载分页模式无效,ajax动态分页加载模式由于需要执行SQL拼接操作,所以是直接封装在loadURL参数中的,具体的实现方式请参考我们提供下载的项目实现。

参数类型:字符串(string)

默认值:/dtgrid/export

pageSize

每页显示条数。

参数类型:整数(integer)

默认值:20

columns

列对象定义,将上述定义列的JSON数组对象传递到此参数中。

参数类型:JSON数组

默认值:null

onRowClick

行单击方法,方法中将传递record参数,可以通过record参数获取改行的数据内容。

参数类型:方法(function)

默认值:null

onRowDblClick

行双击方法,方法中将传递record参数,可以通过record参数获取改行的数据内容。

参数类型:方法(function)

默认值:null

对象方法

对象方法可以通过实例化好的DtGrid对象直接调用。

load

重新加载方法。调用此参数将刷新所有参数,在ajax动态分页加载模式下将重新获取数据。不过我们并不推荐您使用此方法,如果需要进行刷新,请使用reloadrefresh方法。

方法名:load

参数:无

返回值:无

reload

表格刷新方法。

方法名:reload

参数

allReload:是否全部刷新,当allReload为true时,同load方法,当allReload为false时,将只做重新现有加载数据级别的刷新,并不会重新到服务器端获取数据。

返回值:无

refresh

该方法为reload的重载方法,调用方式同上。

constructGrid

构建表格内容方法,内部方法,不建议调用。

方法名:constructGrid

参数:无

返回值:无

constructGirdPageBar

构建表格分页工具条方法,内部方法,不建议调用。

方法名:constructGridPageBar

参数:无

返回值:无

constructGridToolBar

构建表格工具条方法,内部方法,不建议调用。

方法名:constructGridToolBar

参数:无

返回值:无

showProcessBar

显示进度条。

方法名:showProcessBar

参数:无

返回值:无

hideProcessBar

隐藏进度条。

方法名:hideProcessBar

参数:无

返回值:无

formatContent

格式化内容,将针对format属性和codeTable属性进行解析,内部方法,不建议调用。

方法名:formatContent

参数

column:列对象

value:需要被格式化的内容

返回值:格式化后的内容

goPage

跳转页面。

方法名:goPage

参数

page:页码,整数类型(integer)

返回值:无

fastQuery

调用快速查询面板。

方法名:fastQuery

参数:无

返回值:无

advanceQuery

调用高级查询面板。

方法名:advanceQuery

参数:无

返回值:无

print

调用打印面板。

方法名:print

参数:无

返回值:无

exportFile

调用导出面板。

方法名:exportFile

参数

exportType:导出类型,弱枚举类型,可选类型为:excel、csv、pdf、txt

返回值:无

getCheckedRecords

获取复选内容,该方法仅对check属性设置为true时起作用。返回的值为JSON数组格式的被选中的记录集。,

方法名:getCheckedRecords

参数:无

返回值:JSON数组格式的被选中的记录集。

静态方法

静态方法为DT GRID制作过程中抽取出来的一些辅助方法,也可以公开使用,调用方式为:$.fn.DtGrid.tools.方法

guid

生成GUID方法,将会生成唯一的GUID字符串。

方法名:guid

参数:无

返回值:guid字符串

addEvent

事件注册方法,为解决跨浏览器事件注册问题。

方法名:addEvent

参数

element:被注册的dom对象

methodName:注册的方法名

fn:注册的方法

返回值:无

getWindowStart

获取Bootstrap中的模态窗口的开始部分html代码。

方法名:getWindowStart

参数

id:窗口编号,不能重复

title:窗口标题内容

返回值:模态窗口开始部分html代码

getWindowEnd

获取Bootstrap中的模态窗口的结束部分html代码

方法名:getWindowEnd

参数

buttons:按钮列表html代码,将会被放置在关闭按钮之后。

返回值:模态窗口结束部分html代码

toast

提示方法。

方法名:toast

参数

content:提示内容

level:提示级别,弱枚举类型,可选参数为:info、warning、error、success,默认值:info

time:提示显示时间,单位为毫秒,整数类型(integer),默认值:3000

返回值:无

toDate

将字符串转换为JS日期对象,转换规范同format日期格式化规范。

方法名:toDate

参数

date:日期字符串

pattern:转换格式,默认值:yyyy-MM-dd hh:mm:ss

返回值:JS日期对象

dateFormat

JS日期对象格式化为字符串,转换规范同format日期格式化规范。

方法名:dateFormat

参数

value:日期对象

format:格式化规则

返回值:格式化后的日期字符串

replaceAll

替换所有内容。

方法名:replaceAll

参数

s:原字符串

s1:需要替换的字符

s2:替换后的字符

返回值:经过替换后的字符串结果

startsWith

判断字符串是否由某字符串开始。

方法名:startsWith

参数

str:原字符串

prefix:前缀字符串

返回值:布尔类型(boolean),如果str由prefix开始则返回true,否则返回false

endsWith

判断字符串是否由某字符串结束。

方法名:endsWith

参数

str:原字符串

suffix:后缀字符串

返回值:布尔类型(boolean),如果str由suufix结束则返回true,否则返回false

equalsIgnoreCase

忽略大小写比较字符串是否相同。

方法名:equalsIgnoreCase

参数

str1:被比较的字符串

str2:被比较的字符串

返回值:布尔类型(boolean),如果str1与str2忽略大小写相同则返回true,否则返回false

numberFormat

数值格式化,格式化规范同format参数中的数值格式化规范。

方法名:numberFormat

参数

number:被格式化的数值

pattern:格式化规则

返回值:格式化后的数值

高级功能

Ajax查询的封装

请参阅DT GRID提供的本地项目内容中的实现。

导出的服务器封装

请参阅DT GRID提供的本地项目内容中的实现。

快速查询的服务器封装

请参阅DT GRID提供的本地项目内容中的实现。

高级查询的服务器封装

请参阅DT GRID提供的本地项目内容中的实现。