JqGrid之实际应用

原创 2016年08月31日 09:54:57

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>
					<!-- /.breadcrumb -->

					<!-- <div class="nav-search" id="nav-search">
						<form class="form-search">
							<span class="input-icon"> <input type="text"
								placeholder="Search ..." class="nav-search-input"
								id="nav-search-input" autocomplete="off" /> <i
								class="ace-icon fa fa-search nav-search-icon"></i>
							</span>
						</form>
					</div> -->
				</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>
		<!-- /.main-content -->
		<%@ 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.效果展示

<img src="http://img.blog.csdn.net/20160831103123080?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

项目中使用的jqGrid

/* jqgrid定义 */ jQuery(grid_selector).jqGrid({ //解析从Server返回的json数据 jsonR...

jqGrid的使用

一、要引用的文件  要使用jqGrid,首先页面上要引入如下css与js文件。 (原地址http://www.cnblogs.com/kissdodog/p/3875992.html)   1、c...
  • tfstone
  • tfstone
  • 2016年07月30日 11:41
  • 3662

点击GridView时,出现背景色,setSelector的使用

如果想在点击GridView时出现背景色,可以把gridview

使用<selector>风格化Android的GridView元素背景

在布局文件home.xml中有下面的代码:             android:background="@drawable/application_background"       ...
  • kite30
  • kite30
  • 2015年05月27日 14:19
  • 317

我有回来了

Gallery - Beautiful很酷很炫的图片效果----IT is SHow Time /translator/assets/css/bootstrap.min....
  • tfy1332
  • tfy1332
  • 2014年07月16日 15:12
  • 3899

AceAdminUi框架的学习

国外货,最近公司为了统一后台页面选中此框架,,学习中,先来看看这款Ui的截图 登陆页面: 显示数据页面 添加数据页面 修改数据页面 接着是代码, 首先是登陆页面。。 ...

ACE前台框架的使用心得1—TABLE 表格的使用

1.html页面中定义table 其中的table(grid-table)代表的是表格;id为g...

jqgrid 实现单选

1.jQuery(grid_selector).jqGrid({ multiselect: true, multiboxonly:true, gridCom...

jQuery插件之【jqGrid】常用语法整理-【更新】

jqGrid常用语法整理,包含数据获取、常用函数、触发事件等 jqGrid表格数据获取相关语法 获取表格所有数据 $("#grid").jqGrid("getRowData");...

Bootstrap Typeahead 用法

bootstrap Typeahead 用法 例如: script src= "/jquery-1.7.2.min.js">script > script src= "/bootstrap...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JqGrid之实际应用
举报原因:
原因补充:

(最多只允许输入30个字)