我们为您推荐的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数组
的方式完成定义的,每一列都会有很多属性可以自由配置。
定义列编号,该编号将会对应数据中的字段名称,如果是自定义解析内容列,该属性可以随意填写,注意列与列之间该属性不能重复。
参数类型
:字符串(string)
默认值
:field
列名,可以随意填写。
参数类型
:字符串(string)
默认值
:field
列宽度,该属性可以指定某列的宽度,响应式表格列宽更像max-width
的属性作用,当容器总宽度无法承载所有列时,此宽度依然会被压缩。当所有列均指定宽度时,将按照列宽的比重划分百分比,计算方式同表格单元格width
属性计算相同。
该参数的配置实例:width:80
、width:'80px'
、width:'20%'
参数类型
:字符串(string)或数值型(number)
默认值
:null
列展示数据的类型,可选类型如下:
string:字符型数据
date:日期型数据
number:数值型数据
参数类型
:弱枚举类型,可选值:string,date,number
默认值
:string。
内容格式化属性,该属性仅当列类型为date
或number
时有效。
对于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
列展示数据的原始类型,该参数主要用于格式化时判断原始数据的类型,目前仅当type
参数为date
时有效。当该属性不填写的时候,我们默认认为您传递的数据是JS的日期对象来进行格式化处理。可选类型如下:
time_stamp_s:秒级时间戳
time_stamp_ms:毫秒级时间戳
string:字符串类型
参数类型
:弱枚举类型,可选值:time_stamp_s,time_stamp_ms,string
默认值
:null。
配合otype
参数使用,当otype
参数为string
时,我们需要您告知该日期字符串的格式,该格式就是在此标识的,脚本格式同format中日期的脚本格式相同。
参数类型
:字符串(string)
默认值
:null
定义列内容的样式,样式遵循标准css规范。
参数类型
:字符串(string)
默认值
:空字符串
定义列内容的样式表,使用自定义的class定义样式。
参数类型
:字符串(string)
默认值
:空字符串
定义列标题的样式,样式遵循标准css规范。
参数类型
:字符串(string)
默认值
:空字符串
定义列标题的样式表,使用自定义的class定义样式。
参数类型
:字符串(string)
默认值
:空字符串
是否彻底隐藏,当hide
设置为true
时,将在表样解析时不会被显示,在dom中也不会被查找得到。该属性主要用于一些比如主键之类的编号型数据的处理,使用hide
属性将其隐藏,调用的时候通过方法获取数据取得编号使用。
参数类型
:布尔类型(boolean)
默认值
:false
该属性主要用于响应式表格的配置,用于配置在哪些终端下进行隐藏,提供的属性如下:
xs:在小屏幕下隐藏,主要用于手机终端,触发宽度:小于768像素
sm:在较小屏幕下隐藏,主要用于平板终端,触发宽度:介于768像素到992像素之间
md:在中等屏幕下隐藏,主要用于分辨率较低的电脑终端:介于992像素到1200像素之间
lg:在大屏幕下隐藏,主要用于大分辨率的电脑终端:大于1200像素
DLShouWen Grid的响应式是完全基于Bootstrap
组件的,并且基于visible-lg
、visible-md
、visible-sm
、visible-xs
四个css样式完成响应式的解析,如果您需要调整各种触发终端的参数,您可以直接修改Bootstrap
中这四个样式对应的media
内容。
多个参数
使用|方式分割,如:md|sm|xs,表示该列仅在大屏幕下显示。
参数类型
:字符串(string)
默认值
:空字符串,即所有终端全部显示。
是否在扩展列中显示该内容。由于我们的响应式是基于样式控制的,所以表样显示的数据内容和隐藏起来的内容是独立实现的,也就是说每一个单元格的内容实际上被展示了两份,只不过DLShouWen Grid会通过程序和配置来控制是在表样中显示还是在扩展中显示,这就导致有些自定义解析的内容会产生获取错误,比如一个自定义解析的单元格中显示的是复杂条件复选框,通过check
属性无法直接完成,只能通过自定义解析器resolution
属性来自定解析,这就导致每一个复选框会解析出两个复选框,以dom的方式获取选中内容会发生错误,所以我们提供了extra属性,当extra属性为false时,扩展中将不会显示该内容,避免获取数据时发生的错误。
参数类型
:布尔类型(boolean)
默认值
:true
用于码表信息的扩展。目前很多大型系统都提供码表机制,通过缓存(对于J2EE项目来说通常存储在application域中)来存储码表信息,调用时可以实时调用,避免频繁访问数据库,并且也能很好的规划码表信息,避免通用信息解析混乱。
DLShouWen Grid通过此参数
可以实现码表的解析,如性别,1表示男,2表示女,那么获取数据时直接获取1或2即可,在此属性中设置一个JSON对象,以性别为例格式则为:{1:'男', 2:'女'}
,则我们在显示表样是将会显示男或女。
注意:如果码表中并没有解析的内容,如上述示例,传递的内容为3,那么我们将原样显示3。
注意:码表信息是影响打印和导出的,在打印和导出过程中也会对码表信息进行解析。
参数类型
:对象(Object)
默认值
:null
是否启用快速查询,如果启用快速查询,在点击查询按钮显示的面板中将显示该列的快速查询表单内容。
参数类型
:布尔类型(boolean)
默认值
:false
启用快速查询的类型,类型可选参数
为:
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
默认值
:空字符串
是否启用高级查询,当该参数
为false时,高级查询将不会作为可选项进行过滤或排序。
参数类型
:布尔类型(boolean)
默认值
:true
是否可以执行导出,当该参数为false时,导出时将不会作为可选项进行导出。
注意:export
为javascript
的保留关键字,使用时请尽量按此方式定义:'export':false
,不推荐直接写为:export:false
。
参数类型
:布尔类型(boolean)
默认值
:true
是否可以执行打印,当该参数为false
时,打印时将不会作为可选项进行打印。
参数类型
:布尔类型(boolean)
默认值
:true
自定义解析函数。通过匿名方法(或外层预置方法)的方式定义,示例代码如下:
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
表格属性主要用于对表格全局属性的配置。
用于设置表格的编号,如果没有特殊需要可以不设置该属性,表格构建过程中将会自动生成唯一的GUID
来处理。
注意:同一页面中的多个表格中的该属性不能重复。
参数类型
:字符串(string)
默认值
:GUID
用于设置表格的语言,目前提供三种语言:英文
、简体中文
、繁体中文
,默认为英文
。
注意:语言需要引入对应的i18n语言文件。
参数类型
:弱枚举类型,可选值:en,zh-cn,zh-tw,可扩展其他语言
默认值
:en
是否通过ajax的方式加载数据,如果设置为true
,则将通过loadURL
的地址获取数据,如果设置为false
,则基础数据由datas
属性传入。
参数类型
:布尔类型(boolean)
默认值
:true
是否一次全部加载数据。该参数仅在ajaxLoad
属性为true
时起作用,不过我们并不推荐这种方式,全部加载会影响第一次的执行效率,带来较差的用户体验,而且数据展现有可能并非是实时的。优势在于一次加载,后期的处理效率非常高。
参数类型
:布尔类型(boolean)
默认值
:false
ajax加载数据的地址,本属性只有在ajaxLoad
参数设置为true
时起作用。
注意:如果是一次全部数据加载模式(即loadAll
属性为true
),请保证loadURL
返回值为JSON数组
,如果非全部数据加载模式
,则需要返回对应的Pager对象
,Pager对象
的格式在提供的下载项目中有具体实现。
参数类型
:字符串(string)
默认值
:空字符串
表格数据,数据格式为JSON数组。该参数仅在ajaxLoad
参数设置为false
时有效。
参数类型
:JSON数组
默认值
:null
定义表格的全局样式,样式遵循标准css规范
。
参数类型
:字符串(string)
默认值
:空字符串
定义表格的全局样式表,使用自定义的class
定义样式。
参数类型
:字符串(string)
默认值
:table table-bordered table-hover table-responsive
展开、缩放按钮所在列宽度,该属性可以指定展开、缩放按钮所在列的宽度。
该参数的配置实例:extraWidth:80
、extraWidth:'80px'
、extraWidth:'20%'
参数类型
:字符串(string)或数值型(number)
默认值
:null
DLShouWen Grid提供复选功能,设置该属性为true
则将会在所有列之前添加一个复选框的列,并在列标题提供全部选择、全部取消功能。该复选框可以使用getCheckedRecords
方法来获取选中的内容。
参数类型
:布尔类型(boolean)
默认值
:false
复选框所在列宽度,该属性可以指定复选框所在列的宽度。
该参数的配置实例:checkWidth:80
、checkWidth:'80px'
、checkWidth:'20%'
参数类型
:字符串(string)或数值型(number)
默认值
:null
是否显示列标题。
参数类型
:布尔类型(boolean)
默认值
:true
表格承载容器对象的id
,设置完成后表格将显示在此容器中。
参数类型
:字符串(string)
默认值
:gridContainer
工具条承载容器对象的id
,设置完成后表格的工具条将显示在此容器中。
参数类型
:字符串(string)
默认值
:gridToolBarContainer
工具条可选内容,可选参数如下:
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
导出文件的文件名。
参数类型
:字符串(stirng)
默认值
:datas
导出文件的响应地址,该属性对ajax动态加载分页模式
无效,ajax动态分页加载模式
由于需要执行SQL拼接操作,所以是直接封装在loadURL
参数中的,具体的实现方式请参考我们提供下载的项目实现。
参数类型
:字符串(string)
默认值
:/grid/export
每页显示条数。
参数类型
:整数(integer)
默认值
:20
每页显示条数的限制。如果该参数为数组,则按照数组中的内容生成下拉框供用户选择每页显示条数,如果该参数为整数,则提供输入框供用户自行输入每页显示条数,此参数中设置的值为限制输入的最大值,如果该参数设置为其他类型,则原样显示每页显示条数,不提供用户自行更改。
参数类型
:数组(array) 或 整数(integer) 或 其他
默认值
:[20, 50, 100]
列对象定义,将上述定义列的JSON数组
对象传递到此参数中。
参数类型
:JSON数组
默认值
:null
主要针对表格各种事件的回调方法,所有方法均在option
属性中进行配置,配置的回调方法中的参数在各方法中均有详细说明。
绑定单元格单击方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、cell
、row
、extraCell
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前单元格所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前单元格所处行的jQuery对象
extraCell:当前单元格所处扩展行的jQuery对象
e:事件对象
绑定单元格双击方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、cell
、row
、extraCell
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前单元格所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前单元格所处行的jQuery对象
extraCell:当前单元格所处扩展行的jQuery对象
e:事件对象
绑定单元格鼠标移入方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、cell
、row
、extraCell
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前单元格所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前单元格所处行的jQuery对象
extraCell:当前单元格所处扩展行的jQuery对象
e:事件对象
绑定单元格鼠标移动方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、cell
、row
、extraCell
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前单元格所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前单元格所处行的jQuery对象
extraCell:当前单元格所处扩展行的jQuery对象
e:事件对象
绑定单元格鼠标移出方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、cell
、row
、extraCell
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前单元格所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前单元格所处行的jQuery对象
extraCell:当前单元格所处扩展行的jQuery对象
e:事件对象
绑定单元格鼠标摁下方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、cell
、row
、extraCell
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前单元格所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前单元格所处行的jQuery对象
extraCell:当前单元格所处扩展行的jQuery对象
e:事件对象
绑定单元格鼠标释放方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、cell
、row
、extraCell
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前单元格所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前单元格所处行的jQuery对象
extraCell:当前单元格所处扩展行的jQuery对象
e:事件对象
绑定行单击方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、Row
、row
、extraRow
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前行所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前行的jQuery对象
extraRow:当前行所处扩展行的jQuery对象
e:事件对象
绑定行双击方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、Row
、row
、extraRow
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前行所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前行的jQuery对象
extraRow:当前行所处扩展行的jQuery对象
e:事件对象
绑定行鼠标移入方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、Row
、row
、extraRow
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前行所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前行的jQuery对象
extraRow:当前行所处扩展行的jQuery对象
e:事件对象
绑定行鼠标移动方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、Row
、row
、extraRow
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前行所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前行的jQuery对象
extraRow:当前行所处扩展行的jQuery对象
e:事件对象
绑定行鼠标移出方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、Row
、row
、extraRow
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前行所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前行的jQuery对象
extraRow:当前行所处扩展行的jQuery对象
e:事件对象
绑定行鼠标摁下方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、Row
、row
、extraRow
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前行所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前行的jQuery对象
extraRow:当前行所处扩展行的jQuery对象
e:事件对象
绑定行鼠标释放方法,方法中将传递value
、record
、column
、grid
、dataNo
、columnNo
、Row
、row
、extraRow
、e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
value:当前单元格解析后的内容,如果该单元格通过resolution属性,则为解析后的resolution的Html代码
record:当前行所处行的数据对象
column:当前单元格所处列的对象
grid:表格对象
dataNo:数据编号,从0开始
columnNo:列编号,从0开始
cell:当前单元格的jQuery对象
row:当前行的jQuery对象
extraRow:当前行所处扩展行的jQuery对象
e:事件对象
绑定表头单击方法,方法中将传递title
, column
, grid
, columnNo
, header
, headerRow
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
title:当前表头标题
column:当前表头所处列的对象
grid:表格对象
columnNo:列编号,从0开始
header:当前表头的jQuery对象
headerRow:当前表头所处行的jQuery对象
e:事件对象
由于DLShouWen Grid表头包含排序功能,排序需要重新加载表头代码,所以暂时无法实现表头双击事件的绑定。
绑定表头鼠标移入方法,方法中将传递title
, column
, grid
, columnNo
, header
, headerRow
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
title:当前表头标题
column:当前表头所处列的对象
grid:表格对象
columnNo:列编号,从0开始
header:当前表头的jQuery对象
headerRow:当前表头所处行的jQuery对象
e:事件对象
绑定表头鼠标移动方法,方法中将传递title
, column
, grid
, columnNo
, header
, headerRow
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
title:当前表头标题
column:当前表头所处列的对象
grid:表格对象
columnNo:列编号,从0开始
header:当前表头的jQuery对象
headerRow:当前表头所处行的jQuery对象
e:事件对象
绑定表头鼠标移出方法,方法中将传递title
, column
, grid
, columnNo
, header
, headerRow
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
title:当前表头标题
column:当前表头所处列的对象
grid:表格对象
columnNo:列编号,从0开始
header:当前表头的jQuery对象
headerRow:当前表头所处行的jQuery对象
e:事件对象
绑定表头鼠标摁下方法,方法中将传递title
, column
, grid
, columnNo
, header
, headerRow
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
title:当前表头标题
column:当前表头所处列的对象
grid:表格对象
columnNo:列编号,从0开始
header:当前表头的jQuery对象
headerRow:当前表头所处行的jQuery对象
e:事件对象
绑定表头鼠标释放方法,方法中将传递title
, column
, grid
, columnNo
, header
, headerRow
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
title:当前表头标题
column:当前表头所处列的对象
grid:表格对象
columnNo:列编号,从0开始
header:当前表头的jQuery对象
headerRow:当前表头所处行的jQuery对象
e:事件对象
绑定表格单击方法,方法中将传递grid
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
grid:表格对象
e:事件对象
绑定表格双击方法,方法中将传递grid
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
grid:表格对象
e:事件对象
绑定表格鼠标移入方法,方法中将传递grid
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
grid:表格对象
e:事件对象
绑定表格鼠标移动方法,方法中将传递grid
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
grid:表格对象
e:事件对象
绑定表格鼠标移出方法,方法中将传递grid
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
grid:表格对象
e:事件对象
绑定表格鼠标摁下方法,方法中将传递grid
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
grid:表格对象
e:事件对象
绑定表格鼠标释放方法,方法中将传递grid
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
grid:表格对象
e:事件对象
绑定表格加载完成方法,方法中将传递grid
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
grid:表格对象
绑定展开扩展列方法,方法中将传递record
, grid
, dataNo
, row
, extraCell
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
record:当前行数据对象
grid:表格对象
dataNo:数据编号,从0开始
row:当前行的jQuery对象
extraRow:当前行所处扩展行的jQuery对象
e:事件对象
绑定关闭扩展列方法,方法中将传递record
, grid
, dataNo
, row
, extraCell
, e
参数。
参数类型
:方法(function)
默认值
:null
方法传递参数
:
record:当前行数据对象
grid:表格对象
dataNo:数据编号,从0开始
row:当前行的jQuery对象
extraRow:当前行所处扩展行的jQuery对象
e:事件对象
交互参数是前端脚本同服务器端交互的参数信息,该内容仅用于表格属性中ajaxLoad
为true
的加载数据模式(Ajax全部加载数据、Ajax分页加载数据)。
注意:交互参数并不能直接通过实例化好的DLShouWen Grid对象调用,交互参数是在同服务器端交互时实例化完成并由服务器通过Pager对象接收的,并非DLShouWen Grid对象。
注意:交互参数中标明可以修改的属性,您可以通过修改对象参数来完成参数变更。
用途
:数据是否加载成功,若查询SQL出现错误或高级查询中配置错误,则该返回值为false,正确查询则为true。
特殊说明
:该参数不建议手动修改。
用途
:用于判断前台的交互信息是否为导出的动作。
特殊说明
:该参数不建议手动修改。
用途
:用于导出文件时的文件名,该文件名由option
属性集中的exportFileName
获得。
特殊说明
:该参数不建议手动修改。
用途
:导出的文件类型,将由组件根据用户选择自行处理。
特殊说明
:该参数不建议手动修改。
用途
:是否导出全部数据,将由组件根据用户选择自行处理。
特殊说明
:该参数不建议手动修改。
用途
:导出的列集合,将由组件根据用户选择自行处理。
特殊说明
:该参数不建议手动修改。
用途
:导出的数据是否已经被处理。该属性为前后台的一个数据处理标识,经由resolution、数据格式化等操作完成处理的数据被视为已处理。
特殊说明
:该参数不建议手动修改。
用途
:导出的数据集合,将由组件根据用户选择自行生成,生成的导出数据均为处理后的数据。
特殊说明
:该参数不建议手动修改。
用途
:每页的显示的记录条数。
特殊说明
:该参数可以手动修改。
用途
:开始的记录号。
特殊说明
:该参数可以手动修改。
用途
:当前页号。
特殊说明
:该参数可以手动修改。
用途
:当前查询的纪录总数。
特殊说明
:该参数不建议手动修改。
用途
:当前查询的纪录总页数。
特殊说明
:该参数不建议手动修改。
用途
:自定义参数集合。该参数可通过Javascript手动设置,属性类型为Object对象,可以通过Javascript设置参数,设置完成后通过服务器端封装的Pager对象访问对象中的parameters属性即可获得对应参数集合,该集合对应Java服务器为Map对象。
特殊说明
:该参数可以手动修改。
用途
:快速查询的参数合集,将由组件根据用户选择自行生成。
特殊说明
:该参数不建议手动修改。
用途
:高级查询的查询参数合集,将由组件根据用户选择自行生成。
特殊说明
:该参数不建议手动修改。
用途
:高级查询的排序参数合集,将由组件根据用户选择自行生成。
特殊说明
:该参数不建议手动修改。
用途
:展示的数据结果集。
特殊说明
:该参数不建议手动修改。
对象属性可以通过实例化好的DLShouWen Grid对象
直接访问或修改。
用途
:初始化参数。
子参数
:
toolsIsInit [boolean 布尔型]:工具条是否初始化
printWindowIsInit [boolean 布尔型]:打印窗体是否初始化
exportWindowIsInit [Object<string, boolean> 对象]:导出窗体是否初始化(该参数包含多个子参数,每个子参数标识哪一个导出类型的窗体是否初始化)
fastQueryWindowIsInit [boolean 布尔型]:快速查询窗体是否初始化
advanceQueryWindowIsInit [boolean 布尔型]:高级查询窗体是否初始化
特殊说明
:该参数不建议手动修改。
用途
:页面参数对象。
子参数
:
pageSize [int 数值型]:每页显示条数
startRecord [int 数值型]:开始记录编号
nowPage [int 数值型]:当前页号
recordCount [int 数值型]:总记录条数
pageCount [int 数值型]:总页数
特殊说明
:该参数内容均为组件自动计算生成,其中pageSize
可通过程序修改。
用途
:表格参数对象。
特殊说明
:该参数内容由用户配置及默认属性整合而成,可通过程序修改。
用途
:原始数据集。
特殊说明
:该参数内容为表格的原始数据,不建议手动修改。
用途
:基础数据集,从原始数据集中经过分页参数计算得来的当前页的数据。
特殊说明
:该参数内容为表格的基础数据,不建议手动修改。
用途
:展现数据集,从基础数据集中经过处理(或服务器解析处理)后的展现数据。
特殊说明
:该参数内容为组件自动生成,不建议手动修改。
用途
:排序参数。
子参数
:
columnId [string 字符型]:排序列的名称,即配置列属性中的id
sortType [int 数值型]:排序类别 [0-不排序,1-正序,2-倒序]
特殊说明
:该参数内容为组件自动生成,不建议手动修改。
用途
:排序缓存数据集,由于排序过程将会造成显示数据重新排序,如果不做缓存将无法还原为不排序时的数据顺序,所以用此参数缓存未排序时的数据。
特殊说明
:该参数内容为组件自动处理,不建议手动修改。
用途
:自定义参数集合。该参数可通过Javascript手动设置,属性类型为Object对象,可以通过Javascript设置参数,设置完成后通过服务器端封装的Pager对象访问对象中的parameters属性即可获得对应参数集合,该集合对应Java服务器为Map对象。
特殊说明
:该参数可以手动修改。
用途
:快速查询的参数合集,将由组件根据用户选择自行生成。
特殊说明
:该参数不建议手动修改。
用途
:快速查询缓存的原生数据,用于非Ajax分页数据加载模式时的缓存数据。
特殊说明
:该参数不建议手动修改。
用途
:高级查询的参数对象。
advanceQueryConditions [array 数组]:高级查询中的查询列表
advanceQuerySorts [array 数组]:高级查询中的排序列表
特殊说明
:该参数不建议手动修改。
用途
:打印列集合。
特殊说明
:该参数不建议手动修改。
用途
:导出列集合。
特殊说明
:该参数不建议手动修改。
用途
:导出数据。
特殊说明
:该参数不建议手动修改。
对象方法可以通过实例化好的DLShouWen Grid对象
直接调用。
重新加载方法。调用此参数将刷新所有参数,在ajax动态分页加载模式
下将重新获取数据。不过我们并不推荐您使用此方法,如果需要进行刷新,请使用reload
或refresh
方法。
方法名
:load
参数
:无
返回值
:无
表格刷新方法。
方法名
:reload
参数
:
allReload:是否全部刷新,当allReload为true时,同load方法,当allReload为false时,将只做重新现有加载数据级别的刷新,并不会重新到服务器端获取数据。
返回值
:无
该方法为reload的重载方法,调用方式同上。
构建表格内容方法,内部方法,不建议调用。
方法名
:constructGrid
参数
:无
返回值
:无
构建表格分页工具条方法,内部方法,不建议调用。
方法名
:constructGridPageBar
参数
:无
返回值
:无
构建表格工具条方法,内部方法,不建议调用。
方法名
:constructGridToolBar
参数
:无
返回值
:无
显示进度条。
方法名
:showProcessBar
参数
:无
返回值
:无
隐藏进度条。
方法名
:hideProcessBar
参数
:无
返回值
:无
格式化内容,将针对format
属性和codeTable
属性进行解析,内部方法,不建议调用。
方法名
:formatContent
参数
:
column:列对象
value:需要被格式化的内容
返回值
:格式化后的内容
跳转页面。
方法名
:goPage
参数
:
page:页码,整数类型(integer)
返回值
:无
调用快速查询面板。
方法名
:fastQuery
参数
:无
返回值
:无
调用高级查询面板。
方法名
:advanceQuery
参数
:无
返回值
:无
调用打印面板。
方法名
:print
参数
:无
返回值
:无
调用导出面板。
方法名
:exportFile
参数
:
exportType:导出类型,弱枚举类型,可选类型为:excel、csv、pdf、txt
返回值
:无
获取复选内容,该方法仅对check
属性设置为true
时起作用。返回的值为JSON数组
格式的被选中的记录集。
方法名
:getCheckedRecords
参数
:无
返回值
:JSON数组格式的被选中的记录集。
静态方法为DLShouWen Grid制作过程中抽取出来的一些辅助方法,也可以公开使用,调用方式为:$.fn.dlshouwen.grid.tools.方法
。
生成GUID
方法,将会生成唯一的GUID
字符串。
方法名
:guid
参数
:无
返回值
:guid字符串
该方法已被删除。
获取Bootstrap
中的模态窗口的开始部分html代码。
方法名
:getWindowStart
参数
:
id:窗口编号,不能重复
title:窗口标题内容
返回值
:模态窗口开始部分html代码
获取Bootstrap
中的模态窗口的结束部分html代码
方法名
:getWindowEnd
参数
:
closeButtonTitle:关闭按钮字样。
buttons:按钮列表html代码,将会被放置在关闭按钮之后。
返回值
:模态窗口结束部分html代码
提示方法。
方法名
:toast
参数
:
content:提示内容
level:提示级别,弱枚举类型,可选参数为:info、warning、error、success,默认值:info
time:提示显示时间,单位为毫秒,整数类型(integer),默认值
:3000
返回值
:无
将字符串转换为JS日期对象,转换规范同format
日期格式化规范。
方法名
:toDate
参数
:
date:日期字符串
pattern:转换格式,默认值
:yyyy-MM-dd hh:mm:ss
返回值
:JS日期对象
JS日期对象格式化为字符串,转换规范同format
日期格式化规范。
方法名
:dateFormat
参数
:
value:日期对象
format:格式化规则
返回值
:格式化后的日期字符串
替换所有内容。
方法名
:replaceAll
参数
:
s:原字符串
s1:需要替换的字符
s2:替换后的字符
返回值
:经过替换后的字符串结果
判断字符串是否由某字符串开始。
方法名
:startsWith
参数
:
str:原字符串
prefix:前缀字符串
返回值
:布尔类型(boolean),如果str由prefix开始则返回true,否则返回false
判断字符串是否由某字符串结束。
方法名
:endsWith
参数
:
str:原字符串
suffix:后缀字符串
返回值
:布尔类型(boolean),如果str由suufix结束则返回true,否则返回false
忽略大小写比较字符串是否相同。
方法名
:equalsIgnoreCase
参数
:
str1:被比较的字符串
str2:被比较的字符串
返回值
:布尔类型(boolean),如果str1与str2忽略大小写相同则返回true,否则返回false
数值格式化,格式化规范同format
参数中的数值格式化规范。
方法名
:numberFormat
参数
:
number:被格式化的数值
pattern:格式化规则
返回值
:格式化后的数值
请参阅DLShouWen Grid提供的本地项目内容中的实现。
请参阅DLShouWen Grid提供的本地项目内容中的实现。
请参阅DLShouWen Grid提供的本地项目内容中的实现。
请参阅DLShouWen Grid提供的本地项目内容中的实现。