JqGrid之实际应用

系统管理员 2022-07-17 04:14 247阅读 0赞

1.主界面：

<%@ page contentType="text/html; charset=UTF-8"%>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <%@ include file="/bootstrap/header.jsp"%>
    <title></title>
    </head>
    <body class="no-skin">
    	<%@ include file="/bootstrap/navbar.jsp"%>
    	<div class="main-container" id="main-container">
    		<script type="text/javascript">
    			try {
    				ace.settings.check('main-container', 'fixed')
    			} catch (e) {
    			}
    			function cc(data){
    				alert(data);
    			}
    		</script>
    
    		<%@ include file="/bootstrap/siderbar.jsp"%>
    
    		<div class="main-content">
    			<div class="main-content-inner">
    				<div class="breadcrumbs" id="breadcrumbs">
    					<script type="text/javascript">
    						try {
    							ace.settings.check('breadcrumbs', 'fixed')
    						} catch (e) {
    						}
    					</script>
    
    					<ul class="breadcrumb">
    						<li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">Home</a>
    						</li>
    						<li class="active">用户信息管理</li>
    					</ul>
    					
    
    					
    				</div>
    
    				<div class="page-content">
    					<%@ include file="/bootstrap/setting.jsp"%>
    					<div class="page-header"></div>
    					<div class="row">
    						<table id="grid-table"></table>
    
    						<div id="grid-pager"></div>
    
    						<script type="text/javascript">
    							var $path_base = ".";//编辑时url传递参数
    						</script>
    					</div>
    				</div>
    
    
                          </div>
    		</div>
    		
    		<%@ include file="/bootstrap/footer.jsp"%>
    
    	</div>
    	<script type="text/javascript">
    		jQuery(function($) {
    			var grid_selector = "#grid-table";
    			var pager_selector = "#grid-pager";
    
    			//当前页填充页面
    			$(window).on(
    					'resize.jqGrid',
    					function() {
    						$(grid_selector).jqGrid('setGridWidth',
    								$(".page-content").width());
    					})
    			//调整左侧折叠
    			var parent_column = $(grid_selector).closest('[class*="col-"]');
    			$(document).on(
    					'settings.ace.jqGrid',
    					function(ev, event_name, collapsed) {
    						if (event_name === 'sidebar_collapsed'
    								|| event_name === 'main_container_fixed') {
    							//是为了给开发人员设计页面的改变与视图刷新
    							setTimeout(function() {
    								$(grid_selector).jqGrid('setGridWidth',
    										parent_column.width());
    							}, 0);
    						}
    					})
    
    			//如果jqgrid在另一个页面 要用他的父类的宽度
    			/**
    			$(window).on('resize.jqGrid', function () {
    				var parent_width = $(grid_selector).closest('.tab-pane').width();
    				$(grid_selector).jqGrid( 'setGridWidth', parent_width );
    			})
    			//and also set width when tab pane becomes visible
    			$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    			  if($(e.target).attr('href') == '#mygrid') {
    				var parent_width = $(grid_selector).closest('.tab-pane').width();
    				$(grid_selector).jqGrid( 'setGridWidth', parent_width );
    			  }
    			})
    			 */
    
    			jQuery(grid_selector).jqGrid({
    
    				url :'${path}/sys/listFirmInfosAjaxPC',
    				datatype : "json",
    				autowidth:true,
    				height : 300,
    				colNames : [
    			   ' 姓名',
    			   ' 性别',
    			   ' 失效时间'
    				  ],
    				colModel : [
    					{
    						name : 'fcname',
    						index : 'fcname',
    						editable: true,     //是否可编辑
    						formoptions:{       //编辑时，分布。
    						rowpos:2,
    						colpos:1
    						}
    					},
    					{
    						name : 'fsex',
    						index : 'fsex',
    						editable: true,
    						width : 100, 
    						edittype : "select",                 //编辑类型
    						editoptions : {value :"0:男;1:女"},  //选项
    						formatter :function(cellvalue){
    							switch(cellvalue){
    							case 0 :return "男";
    							case 1 :return "女";
    							}
    						},
    						formoptions:{
    						rowpos:2,
    						colpos:2
    						}
    					
    					},
    			   
    			   
    					{
    						name : 'fexpiredate',
    						index : 'fexpiredate',
    						editable: true,
    					        formatter: 'date',                       //日期初始化
    						formatoptions:{srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d'},  //日期格式配置
    						formoptions:{
    						rowpos:7,
    						colpos:1
    						}
    					
    					},
    			   
    					{
    						name : 'fid',
    						index : 'fid',
    						formatter :function(cellvalue){
    							return '<a href="${path }/pages/sys/bnkdataManage.jsp?fid='+cellvalue+'">健康数据</a>';
    						}
    					},
    					],
    
    				viewrecords : true,
    				rowNum : 10,
    				rowList : [ 10, 20, 30 ],
    				pager : pager_selector,
    				altRows : true,
    				//toppager: true,
    
    				multiselect : true,
    				//multikey: "ctrlKey",
    				multiboxonly : true,
    
    				loadComplete : function() {
    					var table = this;
    					setTimeout(function() {
    						styleCheckbox(table);
    
    						updateActionIcons(table);
    						updatePagerIcons(table);
    						enableTooltips(table);
    					}, 0);
    				},
    
    				editurl : "/dummy.html",//nothing is saved
    				caption : "信息列表"
    
    			//,autowidth: true,
    			/**
    			,
    			grouping:true, 
    			groupingView : { 
    				 groupField : ['name'],
    				 groupDataSorted : true,
    				 plusicon : 'fa fa-chevron-down bigger-110',
    				 minusicon : 'fa fa-chevron-up bigger-110'
    			},
    			caption: "Grouping"
    			 */
    
    			});
    			$(window).triggerHandler('resize.jqGrid');//根据触发窗调整grid大小
    
    			//当编辑一行的时候，替换元素
    			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);
    			}
    			//使用 picDate
    			function pickDate(cellvalue, options, cell) {
    				setTimeout(function() {
    					$(cell).find('input[type=text]').datepicker({
    						format : 'yyyy-mm-dd',
    						autoclose : false
    					});
    				}, 0);
    			}
    			function customFmatter(cellvalue, options, rowObject){  
    			      
    			}  
    			//按钮工具
    			jQuery(grid_selector).jqGrid(
    					'navGrid',
    					pager_selector,
    					{ //工具选项
    						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',
    					},
    					{
    						//编辑表单调整
    						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);
    							},
    						url:'${path}/sys/updateFirmInfosPC'
    						
    					},
    					{
    						
    						//width: 700,
    						width: 600,
    						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);
    						},
    						url:'${path}/sys/addFirmInfosPC'
    					},
    					{
    						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);
    						},
    						url:'${path}/sys/deleteFirmInfosPC',
                                                      //删除时传递参数 找了好几个小时才找到  value 是获取行与获取id
                                                     delData: {
                                delId: function () {
                                var value=jQuery(grid_selector).jqGrid('getRowData',jQuery(grid_selector).jqGrid('getGridParam','selarrrow')[0]).fid;
                                return value;
                                }
                            }
                                                  },
    					{
    						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,
    						url:'${path}/sys/listFirmInfosAjaxPC'
    					/**
    					multipleGroup:true,   //是否支持多条件查询
    					showQuery: true       //是否展示查询条件
    					 */
    					},
    					{
    						//可见表单
    						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) {
                                      
                                   //编辑时，初始化表单，日期选择类型。
    				form.find('input[name=fexpiredate]').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>');
    
    				//更新按钮
    				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) {
    				$(grid_selector).jqGrid('GridUnload');
    				$('.ui-jqdialog').remove();
    			});
    		});
    	</script>
    
    </body>
    </html>

2.效果展示