Basic
Normal Load Datas

DLShouWen Grid supports normal data loading mode, put JSON data to the attribute datas of the initialization parameter, configured attributes (like display per page number) then DLShouWen Grid will paging and loading those datas in automatically.

Code:

var gridColumns_2_1_1 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center'},
	{id:'sex', title:'Sex', type:'string', codeTable:sex, columnClass:'text-center'},
	{id:'salary', title:'Salary', type:'number', format:'#,###.00', columnClass:'text-center'}
];
var gridOption_2_1_1 = {
	lang : 'en',
	ajaxLoad : false,
	exportFileName : 'User List',
	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();
});

Demo:

Responsive

DLShouWen Grid trough the hide, hideType, extra three parameters to complete the response table of column configuration. DLShouWen Grid based on the Bootstrap implementation, for each size of the terminal media objects display different columns, you can define the terminal display for each column, for example, you can make a column display in the Pad terminal, but in the Phone terminal, this column not display in columns but display in the expansion column. The expanded use of click prefix column in the "+" button to view.

If the definition needs to adjust the terminal size, please modify the corresponding media object in Bootstrap size parameters, DLShouWen Grid through Bootstrap's visible-lg, visible-md, visible-sm, visible-xs parameters to achieve the response control table.

Code:

var gridColumns_2_1_2 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center'},
	{id:'sex', title:'Sex', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs'},
	{id:'salary', title:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs'},
	{id:'degree', title:'Degree', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs'},
	{id:'time', title:'Date Time', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs'},
	{id:'time_stamp_s', title:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs'},
	{id:'string_time', title:'Date Time String', 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 : 'en',
	ajaxLoad : false,
	exportFileName : 'User List',
	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();
});

Demo:

Fix Column WidthNew

You can trough the width parameter to fix one more columns width, if the table width less than the sum of the columns, this parameter will be invalid. You also can though the extraWidth parameter to fix the extra column's width.

Code:

var gridColumns_2_1_12 = [
	{id:'user_code', title:'User Code', width:80, type:'string', columnClass:'text-center'},
	{id:'user_name', title:'User Name', width:160, type:'string', columnClass:'text-center'},
	{id:'sex', title:'Sex', width:50, type:'string', codeTable:sex, columnClass:'text-center'},
	{id:'salary', title:'Salary', width:60, type:'number', format:'#,###.00', columnClass:'text-center'},
	{id:'degree', title:'Degree', width:140, type:'string', codeTable:degree, columnClass:'text-center'},
	{id:'time', title:'Date Time', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center'},
	{id:'time_stamp_s', title:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center', hideType:'lg|md|sm|xs'},
	{id:'string_time', title:'Date Time String', 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 : 'en',
	ajaxLoad : false,
	exportFileName : 'User List',
	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();
});

Demo:

Custom Layout

DLShouWen Grid toolbar container and table container is separate, and the need to separately control by means of gridContainer and toolbarContainer in the grid options, if you need to make the tool bar above of table, you only need to be tool bar container DOM above the table container DOM.

Code:

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

Demo:

Custom Style

DLShouWen Grid style sheet in the dlshouwen.grid.css file, you can customize it, also can through the tableStyle, tableClass, headerStyle, headerClass, columnStyle, columnClass attributes separately to custom table style.

Code:

var gridColumns_2_1_4 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center', headerStyle:'background:#00a2ca;color:white;'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center', headerStyle:'background:#00a2ca;color:white;'},
	{id:'sex', title:'Sex', type:'string', codeTable:sex, columnClass:'text-center', headerStyle:'background:#00a2ca;color:white;'},
	{id:'salary', title:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', headerStyle:'background:#00a2ca;color:white;'}
];
var gridOption_2_1_4 = {
	lang : 'en',
	ajaxLoad : false,
	exportFileName : 'User List',
	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();
});

Demo:

Sort In Page

DLShouWen Grid support sort in current page. When the data is loading completed, you can click on the header sorting current page datas, sorting only for current page datas. Sorting support date, numerical, and support switching between asc, desc, to restore the original order in three ways.

Code:

var gridColumns_2_1_5 = [
	{id:'user_code', title:'User Code (Click Here To Sort)', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'User Name (Click Here To Sort)', type:'string', columnClass:'text-center'},
	{id:'sex', title:'Sex (Click Here To Sort)', type:'string', codeTable:sex, columnClass:'text-center'},
	{id:'salary', title:'Salary (Click Here To Sort)', type:'number', format:'#,###.00', columnClass:'text-center'}
];
var gridOption_2_1_5 = {
	lang : 'en',
	ajaxLoad : false,
	exportFileName : 'User List',
	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();
});

Demo:

Code Table

DLShouWen Grid supports code table solutions, such as there's a gender field, 1 represents male, 2 represents female, if you not though code table solutions, you need relative some tables to show male or female, or write code like this return value==1?'male':'female' to complete solution, so we include attribute codeTable, pass a JSON Object to this attribute, key represent code table key, value represent code table value, code like this {1:'male', 2:'female'}, then DLShouWen Grid will display text by this JSON Object.

DLShouWen Grid in the query for code table has analytic very outstanding, in the fast query or advanced query, if this field was code table field, then we will through the select element for users to select, it's convenient and quick for the user by enumerating the ways to complete the query operation.

Note: If the contents of the cell in the code table definition JSON object does not return a value, we will output the raw data, if you need analysis of customized higher, please refer to the resolution property.

Code:

var gridColumns_2_1_6 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center'},
	{id:'sex', title:'Sex', type:'string', codeTable:sex, columnClass:'text-center', columnStyle:'background:#00a2ca;color:white;', headerStyle:'background:#00a2ca;color:white;'},
	{id:'salary', title:'Salary', type:'number', format:'#,###.00', columnClass:'text-center'}
];
var gridOption_2_1_6 = {
	lang : 'en',
	ajaxLoad : false,
	exportFileName : 'User List',
	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();
});

Demo:

Format Data

DLShouWen Grid for some special data types can be completed automatically formatted.

Numeric fields through the format property can be completed numberic format, format the script by analytical # and 0 ways, such as formatting amount, then the analytical field content is: #,###.00, formatted content like this: 12,345,678.90.

Date fields through the format property can be completed date format, the format requirements formatted script similar to SimpleDateFormat in JAVA language, complete date format is: yyyy-MM-dd hh:mm:ss.S, formatted content like this: 2014-10-20 16:41:16.188.

For a variety of date format, we provide diversity formatting ways, it can almost cover all the formatting of the date format. Formatted way through type, format, otype, oformat four parameters to complete, please refer to the reference to view how those parameters work.

Code:

var gridColumns_2_1_7 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center'},
	{id:'salary', title:'Salary', type:'number', format:'#,###.00', columnClass:'text-center'},
	{id:'time', title:'Date Time', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center'},
	{id:'time_stamp_s', title:'Timestamp(s)', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center'},
	{id:'time_stamp_ms', title:'Timestamp(ms)', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center'},
	{id:'string_date', title:'Date String', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center'},
	{id:'string_time', title:'Date Time String', 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 : 'en',
	ajaxLoad : false,
	exportFileName : 'User List',
	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();
});

Demo:

CheckboxUpdate

DLShouWen Grid supports checkbox, when the check property is true, DLShouWen Grid will display checkbox in the first column, after user choice those checkbox you can use method getCheckedRecords to get checked records, you can iterat those checked records to complete any operations. You can trough the checkWidth parameter to set the checkbox cell width.

Code:

var gridColumns_2_1_8 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center'},
	{id:'sex', title:'Sex', type:'string', codeTable:sex, columnClass:'text-center'}
];
var gridOption_2_1_8 = {
	lang : 'en',
	ajaxLoad : false,
	check : true,
	checkWidth : 40,
	exportFileName : 'User List',
	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('You selected '+recordCount+' datas.');
}
<button class="btn btn-primary btn-xs" onclick="getGrid_2_1_8CheckedRecordsLength();">
	<i class="fa fa-table"></i>  Get The Checked Datas Count
</button>

Demo:

Click This Button To Get The Checked Datas Count:

Resolution

If the above reference content is still unable to complete your need, you can by setting the resolution property to complete custom parsing of the data, the resolution attribute defines of a JS function, this function will transfer line data, cell data parameters, through these parameters you can write custom parse code in this function to make this column display content that you want.

Resolution parameter usually used to customize the display of content or generate some operating button in the current cell.

Note: Due to the custom analysis may appear HTML tag in cell content, so in the export, query may not be resolute.

Note: Numnber of Parameters and sequence in callback method are different of version 1.1.8.

Code:

var gridColumns_2_1_9 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center'},
	{id:'sex', title:'Sex', 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:'Operation', 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(\'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;
	}}
];
var gridOption_2_1_9 = {
	lang : 'en',
	ajaxLoad : false,
	exportFileName : 'User List',
	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();
});

Demo:

Internationalization

DLShouWen Grid support internationalization, we have pre English [en], Simplified Chinese [zh-cn], Traditional Chinese [zh-tw] three languages, introducing the JS file in the i18n folder to current page, then configuration the lang property in grid option to complete.

If you need a custom language, you can copy a language file to modify a new language by you need.

Code - English:

var gridColumns_2_1_10_1 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'Sex', 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:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'Degree', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'Date Time', 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:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', 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:'Date Time String', 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 : 'User List',
	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();
});

Demo - English:

Code - Simple Chinese:

var gridColumns_2_1_10_2 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'Sex', 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:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'Degree', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'Date Time', 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:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', 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:'Date Time String', 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 : 'User List',
	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();
});

Demo - Simple Chinese:

Code - Traditional Chinese:

var gridColumns_2_1_10_3 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'Sex', 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:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'Degree', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'Date Time', 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:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', 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:'Date Time String', 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 : 'User List',
	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();
});

Demo - Traditional Chinese:

Event

DLShouWen Grid supports the extension of the cell, row, header, grid, expanding line of events, you can through the grid options to customize these events, please refer to the reference for detail.

This example code will be the integration of all events, for ease of reference, we output only recently 200 monitoring records in log console. In order to facilitate the display, we removed all the MouseMove (mouse) event log, avoid log records too much.

Code:

var gridColumns_2_1_11 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'Sex', 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:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'Degree', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'Date Time', 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:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', 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:'Date Time String', 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 : 'en',
	ajaxLoad : false,
	exportFileName : 'User List',
	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>Cell event trigger. Event type: '+e.type+', trigger cell coordinates: ('+columnNo+','+dataNo+'), cell content: '+value+'. </p>';
		appendLog_2_1_11(log);
	},
	onCellDblClick : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Cell event trigger. Event type: '+e.type+', trigger cell coordinates: ('+columnNo+','+dataNo+'), cell content: '+value+'. </p>';
		appendLog_2_1_11(log);
	},
	onCellMouseOver : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Cell event trigger. Event type: '+e.type+', trigger cell coordinates: ('+columnNo+','+dataNo+'), cell content: '+value+'. </p>';
		appendLog_2_1_11(log);
	},
	onCellMouseMove : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Cell event trigger. Event type: '+e.type+', trigger cell coordinates: ('+columnNo+','+dataNo+'), cell content: '+value+'. </p>';
		//appendLog_2_1_11(log);
	},
	onCellMouseOut : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Cell event trigger. Event type: '+e.type+', trigger cell coordinates: ('+columnNo+','+dataNo+'), cell content: '+value+'. </p>';
		appendLog_2_1_11(log);
	},
	onCellMouseDown : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Cell event trigger. Event type: '+e.type+', trigger cell coordinates: ('+columnNo+','+dataNo+'), cell content: '+value+'. </p>';
		appendLog_2_1_11(log);
	},
	onCellMouseUp : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Cell event trigger. Event type: '+e.type+', trigger cell coordinates: ('+columnNo+','+dataNo+'), cell content: '+value+'. </p>';
		appendLog_2_1_11(log);
	},
	onRowClick : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Row event trigger. Event type: '+e.type+', trigger cell in row coordinates: ('+columnNo+','+dataNo+'), cell in row content: '+value+'. </p>';
		appendLog_2_1_11(log);
	},
	onRowDblClick : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Row event trigger. Event type: '+e.type+', trigger cell in row coordinates: ('+columnNo+','+dataNo+'), cell in row content: '+value+'. </p>';
		appendLog_2_1_11(log);
	},
	onRowMouseOver : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Row event trigger. Event type: '+e.type+', trigger cell in row coordinates: ('+columnNo+','+dataNo+'), cell in row content: '+value+'. </p>';
		appendLog_2_1_11(log);
	},
	onRowMouseMove : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Row event trigger. Event type: '+e.type+', trigger cell in row coordinates: ('+columnNo+','+dataNo+'), cell in row content: '+value+'. </p>';
		//appendLog_2_1_11(log);
	},
	onRowMouseOut : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Row event trigger. Event type: '+e.type+', trigger cell in row coordinates: ('+columnNo+','+dataNo+'), cell in row content: '+value+'. </p>';
		appendLog_2_1_11(log);
	},
	onRowMouseDown : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Row event trigger. Event type: '+e.type+', trigger cell in row coordinates: ('+columnNo+','+dataNo+'), cell in row content: '+value+'. </p>';
		appendLog_2_1_11(log);
	},
	onRowMouseUp : function(value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e){
		var log = '<p>Row event trigger. Event type: '+e.type+', trigger cell in row coordinates: ('+columnNo+','+dataNo+'), cell in row content: '+value+'. </p>';
		appendLog_2_1_11(log);
	},
	onHeaderClick : function(title, column, grid, columnNo, header, headerRow, e){
		var log = '<p>Table header event trigger. Event type: '+e.type+', trigger column coordinates: '+columnNo+', column title: '+title+'. </p>';
		appendLog_2_1_11(log);
	},
	onHeaderMouseOver : function(title, column, grid, columnNo, header, headerRow, e){
		var log = '<p>Table header event trigger. Event type: '+e.type+', trigger column coordinates: '+columnNo+', column title: '+title+'. </p>';
		appendLog_2_1_11(log);
	},
	onHeaderMouseMove : function(title, column, grid, columnNo, header, headerRow, e){
		var log = '<p>Table header event trigger. Event type: '+e.type+', trigger column coordinates: '+columnNo+', column title: '+title+'. </p>';
		//appendLog_2_1_11(log);
	},
	onHeaderMouseOut : function(title, column, grid, columnNo, header, headerRow, e){
		var log = '<p>Table header event trigger. Event type: '+e.type+', trigger column coordinates: '+columnNo+', column title: '+title+'. </p>';
		appendLog_2_1_11(log);
	},
	onHeaderMouseDown : function(title, column, grid, columnNo, header, headerRow, e){
		var log = '<p>Table header event trigger. Event type: '+e.type+', trigger column coordinates: '+columnNo+', column title: '+title+'. </p>';
		appendLog_2_1_11(log);
	},
	onHeaderMouseUp : function(title, column, grid, columnNo, header, headerRow, e){
		var log = '<p>Table header event trigger. Event type: '+e.type+', trigger column coordinates: '+columnNo+', column title: '+title+'. </p>';
		appendLog_2_1_11(log);
	},
	onGridClick : function(grid, e){
		var log = '<p>Grid event trigger. Event type: '+e.type+', trigger table id: '+grid.option.id+'. </p>';
		appendLog_2_1_11(log);
	},
	onGridDblClick : function(grid, e){
		var log = '<p>Grid event trigger. Event type: '+e.type+', trigger table id: '+grid.option.id+'. </p>';
		appendLog_2_1_11(log);
	},
	onGridMouseOver : function(grid, e){
		var log = '<p>Grid event trigger. Event type: '+e.type+', trigger table id: '+grid.option.id+'. </p>';
		appendLog_2_1_11(log);
	},
	onGridMouseMove : function(grid, e){
		var log = '<p>Grid event trigger. Event type: '+e.type+', trigger table id: '+grid.option.id+'. </p>';
		//appendLog_2_1_11(log);
	},
	onGridMouseOut : function(grid, e){
		var log = '<p>Grid event trigger. Event type: '+e.type+', trigger table id: '+grid.option.id+'. </p>';
		appendLog_2_1_11(log);
	},
	onGridMouseDown : function(grid, e){
		var log = '<p>Grid event trigger. Event type: '+e.type+', trigger table id: '+grid.option.id+'. </p>';
		appendLog_2_1_11(log);
	},
	onGridMouseUp : function(grid, e){
		var log = '<p>Grid event trigger. Event type: '+e.type+', trigger table id: '+grid.option.id+'. </p>';
		appendLog_2_1_11(log);
	},
	onGridComplete : function(grid){
		var log = '<p>Table load complete. Table id: '+grid.option.id+'.</p>';
		appendLog_2_1_11(log);
	},
	onExtraOpen : function(record, grid, dataNo, row, extraCell, e){
		var log = '<p>Extra row open trigger. Event type: '+e.type+', trigger row coordinates: '+dataNo+'.</p>';
		appendLog_2_1_11(log);
	},
	onExtraClose : function(record, grid, dataNo, row, extraCell, e){
		var log = '<p>Extra row close trigger. Event type: '+e.type+', trigger row coordinates: '+dataNo+'.</p>';
		appendLog_2_1_11(log);
	},
	onCheck : function(isChecked, record, grid, dataNo, row, extraCell, e){
		var log = '<p>Check event trigger. Checked: '+isChecked+', trigger row coordinates: '+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();
});
//Append Log
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);
}

Demo:

Event Log.

Advance
Ajax Load All Data

DLShouWen Grid through loadAll and loadURL parameters support load all data by ajax in server, in fact this mode and normal load datas mode was same pattern, only this pattern by ajax in http server to get datas. You can also get datas by manual then through the normal load data mode to complete loading.

Note: The HTTP service is only supported post mode, the return value must be a JSON array.

Code:

var gridColumns_2_2_1 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'Sex', 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:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'Degree', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'Date Time', 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:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', 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:'Date Time String', 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 : 'en',
	ajaxLoad : true,
	loadAll : true,
	loadURL : '/grid/demo/datas/load_all',
	exportFileName : 'User List',
	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();
});

Demo:

Ajax Load Data by Page

DLShouWen Grid supports dynamic load data, by setting the ajaxLoad and loadURL parameters to complete loading Ajax data by page dynamically, this will ease the pressure of the database.

For the Ajax load data by Page example, please download the Java project version or Php project version to see how it works.

Code:

var gridColumns_2_2_2 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'Sex', 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:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'Degree', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'Date Time', 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:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', 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:'Date Time String', 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 : 'en',
	ajaxLoad : true,
	loadURL : '/grid/demo/datas/ajax',
	exportFileName : 'User List',
	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();
});

Demo:

Custom Parameters

DLShouWen Grid supports custom parameters, by setting the parameters parameter in the Javascript script to complete custom parameters, in the server Pager object can get those parameters, parameter type in Javascript language was Javascript Object, in the Java language was Map.

Custom parameters only support Ajax load data by page mode, by splicing SQL to complete a custom query, detail code in the example please download the project version to view how it works.

Code:

<div>
	<form class="form-horizontal" action="">
		<div class="form-group">
			<label class="col-sm-4 control-label text-right">Fuzzy Search (User Code, User Name): </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>  Custom Search
				</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:'User Code', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'Sex', 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:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'Degree', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'Date Time', 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:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', 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:'Date Time String', 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 : 'en',
	ajaxLoad : true,
	loadURL : '/grid/demo/datas/ajax',
	exportFileName : 'User List',
	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();
	//Bingding Custom Search Function
	$('#custom_search_2_2_3').click(customSearch_2_2_3);
});
//Custom Search
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);
}

Demo:

Print

DLShouWen Grid supports print with columns selected(Not support IE8).

Code:

var gridColumns_2_2_4 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'Sex', 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:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'Degree', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'Date Time', 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:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', 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:'Date Time String', 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 : 'en',
	ajaxLoad : false,
	datas : datas,
	exportFileName : 'User List',
	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();
});

Demo:

Export

DLShouWen Grid supports export file, export support select columns, and it supports export CSV, EXCEL, PDF, TXT file type. The export file is realized through the server program, please refer to download page to download project version to view how it works.

Code:

var gridColumns_2_2_5 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'Sex', 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:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'Degree', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'Date Time', 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:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', 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:'Date Time String', 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 : 'en',
	ajaxLoad : false,
	datas : datas,
	exportFileName : 'User List',
	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();
});

Demo:

Fast Query

DLShouWen Grid supports fast query. For the non Ajax load data by page mode, DLShouWen Grid supports fast query filter by Javascript, for the Ajax load data by page mode, in order to ensure the efficiency of loading, we through splicing SQL in the server to complete query.

Fast query is a predefined query mode, the user will enter or select the query parameters. Fast query though fastQuery and fastQueryType attribute to complete configuration.

Fast query supports equal, not equal, like, left like, right like, great than, great than or equal, less than , less than or equal types.

Code:

var gridColumns_2_2_6 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'Sex', 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:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'Degree', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'Date Time', 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:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', 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:'Date Time String', 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 : 'en',
	ajaxLoad : false,
	datas : datas,
	exportFileName : 'User List',
	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();
});

Demo:

Advance Query

Advanced query for high customized query, advanced query supports all fields which advanceQuery attributes is true, make these fields complete complex query, and support custom sorting. This sort different of the sort in page, sort in page more like sort in current page, it's a fake sort, only whit datas in current page, and advanced query sort is sorting all datas.

For the Ajax load data by page mode, we also through splicing SQL in the server to implementation, this also by considering the query efficiency, please check the server program that we provided.

Code:

var gridColumns_2_2_7 = [
	{id:'user_code', title:'User Code', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'eq'},
	{id:'user_name', title:'User Name', type:'string', columnClass:'text-center', fastQuery:true, fastQueryType:'lk'},
	{id:'sex', title:'Sex', 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:'Salary', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs', fastQuery:true, fastQueryType:'range'},
	{id:'degree', title:'Degree', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs', fastQuery:true, fastQueryType:'eq' },
	{id:'time', title:'Date Time', 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:'Timestamp(s)', 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:'Timestamp(ms)', 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:'Date String', 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:'Date Time String', 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 : 'en',
	ajaxLoad : false,
	datas : datas,
	exportFileName : 'User List',
	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();
});

Demo:

大连首闻科技有限公司旗下产品    http://os.dlshouwen.com/grid    辽ICP备14014868号