界面框架初步提交
This commit is contained in:
chiguangxu
1024
src/main/webapp/static/global/scripts/app.js
Normal file
1024
src/main/webapp/static/global/scripts/app.js
Normal file
File diff suppressed because it is too large
Load Diff
1
src/main/webapp/static/global/scripts/app.min.js
vendored
Normal file
1
src/main/webapp/static/global/scripts/app.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
301
src/main/webapp/static/global/scripts/datatable.js
Normal file
301
src/main/webapp/static/global/scripts/datatable.js
Normal file
@@ -0,0 +1,301 @@
|
||||
/***
|
||||
Wrapper/Helper Class for datagrid based on jQuery Datatable Plugin
|
||||
***/
|
||||
var Datatable = function() {
|
||||
|
||||
var tableOptions; // main options
|
||||
var dataTable; // datatable object
|
||||
var table; // actual table jquery object
|
||||
var tableContainer; // actual table container object
|
||||
var tableWrapper; // actual table wrapper jquery object
|
||||
var tableInitialized = false;
|
||||
var ajaxParams = {}; // set filter mode
|
||||
var the;
|
||||
|
||||
var countSelectedRecords = function() {
|
||||
var selected = $('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked', table).size();
|
||||
var text = tableOptions.dataTable.language.metronicGroupActions;
|
||||
if (selected > 0) {
|
||||
$('.table-group-actions > span', tableWrapper).text(text.replace("_TOTAL_", selected));
|
||||
} else {
|
||||
$('.table-group-actions > span', tableWrapper).text("");
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
//main function to initiate the module
|
||||
init: function(options) {
|
||||
|
||||
if (!$().dataTable) {
|
||||
return;
|
||||
}
|
||||
|
||||
the = this;
|
||||
|
||||
// default settings
|
||||
options = $.extend(true, {
|
||||
src: "", // actual table
|
||||
filterApplyAction: "filter",
|
||||
filterCancelAction: "filter_cancel",
|
||||
resetGroupActionInputOnSuccess: true,
|
||||
loadingMessage: 'Loading...',
|
||||
dataTable: {
|
||||
"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r><'table-responsive't><'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>", // datatable layout
|
||||
"pageLength": 10, // default records per page
|
||||
"language": { // language settings
|
||||
// metronic spesific
|
||||
"metronicGroupActions": "_TOTAL_ records selected: ",
|
||||
"metronicAjaxRequestGeneralError": "Could not complete request. Please check your internet connection",
|
||||
|
||||
// data tables spesific
|
||||
"lengthMenu": "<span class='seperator'>|</span>View _MENU_ records",
|
||||
"info": "<span class='seperator'>|</span>Found total _TOTAL_ records",
|
||||
"infoEmpty": "No records found to show",
|
||||
"emptyTable": "No data available in table",
|
||||
"zeroRecords": "No matching records found",
|
||||
"paginate": {
|
||||
"previous": "Prev",
|
||||
"next": "Next",
|
||||
"last": "Last",
|
||||
"first": "First",
|
||||
"page": "Page",
|
||||
"pageOf": "of"
|
||||
}
|
||||
},
|
||||
|
||||
"orderCellsTop": true,
|
||||
"columnDefs": [{ // define columns sorting options(by default all columns are sortable extept the first checkbox column)
|
||||
'orderable': false,
|
||||
'targets': [0]
|
||||
}],
|
||||
|
||||
"pagingType": "bootstrap_extended", // pagination type(bootstrap, bootstrap_full_number or bootstrap_extended)
|
||||
"autoWidth": false, // disable fixed width and enable fluid table
|
||||
"processing": false, // enable/disable display message box on record load
|
||||
"serverSide": true, // enable/disable server side ajax loading
|
||||
|
||||
"ajax": { // define ajax settings
|
||||
"url": "", // ajax URL
|
||||
"type": "POST", // request type
|
||||
"timeout": 20000,
|
||||
"data": function(data) { // add request parameters before submit
|
||||
$.each(ajaxParams, function(key, value) {
|
||||
data[key] = value;
|
||||
});
|
||||
App.blockUI({
|
||||
message: tableOptions.loadingMessage,
|
||||
target: tableContainer,
|
||||
overlayColor: 'none',
|
||||
cenrerY: true,
|
||||
boxed: true
|
||||
});
|
||||
},
|
||||
"dataSrc": function(res) { // Manipulate the data returned from the server
|
||||
if (res.customActionMessage) {
|
||||
App.alert({
|
||||
type: (res.customActionStatus == 'OK' ? 'success' : 'danger'),
|
||||
icon: (res.customActionStatus == 'OK' ? 'check' : 'warning'),
|
||||
message: res.customActionMessage,
|
||||
container: tableWrapper,
|
||||
place: 'prepend'
|
||||
});
|
||||
}
|
||||
|
||||
if (res.customActionStatus) {
|
||||
if (tableOptions.resetGroupActionInputOnSuccess) {
|
||||
$('.table-group-action-input', tableWrapper).val("");
|
||||
}
|
||||
}
|
||||
|
||||
if ($('.group-checkable', table).size() === 1) {
|
||||
$('.group-checkable', table).attr("checked", false);
|
||||
}
|
||||
|
||||
if (tableOptions.onSuccess) {
|
||||
tableOptions.onSuccess.call(undefined, the, res);
|
||||
}
|
||||
|
||||
App.unblockUI(tableContainer);
|
||||
|
||||
return res.data;
|
||||
},
|
||||
"error": function() { // handle general connection errors
|
||||
if (tableOptions.onError) {
|
||||
tableOptions.onError.call(undefined, the);
|
||||
}
|
||||
|
||||
App.alert({
|
||||
type: 'danger',
|
||||
icon: 'warning',
|
||||
message: tableOptions.dataTable.language.metronicAjaxRequestGeneralError,
|
||||
container: tableWrapper,
|
||||
place: 'prepend'
|
||||
});
|
||||
|
||||
App.unblockUI(tableContainer);
|
||||
}
|
||||
},
|
||||
|
||||
"drawCallback": function(oSettings) { // run some code on table redraw
|
||||
if (tableInitialized === false) { // check if table has been initialized
|
||||
tableInitialized = true; // set table initialized
|
||||
table.show(); // display table
|
||||
}
|
||||
countSelectedRecords(); // reset selected records indicator
|
||||
|
||||
// callback for ajax data load
|
||||
if (tableOptions.onDataLoad) {
|
||||
tableOptions.onDataLoad.call(undefined, the);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, options);
|
||||
|
||||
tableOptions = options;
|
||||
|
||||
// create table's jquery object
|
||||
table = $(options.src);
|
||||
tableContainer = table.parents(".table-container");
|
||||
|
||||
// apply the special class that used to restyle the default datatable
|
||||
var tmp = $.fn.dataTableExt.oStdClasses;
|
||||
|
||||
$.fn.dataTableExt.oStdClasses.sWrapper = $.fn.dataTableExt.oStdClasses.sWrapper + " dataTables_extended_wrapper";
|
||||
$.fn.dataTableExt.oStdClasses.sFilterInput = "form-control input-xs input-sm input-inline";
|
||||
$.fn.dataTableExt.oStdClasses.sLengthSelect = "form-control input-xs input-sm input-inline";
|
||||
|
||||
// initialize a datatable
|
||||
dataTable = table.DataTable(options.dataTable);
|
||||
|
||||
// revert back to default
|
||||
$.fn.dataTableExt.oStdClasses.sWrapper = tmp.sWrapper;
|
||||
$.fn.dataTableExt.oStdClasses.sFilterInput = tmp.sFilterInput;
|
||||
$.fn.dataTableExt.oStdClasses.sLengthSelect = tmp.sLengthSelect;
|
||||
|
||||
// get table wrapper
|
||||
tableWrapper = table.parents('.dataTables_wrapper');
|
||||
|
||||
// build table group actions panel
|
||||
if ($('.table-actions-wrapper', tableContainer).size() === 1) {
|
||||
$('.table-group-actions', tableWrapper).html($('.table-actions-wrapper', tableContainer).html()); // place the panel inside the wrapper
|
||||
$('.table-actions-wrapper', tableContainer).remove(); // remove the template container
|
||||
}
|
||||
// handle group checkboxes check/uncheck
|
||||
$('.group-checkable', table).change(function() {
|
||||
var set = table.find('tbody > tr > td:nth-child(1) input[type="checkbox"]');
|
||||
var checked = $(this).prop("checked");
|
||||
$(set).each(function() {
|
||||
$(this).prop("checked", checked);
|
||||
});
|
||||
countSelectedRecords();
|
||||
});
|
||||
|
||||
// handle row's checkbox click
|
||||
table.on('change', 'tbody > tr > td:nth-child(1) input[type="checkbox"]', function() {
|
||||
countSelectedRecords();
|
||||
});
|
||||
|
||||
// handle filter submit button click
|
||||
table.on('click', '.filter-submit', function(e) {
|
||||
e.preventDefault();
|
||||
the.submitFilter();
|
||||
});
|
||||
|
||||
// handle filter cancel button click
|
||||
table.on('click', '.filter-cancel', function(e) {
|
||||
e.preventDefault();
|
||||
the.resetFilter();
|
||||
});
|
||||
},
|
||||
|
||||
submitFilter: function() {
|
||||
the.setAjaxParam("action", tableOptions.filterApplyAction);
|
||||
|
||||
// get all typeable inputs
|
||||
$('textarea.form-filter, select.form-filter, input.form-filter:not([type="radio"],[type="checkbox"])', table).each(function() {
|
||||
the.setAjaxParam($(this).attr("name"), $(this).val());
|
||||
});
|
||||
|
||||
// get all checkboxes
|
||||
$('input.form-filter[type="checkbox"]:checked', table).each(function() {
|
||||
the.addAjaxParam($(this).attr("name"), $(this).val());
|
||||
});
|
||||
|
||||
// get all radio buttons
|
||||
$('input.form-filter[type="radio"]:checked', table).each(function() {
|
||||
the.setAjaxParam($(this).attr("name"), $(this).val());
|
||||
});
|
||||
|
||||
dataTable.ajax.reload();
|
||||
},
|
||||
|
||||
resetFilter: function() {
|
||||
$('textarea.form-filter, select.form-filter, input.form-filter', table).each(function() {
|
||||
$(this).val("");
|
||||
});
|
||||
$('input.form-filter[type="checkbox"]', table).each(function() {
|
||||
$(this).attr("checked", false);
|
||||
});
|
||||
the.clearAjaxParams();
|
||||
the.addAjaxParam("action", tableOptions.filterCancelAction);
|
||||
dataTable.ajax.reload();
|
||||
},
|
||||
|
||||
getSelectedRowsCount: function() {
|
||||
return $('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked', table).size();
|
||||
},
|
||||
|
||||
getSelectedRows: function() {
|
||||
var rows = [];
|
||||
$('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked', table).each(function() {
|
||||
rows.push($(this).val());
|
||||
});
|
||||
|
||||
return rows;
|
||||
},
|
||||
|
||||
setAjaxParam: function(name, value) {
|
||||
ajaxParams[name] = value;
|
||||
},
|
||||
|
||||
addAjaxParam: function(name, value) {
|
||||
if (!ajaxParams[name]) {
|
||||
ajaxParams[name] = [];
|
||||
}
|
||||
|
||||
skip = false;
|
||||
for (var i = 0; i < (ajaxParams[name]).length; i++) { // check for duplicates
|
||||
if (ajaxParams[name][i] === value) {
|
||||
skip = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (skip === false) {
|
||||
ajaxParams[name].push(value);
|
||||
}
|
||||
},
|
||||
|
||||
clearAjaxParams: function(name, value) {
|
||||
ajaxParams = {};
|
||||
},
|
||||
|
||||
getDataTable: function() {
|
||||
return dataTable;
|
||||
},
|
||||
|
||||
getTableWrapper: function() {
|
||||
return tableWrapper;
|
||||
},
|
||||
|
||||
gettableContainer: function() {
|
||||
return tableContainer;
|
||||
},
|
||||
|
||||
getTable: function() {
|
||||
return table;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
1
src/main/webapp/static/global/scripts/datatable.min.js
vendored
Normal file
1
src/main/webapp/static/global/scripts/datatable.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
var Datatable=function(){var e,t,a,n,r,o,c=!1,i={},s=function(){var t=$('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked',a).size(),n=e.dataTable.language.metronicGroupActions;t>0?$(".table-group-actions > span",r).text(n.replace("_TOTAL_",t)):$(".table-group-actions > span",r).text("")};return{init:function(l){if($().dataTable){o=this,l=$.extend(!0,{src:"",filterApplyAction:"filter",filterCancelAction:"filter_cancel",resetGroupActionInputOnSuccess:!0,loadingMessage:"Loading...",dataTable:{dom:"<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r><'table-responsive't><'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",pageLength:10,language:{metronicGroupActions:"_TOTAL_ records selected: ",metronicAjaxRequestGeneralError:"Could not complete request. Please check your internet connection",lengthMenu:"<span class='seperator'>|</span>View _MENU_ records",info:"<span class='seperator'>|</span>Found total _TOTAL_ records",infoEmpty:"No records found to show",emptyTable:"No data available in table",zeroRecords:"No matching records found",paginate:{previous:"Prev",next:"Next",last:"Last",first:"First",page:"Page",pageOf:"of"}},orderCellsTop:!0,columnDefs:[{orderable:!1,targets:[0]}],pagingType:"bootstrap_extended",autoWidth:!1,processing:!1,serverSide:!0,ajax:{url:"",type:"POST",timeout:2e4,data:function(t){$.each(i,function(e,a){t[e]=a}),App.blockUI({message:e.loadingMessage,target:n,overlayColor:"none",cenrerY:!0,boxed:!0})},dataSrc:function(t){return t.customActionMessage&&App.alert({type:"OK"==t.customActionStatus?"success":"danger",icon:"OK"==t.customActionStatus?"check":"warning",message:t.customActionMessage,container:r,place:"prepend"}),t.customActionStatus&&e.resetGroupActionInputOnSuccess&&$(".table-group-action-input",r).val(""),1===$(".group-checkable",a).size()&&$(".group-checkable",a).attr("checked",!1),e.onSuccess&&e.onSuccess.call(void 0,o,t),App.unblockUI(n),t.data},error:function(){e.onError&&e.onError.call(void 0,o),App.alert({type:"danger",icon:"warning",message:e.dataTable.language.metronicAjaxRequestGeneralError,container:r,place:"prepend"}),App.unblockUI(n)}},drawCallback:function(t){c===!1&&(c=!0,a.show()),s(),e.onDataLoad&&e.onDataLoad.call(void 0,o)}}},l),e=l,a=$(l.src),n=a.parents(".table-container");var p=$.fn.dataTableExt.oStdClasses;$.fn.dataTableExt.oStdClasses.sWrapper=$.fn.dataTableExt.oStdClasses.sWrapper+" dataTables_extended_wrapper",$.fn.dataTableExt.oStdClasses.sFilterInput="form-control input-xs input-sm input-inline",$.fn.dataTableExt.oStdClasses.sLengthSelect="form-control input-xs input-sm input-inline",t=a.DataTable(l.dataTable),$.fn.dataTableExt.oStdClasses.sWrapper=p.sWrapper,$.fn.dataTableExt.oStdClasses.sFilterInput=p.sFilterInput,$.fn.dataTableExt.oStdClasses.sLengthSelect=p.sLengthSelect,r=a.parents(".dataTables_wrapper"),1===$(".table-actions-wrapper",n).size()&&($(".table-group-actions",r).html($(".table-actions-wrapper",n).html()),$(".table-actions-wrapper",n).remove()),$(".group-checkable",a).change(function(){var e=a.find('tbody > tr > td:nth-child(1) input[type="checkbox"]'),t=$(this).prop("checked");$(e).each(function(){$(this).prop("checked",t)}),s()}),a.on("change",'tbody > tr > td:nth-child(1) input[type="checkbox"]',function(){s()}),a.on("click",".filter-submit",function(e){e.preventDefault(),o.submitFilter()}),a.on("click",".filter-cancel",function(e){e.preventDefault(),o.resetFilter()})}},submitFilter:function(){o.setAjaxParam("action",e.filterApplyAction),$('textarea.form-filter, select.form-filter, input.form-filter:not([type="radio"],[type="checkbox"])',a).each(function(){o.setAjaxParam($(this).attr("name"),$(this).val())}),$('input.form-filter[type="checkbox"]:checked',a).each(function(){o.addAjaxParam($(this).attr("name"),$(this).val())}),$('input.form-filter[type="radio"]:checked',a).each(function(){o.setAjaxParam($(this).attr("name"),$(this).val())}),t.ajax.reload()},resetFilter:function(){$("textarea.form-filter, select.form-filter, input.form-filter",a).each(function(){$(this).val("")}),$('input.form-filter[type="checkbox"]',a).each(function(){$(this).attr("checked",!1)}),o.clearAjaxParams(),o.addAjaxParam("action",e.filterCancelAction),t.ajax.reload()},getSelectedRowsCount:function(){return $('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked',a).size()},getSelectedRows:function(){var e=[];return $('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked',a).each(function(){e.push($(this).val())}),e},setAjaxParam:function(e,t){i[e]=t},addAjaxParam:function(e,t){i[e]||(i[e]=[]),skip=!1;for(var a=0;a<i[e].length;a++)i[e][a]===t&&(skip=!0);skip===!1&&i[e].push(t)},clearAjaxParams:function(e,t){i={}},getDataTable:function(){return t},getTableWrapper:function(){return r},gettableContainer:function(){return n},getTable:function(){return a}}};
|
||||
Reference in New Issue
Block a user