We recommend for your including javascript files and css files as follows:
<!-- 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" />
You need include the language files in the I18N folder below the dlshouwen.grid.js file.
<script type="text/javascript" src="../../../i18n/en.js"></script>
You can instantiation the DLShouWen Grid object using the following code, DLShouWen Grid object will support some functions, please refer to this reference to know parameters or functions.
//Code Table
var sex = {1:'Male', 2:'Female'};
var degree = {1:'Elementary School', 2:'Middle School', 3:'High School', 4:'College', 5:'Bachelor', 6:'Master', 7:'Doctor', 8:'Others'};
//Simulated Data (Salary Between $6000 on $12000, Date Between 1980-01-01 00::00:00 on 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 = 'Fake User No. '+(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);
}
//Definition DLShouWen Grid
var gridColumns = [
{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(record, value){
var content = '';
if(value==1){
content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
}else{
content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
}
return content;
}},
{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 = {
ajaxLoad : false,
exportFileName : 'User List',
datas : datas,
columns : gridColumns,
pageSize : 10
};
var grid = $.fn.dlshouwen.grid.init(gridOption);
$(function(){
grid.load();
});
DLShouWen Grid through JSON array to definition columns, each column will have many properties.
Defines the id of columns, this id will matching the data field name, if this column is a custom column, this property can be any code, pay attention to each column of this property can not be repeated.
Type: string
Default: field
Column title, can fill in any code.
Type: string
Default: field
The column's width, this parameter more like max-width, when the table width less than the sum of the columns, this column still be pressed. when all columns have this parameter, it will be turn into percentage mode just like the cell parameter width.
Example: width:80\width:'80px'\width:'20%'
Type: string or number
Default: null
The column's data type, optional types are as follows:
string: Character
date: Data or time
number: Numerical
Type: Weak enumeration, optional values: string, date, number
Default: string
Content formatting attributes, this attribute only works when column's data type is date or number.
For the date type, formatted script are as follows:
y: Year
M: Month
d: Day
h: Hour
m: Minute
s: Seconds
S: Millisecond
Typical examples are as follows: yyyy-MM-dd hh:mm:ss.S, the display of the content is: 2014-10-21 09:50:33.386.
For the number type, formatted script are as follows:
#: If the data first char by 0, then does not display in the content
0: In any case will display, no data in this code site also display 0
Typical examples are as follows: #,###.00, the display of the content is: 12,345,678.90 .
Note: The format attribute is affect print and export, use the format parameter formatting content in print and export will also analyze by this format.
Type: string
Default: null
The original type of display column data, this parameter is used for formatting to judge the type of original data, at present only when the type parameter is date efficient. When the property is not configured, default that data is the date of JS objects to format. Optional types are as follows:
time_stamp_s: Second time stamp
time_stamp_ms: The millisecond time stamp
string: The string type
Type: Weak enumeration type, optional values: time_stamp_s, time_stamp_ms, string
Default: null。
With the use of the otype parameter, when the otype parameter is string, we need you to inform the date string format, the expression was same to format parameter.
Type: string
Default: null
Define the style for each cell in column, the expression was same to standard CSS.
Type: string
Default: Empty string
Define the custom style sheet for each cell in column.
Type: string
Default: Empty string
Define the style for each header, the expression was same to standard CSS.
Type: string
Default: Empty string
Define the custom style sheet for each header.
Type: string
Default: Empty string
Is completely hidden, when hide is true, this column will not displayed, and also not output DOM codes. This property is used for some columns which is primary key column, it's displayed but also can be used.
Type: boolean
Default: false
This property is used for response grid configuration, configuration which terminal for hidden or display, the property provided as follows:
xs: Hidden in the smallest screen, usually used in mobile phone terminal: less than 768 pixels
sm: Hidden in the smaller screen, usually used for pad terminal: from 768 pixels to 992 pixels
md: Hidden in the secondary screen, usually used for computer terminal: from 992 pixels to 1200 pixels
lg: Hidden in the big screen, usually used for high pixels computer terminal: greater than 1200 pixels
DLShouWen Grid supports response is based on Bootstrap, using visible-lg, visible-md, visible-sm, visible-xs four style sheet parameters to complete response analysis, if you need to adjust the various trigger terminal pixels, you can modify those four style sheet parameters in Bootstrap.
Multiple parameters using | to segmentation, such as: md|sm|xs, this column is only displayed in the large screen.
Type: string
Default: Empty string, display in all the terminal.
Whether to display the content in the extended column. The response type is based on control style sheets, so the content of the data table display and hidden content is independent, the contents of each cell is actually output in two copies, DLShouWen Grid through the procedures and configured to control this column display in normal table or display in the extra line. It will make some errors occur in some custom resolution columns, such as display a custom resolution cell is complicated check box, through the check property cannot be done this require, only through the custom resolution attribute can make it well, this leads to every check box will parse out the two check boxes, error occur when get those check boxes values by DOM, so we provide this extra attribute, when the extra property is false, the expansion will not display and output the content, it will avoid the error occur when you do somthing in this column.
Type: boolean
Default: true
This parameter for the expansion of the code table information. Many systems provide code table mechanism, through the cache (for J2EE projects this cache usually stored in the application domain) to store the code table information, it can avoid frequent access to the database, and also can planning code table information avoid confusion.
DLShouWen Grid, through this parameter to realize the code table, such as gender, 1 representation male, 2 representation female, data content is 1 or 2, put JSON object in this property, by gender for example format is: {1:'male', 2:'female'}, then it will display male or female.
Note: If the code table does not match the contents, such as the above example, the contents of the data is 3, then we will display 3.
Note: The code table analyze is works on print and export.
Type: Object
Default: null
Whether to enable fast query, if you enable fast query at some columns, click the fast query button, it will display fast query form in fast query panel.
Type: boolean
Default: false
Fast query type, the optional parameter type:
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, usually used for date or numberic
Type: Weak enumeration type, optional values: eq、ne、lk、ll、rl、gt、ge、lt、le、range
Default: Empty string
Whether to enable the advanced search, when this parameter is false in some columns, those columns can not filter or sort in advance query panel.
Type: boolean
Default: true
Whether to enable export, when the parameter is false in some columns, those columns will not be as an option for export.
Note: Export is a reserved keyword javascript, please use as much as possible in this way to define: 'export': false, is not recommended to write directly for: export:false.
Type: boolean
Default: true
Whether can execute the print, when the parameter is false, the print will not as an option to print.
Type: boolean
Default: true
The custom of analytic function. It definited by anonymous function or outer preset function, the sample code is as follows:
resolution:function(record, value){
var content = '';
if(value==1){
content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
}else{
content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
}
return content;
}
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;
}
Resolution parameter usually used to customize the display of content or generate some operating button in the current cell.
Function arguments:
value: The value of the current cell
record: The record object, you can get other columns data by this record object
column：Column Object
grid：Grid Object
dataNo：Data number, starting from 0
columnNo：Column number, starting from 0
Type: function
Default: null
Grid options used to configuration the global grid attributes.
Used to set the table ID, you can not set this property without special needs, if you not set this property, DLShouWen Grid will generate a GUID to handle.
Note: This property cannot be repeated on tables which is in the same page.
Type: string
Default: GUID
Used to set the language of DLShouWen Gird, DLShouWen Grid already provided three languages: English, Simplified Chinese, Traditional Chinese, the default is English.
Note: Language need to include the corresponding i18N language file.
Type: Weak enumeration type, optional values: en, zh-cn, zh-tw, you can extended to you own languages
Default: en
Whether loading data by Ajax, if this parameter is true, it will through the loadURL address to load data, if it's false, it will get datas by parameter datas.
Type: boolean
Default: true
Whether load all datas. This parameter only works when the ajaxLoad property is true. But we do not recommend this way, load all data by once will affect the first execution efficiency, it's a poor user experience, and data display may not be real-time. The advantage is high efficiency after first load datas.
Type: boolean
Default: false
Ajax loading url address, this attribute only works when the ajaxLoad parameter is true.
Note: If there is a full load data mode (loadAll property is true), please ensure that the loadURL responses JSON array, if it's not full loading data mode, please ensure that the loadURL responses Pager object, please download project version to see Pager object implementation.
Type: string
Default: Empty string
Grid datas, is a JSON array. This parameter only works when ajaxLoad parameter is false.
Type: The JSON array
Default: null
Global style for grid, the expression was same to standard CSS.
Type: string
Default: Empty string
Global custom style sheet for grid.
Type: string
Default: table table-bordered table-hover table-responsive
Extra column width.
Example: extraWidth:80\extraWidth:'80px'\extraWidth:'20%'
Type: string or number
Default: null
DLShouWen Grid provides the check function, set the property to true will add a checkbox column before all columns, and will provides select allcheckbox, cancel all checkbox on column head. You can use the getCheckedRecords method to get the checked records.
Type: boolean
Default: false
Checkbox column width.
Example: checkWidth:80\checkWidth:'80px'\checkWidth:'20%'
Type: string or number
Default: null
Whether the column headers are displayed.
Type: boolean
Default: true
Grid container DOM id, table will be displayed in this container.
Type: string
Default: gridContainer
Grid toolbar container DOM id, table toolbar will be displayed in this container.
Type: string
Default: gridToolBarContainer
Tools options, optional parameters are as follows:
refresh: Refresh tables
fastQuery: Show fast query panel
advanceQuery: Show advanced search panel
export: Export
excel: Export excel file
csv: Export csv file
pdf: Export pdf file
txt: Export txt file
print: Print
Multi parameter use symbol | to segmentation, the typical of a export: export[excel,csv,pdf,txt], full format reference: refresh|faseQuery|advanceQuery|export[excel,csv,pdf,txt]|print.
Type: string
Default: refresh|faseQuery|advanceQuery|export[excel,csv,pdf,txt]|print
Export file name.
Type: string
Default: datas
Export url address, this attribute is invalid for Ajax Load Data By Page Mode, Ajax Load Data By Page Mode need do some SQL splicing operation to loading export datas, so export operation is in the loadURL parameter, please download the project implementation to know how it works.
Type: string
Default: /grid/export
The number of records per page.
Type: integer
Default: 20
Limit the number of records per page. If this parameter is array, the array is in accordance with the contents of the select box for the user to choose the number of records per page, if this parameter is an integer, then provide a input element for the user to input a number of records per page, this parameter value set in for the maximum limit the input, if this parameter is set to the other type, then is displayed per page displays the number, do not provide a user to change.
Type: array or integer or others
Default: [20, 50, 100]
Column object definitions, it's definited by a column JSON array.
Type: JSON Array
Default: null
For the DLShouWen Grid callback method form various events, all of the methods are configured in the grid option attribute, the callback method in parameter configuration in each method are described in detail.
Trigger when current cell clicked, arguments: value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at current line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current row jQuery object
extraCell: The current cell are extended for the jQuery object
e: The event object
Trigger when current cell double clicked, arguments: value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at current line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current row jQuery object
extraCell: The current cell are extended for the jQuery object
e: The event object
Trigger when mouse over current cell, arguments: value, record, column transfer, grid, dataNo, columnNo, cell, row, extraCell, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at current line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current row jQuery object
extraCell: The current cell are extended for the jQuery object
e: The event object
Trigger when mouse move on current cell, arguments: value, record, column transfer, grid, dataNo, columnNo, cell, row, extraCell, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at current line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current row jQuery object
extraCell: The current cell are extended for the jQuery object
e: The event object
Trigger when mouse out current cell, arguments: value, record, column transfer, grid, dataNo, columnNo, cell, row, extraCell, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at current line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current row jQuery object
extraCell: The current cell are extended for the jQuery object
e: The event object
Trigger when mouse down on current cell, arguments: value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at current line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current row jQuery object
extraCell: The current cell are extended for the jQuery object
e: The event object
Trigger when mouse up on current cell, arguments: value, record, column, grid, dataNo, columnNo, cell, row, extraCell, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at current line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current row jQuery object
extraCell: The current cell are extended for the jQuery object
e: The event object
Trigger when current row clicked, arguments: value, record, column, grid, dataNo, columnNo, Row, row, extraRow, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at the current line line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current line of jQuery objects
extraRow: The current line extension for jQuery objects
e: The event object
Trigger when current row double clicked, arguments: value, record, column, grid, dataNo, columnNo, Row, row, extraRow, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at the current line line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current line of jQuery objects
extraRow: The current line extension for jQuery objects
e: The event object
Trigger when mouse over current row, arguments: value, record, column, grid, dataNo, columnNo, Row, row, extraRow, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at the current line line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current line of jQuery objects
extraRow: The current line extension for jQuery objects
e: The event object
Trigger when mouse move on current row, arguments: value, record, column, grid, dataNo, columnNo, Row, row, extraRow, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at the current line line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current line of jQuery objects
extraRow: The current line extension for jQuery objects
e: The event object
Trigger when mouse out current row, arguments: value, record, column, grid, dataNo, columnNo, Row, row, extraRow, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at the current line line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current line of jQuery objects
extraRow: The current line extension for jQuery objects
e: The event object
Trigger when mouse down on current row, arguments: value, record, column, grid, dataNo, columnNo, Row, row, extraRow, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at the current line line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current line of jQuery objects
extraRow: The current line extension for jQuery objects
e: The event object
Trigger when mouse up current row, arguments: value, record, column transfer, grid, dataNo, columnNo, Row, row, extraRow, e.
Type: function
Default: null
Arguments:
value: Analysised current cell value
record: The data object at the current line line
column: The column object of current cell
grid: Grid object
dataNo: Data number, starting from 0
columnNo: Column number, starting from 0
cell: The current cell jQuery object
row: The current line of jQuery objects
extraRow: The current line extension for jQuery objects
e: The event object
Trigger when current header clicked, arguments: title, column, grid, columnNo, header, headerRow, e.
Type: function
Default: null
Arguments:
title: The header title
column: The current header column object
grid: Grid object
columnNo: Column number, starting from 0
header: The current head of jQuery objects
headerRow: The current meter for jQuery objects
e: The event object
DLShouWen Grid header has contains sort function, and this sort operation need to reload header code, so unable to bind the header double-click event.
Trigger when mouse over current header, arguments: title, column, grid, columnNo, header, headerRow, e.
Type: function
Default: null
Arguments:
title: The header title
column: The current header column object
grid: Grid object
columnNo: Column number, starting from 0
header: The current head of jQuery objects
headerRow: The current meter for jQuery objects
e: The event object
Trigger when mouse move on current header, arguments: title, column, grid, columnNo, header, headerRow, e.
Type: function
Default: null
Arguments:
title: The header title
column: The current header column object
grid: Grid object
columnNo: Column number, starting from 0
header: The current head of jQuery objects
headerRow: The current meter for jQuery objects
e: The event object
Trigger when mouse out current header, arguments: title, column, grid, columnNo, header, headerRow, e.
Type: function
Default: null
Arguments:
title: The header title
column: The current header column object
grid: Grid object
columnNo: Column number, starting from 0
header: The current head of jQuery objects
headerRow: The current meter for jQuery objects
e: The event object
Trigger when mouse down current header, arguments: title, column, grid, columnNo, header, headerRow, e.
Type: function
Default: null
Arguments:
title: The header title
column: The current header column object
grid: Grid object
columnNo: Column number, starting from 0
header: The current head of jQuery objects
headerRow: The current meter for jQuery objects
e: The event object
Trigger when mouse up current header, arguments: title, column, grid, columnNo, header, headerRow, e.
Type: function
Default: null
Arguments:
title: The header title
column: The current header column object
grid: Grid object
columnNo: Column number, starting from 0
header: The current head of jQuery objects
headerRow: The current meter for jQuery objects
e: The event object
Trigger when current gird clicked, arguments: grid, e.
Type: function
Default: null
Arguments:
grid: Grid object
e: The event object
Trigger when current grid double clicked, arguments: grid, e.
Type: function
Default: null
Arguments:
grid: Grid object
e: The event object
Trigger when mouse over current grid, arguments: grid, e.
Type: function
Default: null
Arguments:
grid: Grid object
e: The event object
Trigger when mouse move on current grid, arguments: grid, e.
Type: function
Default: null
Arguments:
grid: Grid object
e: The event object
Trigger when mouse out current grid, arguments: grid, e.
Type: function
Default: null
Arguments:
grid: Grid object
e: The event object
Trigger when mouse down current grid, arguments: grid, e.
Type: function
Default: null
Arguments:
grid: Grid object
e: The event object
Trigger when mouse up current grid, arguments: grid, e.
Type: function
Default: null
Arguments:
grid: Grid object
e: The event object
Trigger when grid load complete, arguments: grid.
Type: function
Default: null
Arguments:
grid: Grid object
Trigger when extra column opened, arguments: record, grid, dataNo, row, extraCell, e.
Type: function
Default: null
Arguments:
record: The current row data object
grid: Grid object
dataNo: Data number, starting from 0
row: The current line of jQuery objects
extraRow: The current line extension for jQuery objects
e: The event object
Trigger when extra column closed, arguments: record, grid, dataNo, row, extraCell, e.
Type: function
Default: null
Arguments:
record: The current row data object
grid: Grid object
dataNo: Data number, starting from 0
row: The current line of jQuery objects
extraRow: The current line extension for jQuery objects
e: The event object
Interaction parameters are information front-end script server interaction, those parameters is only for grid which ajaxLoad option was true(Ajax Load All Data Mode, Ajax Load Data By Page Mode).
Note: Those interaction parameter do not through the instanced DLShouWen Grid object to call, interaction parameters object is complete instantiation in the server interaction, in the server through the Pager object received, it's not DLShouWen Grid object.
Note: If some interaction parameters mark it can be modified, you can though modify grid object to modify those interaction parameters.
Application: Whether the data is loaded successfully, if the query SQL has error or configure advanced query has error then return false, if the correct query then return true.
Special Instructions: The parameter does not suggest that manual modification.
Application: Used to determine the interactive information is export action or not.
Special Instructions: The parameter does not suggest that manual modification.
Application: For the export file name, the file name is got by the grid option exportFileName.
Special Instructions: The parameter does not suggest that manual modification.
Application: The exported file types, decide by user choose.
Special Instructions: The parameter does not suggest that manual modification.
Application: Whether to export all datas, decide by user choose.
Special Instructions: The parameter does not suggest that manual modification.
Application: The export columns, decide by user choose.
Special Instructions: The parameter does not suggest that manual modification.
Application: Whether export data have been processed. If export data via the resolution, data format operation has finished processing then this data is deemed to already processed.
Special Instructions: The parameter does not suggest that manual modification.
Application: The export datas, decide by user choose, export datas are processed.
Special Instructions: The parameter does not suggest that manual modification.
Application: The records displayed number per page.
Special Instructions: This parameter can be modified manually.
Application: Record start number.
Special Instructions: This parameter can be modified manually.
Application: The current page number.
Special Instructions: This parameter can be modified manually.
Application: The total number of records in the current query.
Special Instructions: The parameter does not suggest that manual modification.
Application: The total number of pages.
Special Instructions: The parameter does not suggest that manual modification.
Application: A custom parameters. This parameter can be set manually by javascript, attribute type is a JSON object, server through Pager parameters to get this JSON object, in Java we convert it to Map object.
Special Instructions: This parameter can be modified manually.
Application: Fast query parameters, decide by user choose.
Special Instructions: The parameter does not suggest that manual modification.
Application: Advance query condition parameters, decide by user choose.
Special Instructions: The parameter does not suggest that manual modification.
Application: Advance query sort parameters, decide by user choose.
Special Instructions: The parameter does not suggest that manual modification.
Application: Exhibit datas in grid.
Special Instructions: The parameter does not suggest that manual modification.
Those properties can visit or modify by instantiated DLShouWen Grid object.
Application: The initialization parameter.
Sub Parameters:
toolsIsInit [boolean]: Whether or not toobar initialized
printWindowIsInit [boolean]: Whether or not print window initialized
exportWindowIsInit [Object<string, boolean>]: Whether or not the export window initialized (this parameter contains multiple sub parameters, each sub parameter identifies a export type)
fastQueryWindowIsInit [boolean]: Whether or not the fast query window initialized
advanceQueryWindowIsInit [boolean]: Whether or not the advanced query window initialized
Special Instructions: The parameter does not suggest that manual modification.
Application: Page parameter object.
Sub Parameters:
pageSize [integer]: The records displayed number per page
startRecord [integer]: Record start number
nowPage [integer]: The current page number
recordCount [integer]: The total number of records in the current query
pageCount [integer]: The total number of pages
Special Instructions: The parameters are calculated automatically generated by DLShouWen Grid, in those parameters, pageSize is modification.
Application: Grid option object.
Special Instructions: The content of parameter is configured by user and the default property of integration, it's modification.
Application: The original data set.
Special Instructions: The content of parameter is the grid original data, it's not recommended to manually modify.
Application: The basic data set, the current page from the original data by the paging parameters.
Special Instructions: The parameters of content based on the original data, is not recommended to manually modify.
Application: The display data set, concentrated from the underlying data processed (or server analytical processing).
Special Instructions: The parameters of the content was autogeneration by DLShouWen Grid, is not recommended to manually modify.
Application: Sorting parameters.
Sub Parameters:
columnId [string]: The sort column name, namely the configuration column properties in ID
sortType [integer]: Sort types [0- don't sort, 1- positive, 2- desc]
Special Instructions: The parameters of the content was autogeneration by DLShouWen Grid, is not recommended to manually modify.
Application: Sort buffer data set, the sorting process will cause the display data reordering, if do not cache will not be reduced to not sort order of data, so use this parameter when sorting data cache.
Special Instructions: The parameters for the automatic processing of content components, is not recommended to manually modify.
Application: A custom parameter sets. This parameter can be set manually by Javascript, attribute type for the Object object, you can set the parameters through Javascript, after setting the server package through Pager parameters access object object properties can be obtained in the corresponding parameter set, the set corresponds to the Java server for the Map object.
Special Instructions: This parameter can be modified manually.
Application: Fast query parameters, decide by user choose.
Special Instructions: The parameter does not suggest that manual modification.
Application: Fast query original datas cache, this used by Non Ajax Load Data By Page Mode.
Special Instructions: The parameter does not suggest that manual modification.
Application: The advance query parameter object.
advanceQueryConditions [array]: The advance query condition array.
advanceQuerySorts [array]: The advance query sort array.
Special Instructions: The parameter does not suggest that manual modification.
Application: The column objects which will be printed.
Special Instructions: The parameter does not suggest that manual modification.
Application: The column objects which will be exported.
Special Instructions: The parameter does not suggest that manual modification.
Application: The datas which will be Exported.
Special Instructions: The parameter does not suggest that manual modification.
DLShouWen Grid functions can calls from the instantiated DLShouWen Grid object.
Load DLShouWen Grid. It will refresh all parameters, the dynamic ajax load mode will be require data from server. But we do not recommend you to use this method, if you need to refresh, please call the reload or refresh method.
Function Name: load
Attributes: Nothing
Return: Nothing
Reload DLShouWen Grid.
Function Name: reload
Attributes:
allReload: When this attribute is true then just like call method load. when this attribute is false, it will only refresh existing data, it will not visit the server to require data.
Return: Nothing
The method is overloaded of the reload method.
Construct grid body, internal method, not recommended to call.
Function Name: constructGrid
Attributes: Nothing
Return: Nothing
Construct the grid page toolbar, internal method, not recommended to call.
Function Name: constructGridPageBar
Attributes: Nothing
Return: Nothing
Construct the grid toolbar, internal method, not recommended to call.
Function Name: constructGridToolBar
Attributes: Nothing
Return: Nothing
Show the progress bar.
Function Name: showProcessBar
Attributes: Nothing
Return: Nothing
Hide the progress bar.
Function Name: hideProcessBar
Attributes: Nothing
Return: Nothing
Formats content, analyzes by format, codeTable attributes.
Function Name: formatContent
Attributes:
column: A column object
value: The content to format
Return: The formatted content
Jump to one page.
Function Name: goPage
Attributes:
page: The page number, integer
Return: Nothing
Open fast query modal for execute fast query.
Function Name: fastQuery
Attributes: Nothing
Return: Nothing
Open advance query modal for execute advance query.
Function Name: advanceQuery
Attributes: Nothing
Return: Nothing
Open print modal for execute print.
Function Name: print
Attributes: Nothing
Return: Nothing
Open export modal for execute export.
Function Name: exportFile
Attributes:
exportType: Export file type, weak enumeration, optional type: excel, csv, txt, pdf
Return: Nothing
Get checked records, the method only works when the check property is true. Return a selected record JSON Array.
Function Name: getCheckedRecords
Attributes: Nothing
Return: A selected record JSON Array.
Static methods are some auxiliary methods, those can called by: $.fn.dlshouwen.grid.tools.*.
Generate unique GUID String.
Function Name: guid
Attributes: Nothing
Return: The guid String
This method was deleted in version 1.1.9.
Output the start of Bootstrap modal HTML code.
Function Name: getWindowStart
Attributes:
id: The modal ID, can't repeat in same page
title: The modal title
Return: The start of modal HTML code
Output the end of Bootstrap modal HTML code.
Function Name: getWindowEnd
Attributes:
closeButtonTitle: The close button title.
buttons: Other buttons html code after close button.
Return: The end of modal HTML code
Toast some message like android.
Function Name: toast
Attributes:
content: Message content
level: Toast level, weak enumeration type, optional parameters: info, warning, error, success. Default: info
time: Toast duration, milliseconds, integer. Default: 3000
Return: Nothing
Formats a String as a javascript date object, format pattern is the same as format parameters.
Function Name: toDate
Attributes:
date: A date String
pattern: A pattern String. Default: yyyy-MM-dd hh:mm:ss
Return: The date as a Javascript date object
Formats the Javascript data object as a String, format pattern is the same as format parameters.
Function Name: dateFormat
Attributes:
value: The javascript date object to format
format: The way in which to format javascript date object
Return: The date as a String
Replaces a String with another String inside a larger String.
Function Name: replaceAll
Attributes:
s: Text to search and replace in
s1: The String to search for
s2: The String to replace it with
Return: The text with any replacements processed
Check if a String starts with a specified prefix.
Function Name: startsWith
Attributes:
str: The String to check
prefix: The prefix to find
Return: Boolean, if the String starts with the prefix, case sensitive
Check if a String ends with a specified suffix.
Function Name: endsWith
Attributes:
str: The String to check
suffix: The suffix to find
Return: Boolean, true if the String ends with the suffix, case sensitive
Compares two Strings, returning true if they are equal ignoring the case.
Function Name: equalsIgnoreCase
Attributes:
str1: The first String
str2: The second String
Return: Boolean, true if the Strings are equal, case insensitive
Formats a number to a String, format pattern is the same as format parameter.
Function Name: numberFormat
Attributes:
number: The number to format
pattern: A pattern String
Return: The formatted number String
Please refer to the DLShouWen Grid project implementation.
Please refer to the DLShouWen Grid project implementation.
Please refer to the DLShouWen Grid project implementation.
Please refer to the DLShouWen Grid project implementation.