|
|
@@ -23,6 +23,8 @@
|
|
|
|
|
|
<div id="grid-pager"></div>
|
|
|
|
|
|
+<button class="btn btn-blue" id="bedata">新增</button>
|
|
|
+
|
|
|
|
|
|
<script src="../static/assets/js/jquery-2.1.4.min.js"></script>
|
|
|
<script src="../static/assets/js/jquery.jqGrid.min.js"></script>
|
|
|
@@ -33,346 +35,41 @@
|
|
|
<!-- 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();
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
+ $(function(){
|
|
|
+ pageInit();
|
|
|
+});
|
|
|
+function pageInit(){
|
|
|
+ jQuery("#grid-table").jqGrid(
|
|
|
+ {
|
|
|
+ url : '../data/list.json',
|
|
|
+ datatype : "json",
|
|
|
+ colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Closed', 'Ship via', 'Notes' ],
|
|
|
+ colModel : [
|
|
|
+ {name : 'id',index : 'id',width : 55,editable : "true",editoptions : {readonly : true,size : 10}},
|
|
|
+ {name : 'invdate',index : 'invdate',width : 80,editable : true,editoptions : {size : 10}},
|
|
|
+ {name : 'name',index : 'name',width : 90,editable : true,editoptions : {size : 25}},
|
|
|
+ {name : 'amount',index : 'amount',width : 60,align : "right",editable : true,editoptions : {size : 10}},
|
|
|
+ {name : 'tax',index : 'tax',width : 60,align : "right",editable : true,editoptions : {size : 10}},
|
|
|
+ {name : 'total',index : 'total',width : 60,align : "right",editable : true,editoptions : {size : 10}},
|
|
|
+ {name : 'closed',index : 'closed',width : 55,align : 'center',editable : true,edittype : "checkbox",editoptions : {value : "Yes:No"}},
|
|
|
+ {name : 'ship_via',index : 'ship_via',width : 70,editable : true,edittype : "select",editoptions : {value : "FE:FedEx;TN:TNT"}},
|
|
|
+ {name : 'note',index : 'note',width : 100,sortable : false,editable : true,edittype : "textarea",editoptions : {rows : "2",cols : "20"}}
|
|
|
+ ],
|
|
|
+ rowNum : 10,
|
|
|
+ rowList : [ 10, 20, 30 ],
|
|
|
+ pager : '#pagered',
|
|
|
+ sortname : 'id',
|
|
|
+ viewrecords : true,
|
|
|
+ sortorder : "desc",
|
|
|
+ caption : "Search Example",
|
|
|
+ editurl : "/RowEditing"
|
|
|
+ });
|
|
|
+ $("#bedata").click(function() {
|
|
|
+ jQuery("#grid-table").jqGrid('editGridRow', "new", {
|
|
|
+ reloadAfterSubmit : false
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|