DT GRID支持普通数据加载模式
,将JSON格式数据
传入到初始化参数中的datas
属性中,配置好相应属性(如每页显示条数等)后DT GRID将自动对这些数据进行静态分页和加载。
关键代码
:
var dtGridColumns_2_1_1 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center'}, {id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center'} ]; var dtGridOption_2_1_1 = { ajaxLoad : false, exportFileName : '用户列表', datas : datas, columns : dtGridColumns_2_1_1, gridContainer : 'dtGridContainer_2_1_1', toolbarContainer : 'dtGridToolBarContainer_2_1_1', tools : '', pageSize : 10 }; var grid_2_1_1 = $.fn.DtGrid.init(dtGridOption_2_1_1); $(function(){ grid_2_1_1.load(); });
演示
:
DT GRID通过使用hide
、hideType
、extra
来完成响应式表格的列配置。DT GRID的响应式支持是完全基于Bootstrap
实现的,对于每一个尺寸的终端媒体对象显示不同的列内容,我们对于每一列可以进行终端显示的定义,如可以使某一列在Pad终端中显示,在Phone终端中不显示而是在扩展中显示,扩展的模式采用单击前缀列中的+按钮来完成查阅。
对于需要调整终端尺寸的特殊需要,请对应修改Bootstrap
中的相应媒体对象参数,DT GRID主要通过visible-lg
、visible-md
、visible-sm
、visible-xs
来实现响应式表格的控制,对应修改Bootstrap
中的这些样式即可。
关键代码
:
var dtGridColumns_2_1_2 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs'}, {id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs'}, {id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs'}, {id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs'}, {id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs'}, {id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center', hideType:'lg|md|sm|xs'}, {id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs'}, {id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs'} ]; var dtGridOption_2_1_2 = { ajaxLoad : false, exportFileName : '用户列表', datas : datas, columns : dtGridColumns_2_1_2, gridContainer : 'dtGridContainer_2_1_2', toolbarContainer : 'dtGridToolBarContainer_2_1_2', tools : '', pageSize : 10 }; var grid_2_1_2 = $.fn.DtGrid.init(dtGridOption_2_1_2); $(function(){ grid_2_1_2.load(); });
演示
:
DT GRID的工具条容器和表样展示容器是独立分开的,并需要在参数中通过gridContainer
及toolbarContainer
分别控制,如果您需要让工具条在表格的上方,那么只需要将工具条的html承载容器在表格的html承载容器上方即可。
关键代码
:
<div id="dtGridToolBarContainer_2_1_3" class="dt-grid-toolbar-container"></div> <div id="dtGridContainer_2_1_3" class="dt-grid-container"></div>
演示
:
DT GRID的样式表内容在jquery.dtGrid.css
文件中,您可以对其进行定制,也可以通过tableStyle
、tableClass
、headerStyle
、headerClass
、columnStyle
、columnClass
属性对表格进行单独样式的定制。
关键代码
:
var dtGridColumns_2_1_4 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', headerStyle:'background:#00a2ca;color:white;'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', headerStyle:'background:#00a2ca;color:white;'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', headerStyle:'background:#00a2ca;color:white;'}, {id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', headerStyle:'background:#00a2ca;color:white;'} ]; var dtGridOption_2_1_4 = { ajaxLoad : false, exportFileName : '用户列表', datas : datas, columns : dtGridColumns_2_1_4, gridContainer : 'dtGridContainer_2_1_4', toolbarContainer : 'dtGridToolBarContainer_2_1_4', tools : '', pageSize : 10 }; var grid_2_1_4 = $.fn.DtGrid.init(dtGridOption_2_1_4); $(function(){ grid_2_1_4.load(); });
演示
:
DT GRID支持页内数据排序。当数据加载完成后,您可以点击表头来实现排序,排序仅针对当前页面中的数据进行排序。排序支持日期、数值的排序,并支持正序、倒序、还原原顺序三种方式相互切换。
关键代码
:
var dtGridColumns_2_1_5 = [ {id:'user_code', title:'用户编号(点我排序)', type:'string', columnClass:'text-center'}, {id:'user_name', title:'用户名称(点我排序)', type:'string', columnClass:'text-center'}, {id:'sex', title:'性别(点我排序)', type:'string', codeTable:sex, columnClass:'text-center'}, {id:'salary', title:'薪水(点我排序)', type:'number', format:'#,###.00', columnClass:'text-center'} ]; var dtGridOption_2_1_5 = { ajaxLoad : false, exportFileName : '用户列表', datas : datas, columns : dtGridColumns_2_1_5, gridContainer : 'dtGridContainer_2_1_5', toolbarContainer : 'dtGridToolBarContainer_2_1_5', tools : '', pageSize : 10 }; var grid_2_1_5 = $.fn.DtGrid.init(dtGridOption_2_1_5); $(function(){ grid_2_1_5.load(); });
演示
:
对于嵌入到有码表机制的业务系统DT GRID也有较为便捷的解决方案,比如性别字段,1表示男,2表示女,在后台拼接数据的方式需要通过表关联的方式实现,如果此种类型字段过多会造成开发效率低下,所以我们引入codeTable
参数,在codeTable
参数中传入一个JSON对象
,指明对应的key
和value
属性,我们将根据这个对象来决定需要显示的值。
DT GRID在查询中对于码表有非常优秀的解析,在快速查询、高级查询中,如果查询码表字段,我们将通过下拉框的方式供用户选择,便于用户通过枚举的方式来完成操作,方便快捷。
注意:如果单元格内容在码表的定义对象中并没有返回值,我们会将数据原样输出,如果您有定制化更高的解析需要,请参照resolution
属性。
关键代码
:
var dtGridColumns_2_1_6 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', columnStyle:'background:#00a2ca;color:white;', headerStyle:'background:#00a2ca;color:white;'}, {id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center'} ]; var dtGridOption_2_1_6 = { ajaxLoad : false, exportFileName : '用户列表', datas : datas, columns : dtGridColumns_2_1_6, gridContainer : 'dtGridContainer_2_1_6', toolbarContainer : 'dtGridToolBarContainer_2_1_6', tools : '', pageSize : 10 }; var grid_2_1_6 = $.fn.DtGrid.init(dtGridOption_2_1_6); $(function(){ grid_2_1_6.load(); });
演示
:
DT GRID针对某些特殊类型的数据可以完成自动格式化。
数值型字段通过format
属性可以完成对数值的格式化,格式化脚本采用#
和0
的方式解析,如格式化金额,那么解析字段的内容即为:#,###.00
,格式化后的内容为:12,345,678.90
。
日期型字段通过format
属性可以完成对日期的格式化,格式化脚本类似JAVA
中的SimpleDateFormat
中要求的格式,格式化完整日期为:yyyy-MM-dd hh:mm:ss.S
,格式化后的内容为:2014-10-20 16:41:16.188
。
针对多种多样的日期格式,我们提供了丰富多样的格式化体系,几乎可以涵盖所有日期格式的格式化。格式化的方式通过type
、format
、otype
、oformat
四个参数完成,详细使用方式请查阅参考文档。
关键代码
:
var dtGridColumns_2_1_7 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'}, {id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center'}, {id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center'}, {id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center'}, {id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center'}, {id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center'}, {id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center'} ]; var dtGridOption_2_1_7 = { ajaxLoad : false, exportFileName : '用户列表', datas : datas, columns : dtGridColumns_2_1_7, gridContainer : 'dtGridContainer_2_1_7', toolbarContainer : 'dtGridToolBarContainer_2_1_7', tools : '', pageSize : 10 }; var grid_2_1_7 = $.fn.DtGrid.init(dtGridOption_2_1_7); $(function(){ grid_2_1_7.load(); });
演示
:
DT GRID支持原生复选框,当check
属性为true
时,DT GRID将会在首列显示复选框,用户选择完成之后您可以使用getCheckedRecords
方法获取用户所选择的数据行列表,您可以遍历该列表完成您需要的操作。
关键代码
:
var dtGridColumns_2_1_8 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center'} ]; var dtGridOption_2_1_8 = { ajaxLoad : false, check : true, exportFileName : '用户列表', datas : datas, columns : dtGridColumns_2_1_8, gridContainer : 'dtGridContainer_2_1_8', toolbarContainer : 'dtGridToolBarContainer_2_1_8', tools : '', pageSize : 10 }; var grid_2_1_8 = $.fn.DtGrid.init(dtGridOption_2_1_8); $(function(){ grid_2_1_8.load(); }); function getGrid_2_1_8CheckedRecordsLength(){ var recordCount = grid_2_1_8.getCheckedRecords().length; alert('您一共选择了 '+recordCount+' 条。'); }
<button class="btn btn-primary btn-xs" onclick="getGrid_2_1_8CheckedRecordsLength();"> <i class="fa fa-table"></i> 获取选中的数据条数 </button>
演示
:
点击获取选中的条数:
如果以上内容仍然无法完成您对于您数据的处理,那么您可以通过设置resolution
属性来完成对数据的自定义解析,resolution
属性定义一个JS方法
,该方法中将会传递行数据、单元格数据,通过这些参数您可以完成对该数据的自定义解析。
注意:由于自定义解析可能会出现HTML标签内容,所以在导出、查询中将不会被解析。
关键代码
:
var dtGridColumns_2_1_9 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', resolution:function(record, value){ var content = ''; if(value==1){ content += 'Male'; }else{ content += 'Female'; } return content; }} ]; var dtGridOption_2_1_9 = { ajaxLoad : false, exportFileName : '用户列表', datas : datas, columns : dtGridColumns_2_1_9, gridContainer : 'dtGridContainer_2_1_9', toolbarContainer : 'dtGridToolBarContainer_2_1_9', tools : '', pageSize : 10 }; var grid_2_1_9 = $.fn.DtGrid.init(dtGridOption_2_1_9); $(function(){ grid_2_1_9.load(); });
演示
:
DT GRID原生支持国际化,我们已经预置了简体中文
、繁体中文
、英文
三个语言版本,您只需要在引入JS文件时引入i18n文件夹
中的对应语言文件即可。
对于需要定制的语言,您可以自己复制一份并修改语言文件内容。
由于国际化演示需要在文件中引入对应的语言文件,所以我们的示例是在新页面中完成的,您可以点击下面的链接查看示例:
DT GIRD目前支持对行单击和行双击事件进行扩展,您可以通过onRowClick
及onRowDblClick
来定制它们。
关键代码
:
var dtGridColumns_2_1_11 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center'}, {id:'salary', title:'薪水', type:'number', columnClass:'text-center', format:'#,###.00'} ]; var dtGridOption_2_1_11 = { ajaxLoad : false, exportFileName : '用户列表', datas : datas, columns : dtGridColumns_2_1_11, gridContainer : 'dtGridContainer_2_1_11', toolbarContainer : 'dtGridToolBarContainer_2_1_11', tools : '', pageSize : 10, onRowClick : function(record){ var log = '您<code>单击</code>了用户名为 [ '+record.user_name+' ] 所在的行,详细数据为:<br /><br />'; for(var i=0; i<grid_2_1_11.option.columns.length; i++){ var column = grid_2_1_11.option.columns[i]; log += column.title + ':' + grid_2_1_11.formatContent(column, record[column.id]) + '<br />'; } $('#log_2_1_11').html(log); }, onRowDblClick : function(record){ var log = '您<code>双击</code>了用户名为 [ '+record.user_name+' ] 所在的行,详细数据为:<br /><br />'; for(var i=0; i<grid_2_1_11.option.columns.length; i++){ var column = grid_2_1_11.option.columns[i]; log += column.title + ':' + grid_2_1_11.formatContent(column, record[column.id]) + '<br />'; } $('#log_2_1_11').html(log); } }; var grid_2_1_11 = $.fn.DtGrid.init(dtGridOption_2_1_11); $(function(){ grid_2_1_11.load(); });
演示
:
DT GRID通过loadAll
及loadURL
参数支持将数据全部查询后完成加载,这其实同普通数据加载是同一个模式,只不过您定义取数的http服务(即loadURL参数)
,我们通过ajax
取得所有数据。您也可以自行获取数据后通过普通数据加载模式
完成数据初始化。
注意:http服务只支持Post模式,返回值必须是一套符合JSON数组的文本。
关键代码
:
var dtGridColumns_2_2_1 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'eq', resolution:function(record, value){ var content = ''; if(value==1){ content += 'Male'; }else{ content += 'Female'; } return content; }}, {id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'}, {id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' }, {id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_ms S', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' } ]; var dtGridOption_2_2_1 = { ajaxLoad : true, loadAll : true, loadURL : '../../app/loadAll.php', exportFileName : '用户列表', columns : dtGridColumns_2_2_1, gridContainer : 'dtGridContainer_2_2_1', toolbarContainer : 'dtGridToolBarContainer_2_2_1', tools : '', pageSize : 10 }; var grid_2_2_1 = $.fn.DtGrid.init(dtGridOption_2_2_1); $(function(){ grid_2_2_1.load(); });
演示
:
DT GRID支持动态加载数据,通过设置ajaxLoad
及loadURL
参数来完成动态的Ajax数据加载
分页,这样将会极大缓解数据库压力。
对于Ajax分页加载
的示例请您下载我们为您提供的项目,查阅项目中服务器端源码的编写方式。
关键代码
:
var dtGridColumns_2_2_2 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'eq', resolution:function(record, value){ var content = ''; if(value==1){ content += 'Male'; }else{ content += 'Female'; } return content; }}, {id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'}, {id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' }, {id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_ms S', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' } ]; var dtGridOption_2_2_2 = { ajaxLoad : true, loadURL : '../../app/ajaxDatas.php', exportFileName : '用户列表', columns : dtGridColumns_2_2_2, gridContainer : 'dtGridContainer_2_2_2', toolbarContainer : 'dtGridToolBarContainer_2_2_2', tools : '', pageSize : 10 }; var grid_2_2_2 = $.fn.DtGrid.init(dtGridOption_2_2_2); $(function(){ grid_2_2_2.load(); });
演示
:
DT GRID支持选择列打印,但由于IE8本身对于打印接口支持的不完善,暂时对于IE8浏览器无法执行打印操作。
关键代码
:
var dtGridColumns_2_2_3 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'eq', resolution:function(record, value){ var content = ''; if(value==1){ content += 'Male'; }else{ content += 'Female'; } return content; }}, {id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'}, {id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' }, {id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' } ]; var dtGridOption_2_2_3 = { ajaxLoad : false, datas : datas, exportFileName : '用户列表', columns : dtGridColumns_2_2_3, gridContainer : 'dtGridContainer_2_2_3', toolbarContainer : 'dtGridToolBarContainer_2_2_3', tools : 'print', pageSize : 10 }; var grid_2_2_3 = $.fn.DtGrid.init(dtGridOption_2_2_3); $(function(){ grid_2_2_3.load(); });
演示
:
DT GRID支持导出文件,导出的文件格式支持选择导出列,并支持导出EXCEL
、CSV
、PDF
、TXT
等文件格式。导出文件是通过服务器程序实现的,具体的实现内容请您查阅我们为您提供的项目中的源码。
关键代码
:
var dtGridColumns_2_2_4 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'eq', resolution:function(record, value){ var content = ''; if(value==1){ content += 'Male'; }else{ content += 'Female'; } return content; }}, {id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'}, {id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' }, {id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' } ]; var dtGridOption_2_2_4 = { ajaxLoad : false, datas : datas, exportFileName : '用户列表', columns : dtGridColumns_2_2_4, gridContainer : 'dtGridContainer_2_2_4', toolbarContainer : 'dtGridToolBarContainer_2_2_4', tools : 'export[excel,csv,pdf,txt]', pageSize : 10 }; var grid_2_2_4 = $.fn.DtGrid.init(dtGridOption_2_2_4); $(function(){ grid_2_2_4.load(); });
演示
:
DT GRID原生支持快速查询。对于非Ajax分页加载数据模式
的表格,我们原生JS即支持快速查询过滤,对于Ajax分页加载数据模式
的表格,为了实现更高的查询效率,我们是通过服务器拼接查询SQL的方式完成的。
快速查询为一套预定义的查询模式,用户将直观的输入或选择查询的内容。快速查询通过DT GRID中的fastQuery
及fastQueryType
属性定义。
快速查询支持等于
、不等于
、模糊匹配
、左侧模糊匹配
、右侧模糊匹配
、大于
、大于等于
、小于
、小于等于
等快速查询类型。
关键代码
:
var dtGridColumns_2_2_5 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'eq', resolution:function(record, value){ var content = ''; if(value==1){ content += 'Male'; }else{ content += 'Female'; } return content; }}, {id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'}, {id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' }, {id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' } ]; var dtGridOption_2_2_5 = { ajaxLoad : false, datas : datas, exportFileName : '用户列表', columns : dtGridColumns_2_2_5, gridContainer : 'dtGridContainer_2_2_5', toolbarContainer : 'dtGridToolBarContainer_2_2_5', tools : 'faseQuery', pageSize : 10 }; var grid_2_2_5 = $.fn.DtGrid.init(dtGridOption_2_2_5); $(function(){ grid_2_2_5.load(); });
演示
:
高级查询为高定制化的查询而生,高级查询支持选择所有advanceQuery
属性为true
的字段,针对这些字段完成非常复杂的过滤条件,并支持自定义的排序功能。该排序同基础功能中的排序不同,基础功能的排序只对本页数据进行排序,而高级查询中的数据是所有数据排序后分页显示。
对于Ajax分页加载数据模式,我们也是通过服务器端拼接SQL的方式完成实现的,这样做也是出于查询效率的考虑,具体实现方式请您查阅我们提供的服务器端程序。
关键代码
:
var dtGridColumns_2_2_6 = [ {id:'user_code', title:'用户编号', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'}, {id:'user_name', title:'用户名称', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'}, {id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'eq', resolution:function(record, value){ var content = ''; if(value==1){ content += 'Male'; }else{ content += 'Female'; } return content; }}, {id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'}, {id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' }, {id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' }, {id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'lg|md|sm|xs', fastQuery:true, fastQueryType:'range' } ]; var dtGridOption_2_2_6 = { ajaxLoad : false, datas : datas, exportFileName : '用户列表', columns : dtGridColumns_2_2_6, gridContainer : 'dtGridContainer_2_2_6', toolbarContainer : 'dtGridToolBarContainer_2_2_6', tools : 'advanceQuery', pageSize : 10 }; var grid_2_2_6 = $.fn.DtGrid.init(dtGridOption_2_2_6); $(function(){ grid_2_2_6.load(); });
演示
: