部署

基础文件引入

我们为您推荐的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" />
<!-- DLShouWen Grid -->
<script type="text/javascript" src="../../../dlshouwen.grid.js"></script>
<script type="text/javascript" src="../../../i18n/en.js"></script>
<link rel="stylesheet" type="text/css" href="../../../dlshouwen.grid.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文件夹中您所需要的语言文件引入到dlshouwen.grid.js文件下方即可。

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

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

//映射内容
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.dlshouwen.grid.tools.dateFormat(new Date(Math.floor(Math.random()*1096588800000)+315504000000), 'yyyy-MM-dd');
	user.string_time = $.fn.dlshouwen.grid.tools.dateFormat(new Date(Math.floor(Math.random()*1096588800000)+315504000000), 'yyyy-MM-dd hh:mm:ss');
	datas.push(user);
}
//定义表格
var gridColumns = [
	{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 gridOption = {
	ajaxLoad : false,
	exportFileName : '用户列表',
	datas : datas,
	columns : gridColumns,
	pageSize : 10
};
var grid = $.fn.dlshouwen.grid.init(gridOption);
$(function(){
	grid.load();
});
列属性

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

id

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

参数类型:字符串(string)

默认值:field

title

列名,可以随意填写。

参数类型:字符串(string)

默认值:field

widthNew

列宽度,该属性可以指定某列的宽度,响应式表格列宽更像max-width的属性作用,当容器总宽度无法承载所有列时,此宽度依然会被压缩。当所有列均指定宽度时,将按照列宽的比重划分百分比,计算方式同表格单元格width属性计算相同。

该参数的配置实例:width:80width:'80px'width:'20%'

参数类型:字符串(string)或数值型(number)

默认值:null

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像素

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

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

参数类型:字符串(string)

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

extra

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

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

默认值:true

codeTable

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

DLShouWen 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(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;
}

resolution:function(value, record, column, grid, dataNo, columnNo){
	var content = '';
	content += '<button class="btn btn-xs btn-default" onclick="alert(\'Edit User: '+record.user_name+'\');"><i class="fa fa-edit"></i>  Edit</button>';
	content += '  ';
	content += '<button class="btn btn-xs btn-danger" onclick="alert(\'Delete User: '+record.user_name+'\');"><i class="fa fa-trash-o"></i>  Delete</button>';
	return content;
}

自定义解析通常用于自定义显示的内容或在当前单元格中生成一些操作按钮。

方法中将传递以下参数:

value:当前单元格的值

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

column:列对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

参数类型:方法(function)

默认值:null

表格属性

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

id

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

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

参数类型:字符串(string)

默认值:GUID

lang

用于设置表格的语言,目前提供三种语言:英文简体中文繁体中文,默认为英文

注意:语言需要引入对应的i18n语言文件。

参数类型:弱枚举类型,可选值:en,zh-cn,zh-tw,可扩展其他语言

默认值:en

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

extraWidthNew

展开、缩放按钮所在列宽度,该属性可以指定展开、缩放按钮所在列的宽度。

该参数的配置实例:extraWidth:80extraWidth:'80px'extraWidth:'20%'

参数类型:字符串(string)或数值型(number)

默认值:null

check

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

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

默认值:false

checkWidthNew

复选框所在列宽度,该属性可以指定复选框所在列的宽度。

该参数的配置实例:checkWidth:80checkWidth:'80px'checkWidth:'20%'

参数类型:字符串(string)或数值型(number)

默认值:null

showHeader

是否显示列标题。

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

默认值:true

girdContainer

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

参数类型:字符串(string)

默认值:gridContainer

toolbarContainer

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

参数类型:字符串(string)

默认值:gridToolBarContainer

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)

默认值:/grid/export

pageSize

每页显示条数。

参数类型:整数(integer)

默认值:20

pageSizeLimit

每页显示条数的限制。如果该参数为数组,则按照数组中的内容生成下拉框供用户选择每页显示条数,如果该参数为整数,则提供输入框供用户自行输入每页显示条数,此参数中设置的值为限制输入的最大值,如果该参数设置为其他类型,则原样显示每页显示条数,不提供用户自行更改。

参数类型:数组(array) 或 整数(integer) 或 其他

默认值:[20, 50, 100]

columns

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

参数类型:JSON数组

默认值:null

表格事件属性

主要针对表格各种事件的回调方法,所有方法均在option属性中进行配置,配置的回调方法中的参数在各方法中均有详细说明。

onCellClick

绑定单元格单击方法,方法中将传递valuerecordcolumngriddataNocolumnNocellrowextraCelle参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前单元格所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前单元格所处行的jQuery对象

extraCell:当前单元格所处扩展行的jQuery对象

e:事件对象

onCellDblClick

绑定单元格双击方法,方法中将传递valuerecordcolumngriddataNocolumnNocellrowextraCelle参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前单元格所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前单元格所处行的jQuery对象

extraCell:当前单元格所处扩展行的jQuery对象

e:事件对象

onCellMouseOver

绑定单元格鼠标移入方法,方法中将传递valuerecordcolumngriddataNocolumnNocellrowextraCelle参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前单元格所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前单元格所处行的jQuery对象

extraCell:当前单元格所处扩展行的jQuery对象

e:事件对象

onCellMouseMove

绑定单元格鼠标移动方法,方法中将传递valuerecordcolumngriddataNocolumnNocellrowextraCelle参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前单元格所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前单元格所处行的jQuery对象

extraCell:当前单元格所处扩展行的jQuery对象

e:事件对象

onCellMouseOut

绑定单元格鼠标移出方法,方法中将传递valuerecordcolumngriddataNocolumnNocellrowextraCelle参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前单元格所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前单元格所处行的jQuery对象

extraCell:当前单元格所处扩展行的jQuery对象

e:事件对象

onCellMouseDown

绑定单元格鼠标摁下方法,方法中将传递valuerecordcolumngriddataNocolumnNocellrowextraCelle参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前单元格所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前单元格所处行的jQuery对象

extraCell:当前单元格所处扩展行的jQuery对象

e:事件对象

onCellMouseUp

绑定单元格鼠标释放方法,方法中将传递valuerecordcolumngriddataNocolumnNocellrowextraCelle参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前单元格所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前单元格所处行的jQuery对象

extraCell:当前单元格所处扩展行的jQuery对象

e:事件对象

onRowClick

绑定行单击方法,方法中将传递valuerecordcolumngriddataNocolumnNoRowrowextraRowe参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前行所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前行的jQuery对象

extraRow:当前行所处扩展行的jQuery对象

e:事件对象

onRowDblClick

绑定行双击方法,方法中将传递valuerecordcolumngriddataNocolumnNoRowrowextraRowe参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前行所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前行的jQuery对象

extraRow:当前行所处扩展行的jQuery对象

e:事件对象

onRowMouseOver

绑定行鼠标移入方法,方法中将传递valuerecordcolumngriddataNocolumnNoRowrowextraRowe参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前行所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前行的jQuery对象

extraRow:当前行所处扩展行的jQuery对象

e:事件对象

onRowMouseMove

绑定行鼠标移动方法,方法中将传递valuerecordcolumngriddataNocolumnNoRowrowextraRowe参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前行所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前行的jQuery对象

extraRow:当前行所处扩展行的jQuery对象

e:事件对象

onRowMouseOut

绑定行鼠标移出方法,方法中将传递valuerecordcolumngriddataNocolumnNoRowrowextraRowe参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前行所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前行的jQuery对象

extraRow:当前行所处扩展行的jQuery对象

e:事件对象

onRowMouseDown

绑定行鼠标摁下方法,方法中将传递valuerecordcolumngriddataNocolumnNoRowrowextraRowe参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前行所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前行的jQuery对象

extraRow:当前行所处扩展行的jQuery对象

e:事件对象

onRowMouseUp

绑定行鼠标释放方法,方法中将传递valuerecordcolumngriddataNocolumnNoRowrowextraRowe参数。

参数类型:方法(function)

默认值:null

方法传递参数

value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码

record:当前行所处行的数据对象

column:当前单元格所处列的对象

grid:表格对象

dataNo:数据编号,从0开始

columnNo:列编号,从0开始

cell:当前单元格的jQuery对象

row:当前行的jQuery对象

extraRow:当前行所处扩展行的jQuery对象

e:事件对象

onHeaderClick

绑定表头单击方法,方法中将传递title, column, grid, columnNo, header, headerRow, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

title:当前表头标题

column:当前表头所处列的对象

grid:表格对象

columnNo:列编号,从0开始

header:当前表头的jQuery对象

headerRow:当前表头所处行的jQuery对象

e:事件对象

onHeaderDblClick已废弃

由于DLShouWen Grid表头包含排序功能,排序需要重新加载表头代码,所以暂时无法实现表头双击事件的绑定。

onHeaderMouseOver

绑定表头鼠标移入方法,方法中将传递title, column, grid, columnNo, header, headerRow, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

title:当前表头标题

column:当前表头所处列的对象

grid:表格对象

columnNo:列编号,从0开始

header:当前表头的jQuery对象

headerRow:当前表头所处行的jQuery对象

e:事件对象

onHeaderMouseMove

绑定表头鼠标移动方法,方法中将传递title, column, grid, columnNo, header, headerRow, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

title:当前表头标题

column:当前表头所处列的对象

grid:表格对象

columnNo:列编号,从0开始

header:当前表头的jQuery对象

headerRow:当前表头所处行的jQuery对象

e:事件对象

onHeaderMouseOut

绑定表头鼠标移出方法,方法中将传递title, column, grid, columnNo, header, headerRow, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

title:当前表头标题

column:当前表头所处列的对象

grid:表格对象

columnNo:列编号,从0开始

header:当前表头的jQuery对象

headerRow:当前表头所处行的jQuery对象

e:事件对象

onHeaderMouseDown

绑定表头鼠标摁下方法,方法中将传递title, column, grid, columnNo, header, headerRow, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

title:当前表头标题

column:当前表头所处列的对象

grid:表格对象

columnNo:列编号,从0开始

header:当前表头的jQuery对象

headerRow:当前表头所处行的jQuery对象

e:事件对象

onHeaderMouseUp

绑定表头鼠标释放方法,方法中将传递title, column, grid, columnNo, header, headerRow, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

title:当前表头标题

column:当前表头所处列的对象

grid:表格对象

columnNo:列编号,从0开始

header:当前表头的jQuery对象

headerRow:当前表头所处行的jQuery对象

e:事件对象

onGridClick

绑定表格单击方法,方法中将传递grid, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

grid:表格对象

e:事件对象

onGridDblClick

绑定表格双击方法,方法中将传递grid, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

grid:表格对象

e:事件对象

onGridMouseOver

绑定表格鼠标移入方法,方法中将传递grid, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

grid:表格对象

e:事件对象

onGridMouseMove

绑定表格鼠标移动方法,方法中将传递grid, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

grid:表格对象

e:事件对象

onGridMouseOut

绑定表格鼠标移出方法,方法中将传递grid, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

grid:表格对象

e:事件对象

onGridMouseDown

绑定表格鼠标摁下方法,方法中将传递grid, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

grid:表格对象

e:事件对象

onGridMouseUp

绑定表格鼠标释放方法,方法中将传递grid, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

grid:表格对象

e:事件对象

onGridComplete

绑定表格加载完成方法,方法中将传递grid参数。

参数类型:方法(function)

默认值:null

方法传递参数

grid:表格对象

onExtraOpen

绑定展开扩展列方法,方法中将传递record, grid, dataNo, row, extraCell, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

record:当前行数据对象

grid:表格对象

dataNo:数据编号,从0开始

row:当前行的jQuery对象

extraRow:当前行所处扩展行的jQuery对象

e:事件对象

onExtraClose

绑定关闭扩展列方法,方法中将传递record, grid, dataNo, row, extraCell, e参数。

参数类型:方法(function)

默认值:null

方法传递参数

record:当前行数据对象

grid:表格对象

dataNo:数据编号,从0开始

row:当前行的jQuery对象

extraRow:当前行所处扩展行的jQuery对象

e:事件对象

交互参数

交互参数是前端脚本同服务器端交互的参数信息,该内容仅用于表格属性中ajaxLoadtrue的加载数据模式(Ajax全部加载数据、Ajax分页加载数据)。

注意:交互参数并不能直接通过实例化好的DLShouWen Grid对象调用,交互参数是在同服务器端交互时实例化完成并由服务器通过Pager对象接收的,并非DLShouWen Grid对象。

注意:交互参数中标明可以修改的属性,您可以通过修改对象参数来完成参数变更。

isSuccess

用途:数据是否加载成功,若查询SQL出现错误或高级查询中配置错误,则该返回值为false,正确查询则为true。

特殊说明:该参数不建议手动修改。

isExport

用途:用于判断前台的交互信息是否为导出的动作。

特殊说明:该参数不建议手动修改。

exportFileName

用途:用于导出文件时的文件名,该文件名由option属性集中的exportFileName获得。

特殊说明:该参数不建议手动修改。

exportType

用途:导出的文件类型,将由组件根据用户选择自行处理。

特殊说明:该参数不建议手动修改。

exportAllData

用途:是否导出全部数据,将由组件根据用户选择自行处理。

特殊说明:该参数不建议手动修改。

exportColumns

用途:导出的列集合,将由组件根据用户选择自行处理。

特殊说明:该参数不建议手动修改。

exportDataIsProcessed

用途:导出的数据是否已经被处理。该属性为前后台的一个数据处理标识,经由resolution、数据格式化等操作完成处理的数据被视为已处理。

特殊说明:该参数不建议手动修改。

exportDatas

用途:导出的数据集合,将由组件根据用户选择自行生成,生成的导出数据均为处理后的数据。

特殊说明:该参数不建议手动修改。

pageSize

用途:每页的显示的记录条数。

特殊说明:该参数可以手动修改。

startRecord

用途:开始的记录号。

特殊说明:该参数可以手动修改。

nowPage

用途:当前页号。

特殊说明:该参数可以手动修改。

recordCount

用途:当前查询的纪录总数。

特殊说明:该参数不建议手动修改。

pageCount

用途:当前查询的纪录总页数。

特殊说明:该参数不建议手动修改。

parameters

用途:自定义参数集合。该参数可通过Javascript手动设置,属性类型为Object对象,可以通过Javascript设置参数,设置完成后通过服务器端封装的Pager对象访问对象中的parameters属性即可获得对应参数集合,该集合对应Java服务器为Map对象。

特殊说明:该参数可以手动修改。

fastQueryParameters

用途:快速查询的参数合集,将由组件根据用户选择自行生成。

特殊说明:该参数不建议手动修改。

advanceQueryConditions

用途:高级查询的查询参数合集,将由组件根据用户选择自行生成。

特殊说明:该参数不建议手动修改。

advanceQuerySorts

用途:高级查询的排序参数合集,将由组件根据用户选择自行生成。

特殊说明:该参数不建议手动修改。

exhibitDatas

用途:展示的数据结果集。

特殊说明:该参数不建议手动修改。

对象属性

对象属性可以通过实例化好的DLShouWen Grid对象直接访问或修改。

init

用途:初始化参数。

子参数

toolsIsInit [boolean 布尔型]:工具条是否初始化

printWindowIsInit [boolean 布尔型]:打印窗体是否初始化

exportWindowIsInit [Object<string, boolean> 对象]:导出窗体是否初始化(该参数包含多个子参数,每个子参数标识哪一个导出类型的窗体是否初始化)

fastQueryWindowIsInit [boolean 布尔型]:快速查询窗体是否初始化

advanceQueryWindowIsInit [boolean 布尔型]:高级查询窗体是否初始化

特殊说明:该参数不建议手动修改。

pager

用途:页面参数对象。

子参数

pageSize [int 数值型]:每页显示条数

startRecord [int 数值型]:开始记录编号

nowPage [int 数值型]:当前页号

recordCount [int 数值型]:总记录条数

pageCount [int 数值型]:总页数

特殊说明:该参数内容均为组件自动计算生成,其中pageSize可通过程序修改。

option

用途:表格参数对象。

特殊说明:该参数内容由用户配置及默认属性整合而成,可通过程序修改。

originalDatas

用途:原始数据集。

特殊说明:该参数内容为表格的原始数据,不建议手动修改。

baseDatas

用途:基础数据集,从原始数据集中经过分页参数计算得来的当前页的数据。

特殊说明:该参数内容为表格的基础数据,不建议手动修改。

exhibitDatas

用途:展现数据集,从基础数据集中经过处理(或服务器解析处理)后的展现数据。

特殊说明:该参数内容为组件自动生成,不建议手动修改。

sortParameter

用途:排序参数。

子参数

columnId [string 字符型]:排序列的名称,即配置列属性中的id

sortType [int 数值型]:排序类别 [0-不排序,1-正序,2-倒序]

特殊说明:该参数内容为组件自动生成,不建议手动修改。

sortOriginalDatas

用途:排序缓存数据集,由于排序过程将会造成显示数据重新排序,如果不做缓存将无法还原为不排序时的数据顺序,所以用此参数缓存未排序时的数据。

特殊说明:该参数内容为组件自动处理,不建议手动修改。

parameters

用途:自定义参数集合。该参数可通过Javascript手动设置,属性类型为Object对象,可以通过Javascript设置参数,设置完成后通过服务器端封装的Pager对象访问对象中的parameters属性即可获得对应参数集合,该集合对应Java服务器为Map对象。

特殊说明:该参数可以手动修改。

fastQueryParameters

用途:快速查询的参数合集,将由组件根据用户选择自行生成。

特殊说明:该参数不建议手动修改。

fastQueryOriginalDatas

用途:快速查询缓存的原生数据,用于非Ajax分页数据加载模式时的缓存数据。

特殊说明:该参数不建议手动修改。

advanceQueryParameter

用途:高级查询的参数对象。

advanceQueryConditions [array 数组]:高级查询中的查询列表

advanceQuerySorts [array 数组]:高级查询中的排序列表

特殊说明:该参数不建议手动修改。

printColumns

用途:打印列集合。

特殊说明:该参数不建议手动修改。

exportColumns

用途:导出列集合。

特殊说明:该参数不建议手动修改。

exportDatas

用途:导出数据。

特殊说明:该参数不建议手动修改。

对象方法

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

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数组格式的被选中的记录集。

静态方法

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

guid

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

方法名:guid

参数:无

返回值:guid字符串

addEvent已删除

该方法已被删除。

getWindowStart

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

方法名:getWindowStart

参数

id:窗口编号,不能重复

title:窗口标题内容

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

getWindowEnd

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

方法名:getWindowEnd

参数

closeButtonTitle:关闭按钮字样。

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查询的封装

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

导出的服务器封装

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

快速查询的服务器封装

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

高级查询的服务器封装

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