|
|
@@ -0,0 +1,378 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>Title</title>
|
|
|
+ <link rel="stylesheet" href="../static/assets/css/bootstrap.min.css" />
|
|
|
+ <!-- page specific plugin styles -->
|
|
|
+ <link rel="stylesheet" href="../static/assets/css/jquery-ui.min.css" />
|
|
|
+ <link rel="stylesheet" href="../static/assets/css/bootstrap-datepicker3.min.css" />
|
|
|
+ <link rel="stylesheet" href="../static/assets/css/ui.jqgrid.min.css" />
|
|
|
+
|
|
|
+
|
|
|
+ <link rel="stylesheet" href="../static/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
|
|
|
+
|
|
|
+ <link rel="stylesheet" href="../static/assets/css/ace-skins.min.css" />
|
|
|
+ <link rel="stylesheet" href="../static/assets/css/ace-rtl.min.css" />
|
|
|
+ <link rel="stylesheet" href="../static/assets/css/fonts.googleapis.com.css" />
|
|
|
+ <link rel="stylesheet" href="../static/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<table id="grid-table"></table>
|
|
|
+
|
|
|
+<div id="grid-pager"></div>
|
|
|
+
|
|
|
+
|
|
|
+<script src="../static/assets/js/jquery-2.1.4.min.js"></script>
|
|
|
+<script src="../static/assets/js/jquery.jqGrid.min.js"></script>
|
|
|
+<script src="../static/assets/js/grid.locale-cn.js"></script>
|
|
|
+<script src="../static/javascript/java110_req_data.js"></script>
|
|
|
+
|
|
|
+
|
|
|
+<!-- inline scripts related to this page -->
|
|
|
+<script type="text/javascript">
|
|
|
+
|
|
|
+ var reqJson = createRequestData('queryTemplate','');
|
|
|
+
|
|
|
+ var colNames = [];
|
|
|
+
|
|
|
+ var colModels = [];
|
|
|
+
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ type: "POST",
|
|
|
+ url: "../data/list_template.json",
|
|
|
+ data: reqJson,
|
|
|
+ contentType: "application/text",
|
|
|
+ dataType:"text",
|
|
|
+ success: function(data){
|
|
|
+ processResponse(data);
|
|
|
+ },
|
|
|
+ error: function(data){
|
|
|
+ //alertText("网络超时,请稍后再试");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ function processResponse(data){
|
|
|
+ var data = getResponseInfo(data)
|
|
|
+ if(data.code != "0000"){
|
|
|
+ alertText(data.msg+",错误ID:"+data.id);
|
|
|
+ return ;
|
|
|
+ }
|
|
|
+ var templates = data.data.template;
|
|
|
+ if(templates == null || templates == undefined){
|
|
|
+ return ;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ for(var colIndex = 0; colIndex < templates.length; colIndex++){
|
|
|
+ colNames.push(templates[colIndex].colName);
|
|
|
+ if(templates[colIndex].colModel.formatter == undefined){
|
|
|
+ colModels.push(templates[colIndex].colModel);
|
|
|
+ }else{
|
|
|
+ colModels.push(JSON.parse(JSON.stringify(templates[colIndex].colModel),function(k,v){
|
|
|
+ if(v.indexOf && v.indexOf('function') > -1){
|
|
|
+ return eval("(function(){return "+v+" })()")
|
|
|
+ }
|
|
|
+ return v;
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ showGradData(colNames,colModels)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function showGradData(colNames,colModels){
|
|
|
+
|
|
|
+ jQuery(function($) {
|
|
|
+ var grid_selector = "#grid-table";
|
|
|
+ var pager_selector = "#grid-pager";
|
|
|
+
|
|
|
+
|
|
|
+ var parent_column = $(grid_selector).closest('[class*="col-"]');
|
|
|
+ //resize to fit page size
|
|
|
+ $(window).on('resize.jqGrid', function () {
|
|
|
+ $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
|
|
|
+ })
|
|
|
+
|
|
|
+ //resize on sidebar collapse/expand
|
|
|
+ $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
|
|
|
+ if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
|
|
|
+ //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
|
|
|
+ setTimeout(function() {
|
|
|
+ $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
|
|
|
+ }, 20);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ jQuery(grid_selector).jqGrid({
|
|
|
+ subGrid : false,
|
|
|
+ //data: grid_data,
|
|
|
+ url: "../data/list.json",
|
|
|
+ datatype: "json",
|
|
|
+ height: 250,
|
|
|
+ colNames:colNames,
|
|
|
+ colModel:colModels,
|
|
|
+ viewrecords : true,
|
|
|
+ rowNum:10,
|
|
|
+ rowList:[10,20,30],
|
|
|
+ pager : pager_selector,
|
|
|
+ altRows: true,
|
|
|
+ multiselect: true,
|
|
|
+ multiboxonly: true,
|
|
|
+ loadComplete : function() {
|
|
|
+ var table = this;
|
|
|
+ setTimeout(function(){
|
|
|
+ styleCheckbox(table);
|
|
|
+
|
|
|
+ updateActionIcons(table);
|
|
|
+ updatePagerIcons(table);
|
|
|
+ enableTooltips(table);
|
|
|
+ }, 0);
|
|
|
+ },
|
|
|
+
|
|
|
+ });
|
|
|
+ $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
|
|
|
+
|
|
|
+
|
|
|
+ //switch element when editing inline
|
|
|
+ function aceSwitch( cellvalue, options, cell ) {
|
|
|
+ setTimeout(function(){
|
|
|
+ $(cell) .find('input[type=checkbox]')
|
|
|
+ .addClass('ace ace-switch ace-switch-5')
|
|
|
+ .after('<span class="lbl"></span>');
|
|
|
+ }, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ function doItemData(cellvalue, options, rowObject){
|
|
|
+ var temp ='<div style="margin-left:8px;"><div title="详情记录" style="float:left;cursor:pointer;" class="ui-pg-div" id="jEditButton_3" onclick="detail('+rowObject+')" onmouseover="jQuery(this).addClass("ui-state-hover");" onmouseout="jQuery(this).removeClass(\"ui-state-hover\");"><span class="ui-icon fa-search-plus"/></div></div>';
|
|
|
+ return '['+cellvalue+']';
|
|
|
+ }
|
|
|
+
|
|
|
+ //enable datepicker
|
|
|
+ function pickDate( cellvalue, options, cell ) {
|
|
|
+ setTimeout(function(){
|
|
|
+ $(cell) .find('input[type=text]')
|
|
|
+ .datepicker({format:'yyyy-mm-dd' , autoclose:true});
|
|
|
+ }, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //navButtons
|
|
|
+ jQuery(grid_selector).jqGrid('navGrid',pager_selector,
|
|
|
+ { //navbar options
|
|
|
+ edit: true,
|
|
|
+ editicon : 'ace-icon fa fa-pencil blue',
|
|
|
+ add: true,
|
|
|
+ addicon : 'ace-icon fa fa-plus-circle purple',
|
|
|
+ del: true,
|
|
|
+ delicon : 'ace-icon fa fa-trash-o red',
|
|
|
+ search: true,
|
|
|
+ searchicon : 'ace-icon fa fa-search orange',
|
|
|
+ refresh: true,
|
|
|
+ refreshicon : 'ace-icon fa fa-refresh green',
|
|
|
+ view: true,
|
|
|
+ viewicon : 'ace-icon fa fa-search-plus grey',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ //edit record form
|
|
|
+ //closeAfterEdit: true,
|
|
|
+ //width: 700,
|
|
|
+ recreateForm: true,
|
|
|
+ beforeShowForm : function(e) {
|
|
|
+ var form = $(e[0]);
|
|
|
+ form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
|
|
|
+ style_edit_form(form);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ //new record form
|
|
|
+ //width: 700,
|
|
|
+ closeAfterAdd: true,
|
|
|
+ recreateForm: true,
|
|
|
+ viewPagerButtons: false,
|
|
|
+ beforeShowForm : function(e) {
|
|
|
+ var form = $(e[0]);
|
|
|
+ form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
|
|
|
+ .wrapInner('<div class="widget-header" />')
|
|
|
+ style_edit_form(form);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ //delete record form
|
|
|
+ recreateForm: true,
|
|
|
+ beforeShowForm : function(e) {
|
|
|
+ var form = $(e[0]);
|
|
|
+ if(form.data('styled')) return false;
|
|
|
+
|
|
|
+ form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
|
|
|
+ style_delete_form(form);
|
|
|
+
|
|
|
+ form.data('styled', true);
|
|
|
+ },
|
|
|
+ onClick : function(e) {
|
|
|
+ //alert(1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ //search form
|
|
|
+ recreateForm: true,
|
|
|
+ afterShowSearch: function(e){
|
|
|
+ var form = $(e[0]);
|
|
|
+ form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
|
|
|
+ style_search_form(form);
|
|
|
+ },
|
|
|
+ afterRedraw: function(){
|
|
|
+ style_search_filters($(this));
|
|
|
+ }
|
|
|
+ ,
|
|
|
+ multipleSearch: true,
|
|
|
+ /**
|
|
|
+ multipleGroup:true,
|
|
|
+ showQuery: true
|
|
|
+ */
|
|
|
+ },
|
|
|
+ {
|
|
|
+ //view record form
|
|
|
+ recreateForm: true,
|
|
|
+ beforeShowForm: function(e){
|
|
|
+ var form = $(e[0]);
|
|
|
+ form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function style_edit_form(form) {
|
|
|
+ //enable datepicker on "sdate" field and switches for "stock" field
|
|
|
+ form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
|
|
|
+
|
|
|
+ form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
|
|
|
+ //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
|
|
|
+ //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
|
|
|
+
|
|
|
+
|
|
|
+ //update buttons classes
|
|
|
+ var buttons = form.next().find('.EditButton .fm-button');
|
|
|
+ buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
|
|
|
+ buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
|
|
|
+ buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')
|
|
|
+
|
|
|
+ buttons = form.next().find('.navButton a');
|
|
|
+ buttons.find('.ui-icon').hide();
|
|
|
+ buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
|
|
|
+ buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
|
|
|
+ }
|
|
|
+
|
|
|
+ function style_delete_form(form) {
|
|
|
+ var buttons = form.next().find('.EditButton .fm-button');
|
|
|
+ buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
|
|
|
+ buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
|
|
|
+ buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
|
|
|
+ }
|
|
|
+
|
|
|
+ function style_search_filters(form) {
|
|
|
+ form.find('.delete-rule').val('X');
|
|
|
+ form.find('.add-rule').addClass('btn btn-xs btn-primary');
|
|
|
+ form.find('.add-group').addClass('btn btn-xs btn-success');
|
|
|
+ form.find('.delete-group').addClass('btn btn-xs btn-danger');
|
|
|
+ }
|
|
|
+ function style_search_form(form) {
|
|
|
+ var dialog = form.closest('.ui-jqdialog');
|
|
|
+ var buttons = dialog.find('.EditTable')
|
|
|
+ buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
|
|
|
+ buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
|
|
|
+ buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
|
|
|
+ }
|
|
|
+
|
|
|
+ function beforeDeleteCallback(e) {
|
|
|
+ var form = $(e[0]);
|
|
|
+ if(form.data('styled')) return false;
|
|
|
+
|
|
|
+ form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
|
|
|
+ style_delete_form(form);
|
|
|
+
|
|
|
+ form.data('styled', true);
|
|
|
+ }
|
|
|
+
|
|
|
+ function beforeEditCallback(e) {
|
|
|
+ var form = $(e[0]);
|
|
|
+ form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
|
|
|
+ style_edit_form(form);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //it causes some flicker when reloading or navigating grid
|
|
|
+ //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
|
|
|
+ //or go back to default browser checkbox styles for the grid
|
|
|
+ function styleCheckbox(table) {
|
|
|
+ /**
|
|
|
+ $(table).find('input:checkbox').addClass('ace')
|
|
|
+ .wrap('<label />')
|
|
|
+ .after('<span class="lbl align-top" />')
|
|
|
+
|
|
|
+
|
|
|
+ $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
|
|
|
+ .find('input.cbox[type=checkbox]').addClass('ace')
|
|
|
+ .wrap('<label />').after('<span class="lbl align-top" />');
|
|
|
+ */
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //unlike navButtons icons, action icons in rows seem to be hard-coded
|
|
|
+ //you can change them like this in here if you want
|
|
|
+ function updateActionIcons(table) {
|
|
|
+ /**
|
|
|
+ var replacement =
|
|
|
+ {
|
|
|
+ 'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
|
|
|
+ 'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
|
|
|
+ 'ui-icon-disk' : 'ace-icon fa fa-check green',
|
|
|
+ 'ui-icon-cancel' : 'ace-icon fa fa-times red'
|
|
|
+ };
|
|
|
+ $(table).find('.ui-pg-div span.ui-icon').each(function(){
|
|
|
+ var icon = $(this);
|
|
|
+ var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
|
|
|
+ if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
|
|
|
+ })
|
|
|
+ */
|
|
|
+ }
|
|
|
+
|
|
|
+ //replace icons with FontAwesome icons like above
|
|
|
+ function updatePagerIcons(table) {
|
|
|
+ var replacement =
|
|
|
+ {
|
|
|
+ 'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
|
|
|
+ 'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
|
|
|
+ 'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
|
|
|
+ 'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
|
|
|
+ };
|
|
|
+ $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
|
|
|
+ var icon = $(this);
|
|
|
+ var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
|
|
|
+
|
|
|
+ if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function enableTooltips(table) {
|
|
|
+ $('.navtable .ui-pg-button').tooltip({container:'body'});
|
|
|
+ $(table).find('.ui-pg-div').tooltip({container:'body'});
|
|
|
+ }
|
|
|
+
|
|
|
+ //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
|
|
|
+
|
|
|
+ $(document).one('ajaxloadstart.page', function(e) {
|
|
|
+ $.jgrid.gridDestroy(grid_selector);
|
|
|
+ $('.ui-jqdialog').remove();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|