`
小杨学JAVA
  • 浏览: 900349 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jqGrid 插件

 
阅读更多
/**
 * 封装表格插件条件:只需传入数据源与列表名、信息。
 * @param {Object}
 *            mydatalist:例如{url:'',data:postData,success:function(){}}
 * @return
 */
function dataGrid(options) {
	var width_table = $(".main_container_content").width() - 6;
	if (($(window).height() - 254) < 240) {
		height = ($(window).height() - 254);
	} else {
		height = 240;
	}
	$(".jqGrid div").remove();
	var gridId = options.id ? options.id : 'list';
	var pagerId = gridId + "_pager";
	$(".jqGrid").append("<table id='" + gridId + "'></table>");
	$(".jqGrid").append("<div id='" + pagerId + "'></div>");

	var isLoaded = false;
	var realOptions = {
		mtype : "POST",
		datatype : "json",
		height : height,// height: 'auto',
		width : width_table,
		pager : "#" + pagerId,
		
	   	pgbuttons: true,
	   	pginput:true,
	   	
		loadonce:true,
		prmNames:{rows:"rows",page:"page"},  
		toolbar : [ true, "top" ],
		multiselect : true,
		rowNum : 20,
		rowList : [  10, 20 ,50],
		rownumbers : true,
		jsonReader: {  
			root:"data",
			page: "page", 
			total: "total",  
			records: "record",
			repeatitems : false
		}
	};
	$.extend(realOptions, options);
	if(!realOptions['loadonce']){
		$.extend(realOptions, {
			prmNames:{rows:"rows", page:"page", sort: "sortName", order: "sortOrder"},
			viewrecords:true
		});
	}
	var searchStartTime = (new Date()).getTime();
	var searchEndTime = (new Date()).getTime();
	var events = {
		loadError: function(xhr,st,err){
			art.dialog.error(G_SYSTEM_ERROR);
		},
		loadBeforeSend:function(xhr){
			searchStartTime = (new Date()).getTime();
			if(options.loadBeforeSend){
				options.loadBeforeSend();
			}
		},	
		beforeProcessing:function(xhr){
			searchEndTime = (new Date()).getTime();
			if(options.beforeProcessing){
				options.beforeProcessing();
			}
		},
		loadComplete:function(){
			if(realOptions.pager){
				var searchTime = (searchEndTime - searchStartTime) / 1000;
				var renderTime = ((new Date()).getTime() - searchEndTime) / 1000;
				var pagerTextCtrl = $($('#' + pagerId).find(".ui-paging-info")[0]);
				pagerTextCtrl.html("查询时间 &nbsp;" + searchTime + "s&nbsp;&nbsp;加载时间&nbsp; " + renderTime + "s&nbsp;&nbsp;&nbsp;&nbsp;" + pagerTextCtrl.text());
			}
			if(options.loadComplete){
				options.loadComplete();
			}
		},
		gridComplete : function() {
			var ids = jQuery("#" + gridId).jqGrid('getDataIDs');
//			for ( var i = 0; i < ids.length; i++) {
				// 用来标识奇偶行,和鼠标经过的事件
				$("#" + gridId +" tr:odd").css({
					"background" : "#D4E9EE"
				});
				$("#" + gridId +" tr:even").css({
					"background" : "#F5FAFB"
				});
				$("#" + gridId +" tr").not(".ui-subgrid").hover(function() {
					$(this).children("td").addClass("ui-state-hover");
				}, function() {
					$(this).children("td").removeClass("ui-state-hover");
				});
//			}
			if(options.gridComplete){
				options.gridComplete();
			}
		}
	};
	/*
	 * subgrid
	 */
	if (realOptions['subGridOption']) {
		var subgOp = {
			subGrid : true,
			repeatitems : false,
			subGridRowExpanded : function(subGridId, rowId) {
				var subGridloadOp = {
					subGridId : subGridId,
					rowId : rowId,
					width : width_table - 70,
					height : realOptions.subGridOption.subHeight ? realOptions.subGridOption.subHeight : 200,
					url : realOptions.subGridOption.subUrl,
					colNames : realOptions.subGridOption.subColNames,
					colModel : realOptions.subGridOption.subColModel,
					subPager : realOptions.subGridOption.subPager
				};
				$.extend(subGridloadOp, realOptions.subGridOption);
				subGridload(subGridloadOp);
			},
			subGridRowColapsed: function(subGridId, rowId) {
				jQuery("#"+subGridId+"_table").remove();
			},
			subGridOptions : {
				plusicon : "ui-icon-plus",
				minusicon : "ui-icon-minus",
				openicon : "ui-icon-carat-1-sw",
				expandOnLoad : false,
				selectOnExpand : true,
				reloadOnExpand : true
			}
		};
		$.extend(subgOp, realOptions.subGridOption);
		$.extend(realOptions, subgOp);
		// 双击打开subgrid
		$.extend(events, {
			ondblClickRow:function (rowId){
				$("#" + gridId).jqGrid('toggleSubGridRow', rowId);
			}
		}); 
	}
	/*
	 * end
	 */
	$.extend(realOptions, events);
	return jQuery("#" + gridId).jqGrid(realOptions);
}

 

/**
 * 子表格
 */
function subGridload(options) {
	var subGridId = options.subGridId;
	var subgrid_table_id = options.subGridId + "_table";
	var subgrid_pager_id = options.subGridId + "_pager"  
	$("#" + subGridId).css({
		'padding':'2px'
	});
	$("#" + subGridId).height(options.height+30);
	$("#" + subGridId).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>");
	var _subpagerId = null;
	var _rowNum = 9999;
	if (options.subPager) {
		$("#" + subGridId).height(options.height+61);	
		_subpagerId = options.subPager ? "#"+subgrid_pager_id : null;
		_rowNum = 10;
	}
	var realOptions = {
		mtype : "POST",
		datatype : "json",
		height : options.height,
		pager : _subpagerId,
		loadonce : false,
		toolbar : [ false, "top" ],
		multiselect : false,
		shrinkToFit:true,
		rowNum : _rowNum,
		rowList : [  10, 15 ,20],
		rownumbers : true,
		jsonReader : {
			root : "data",
			page : "page",
			total : "total",
			records : "record",
			repeatitems : false
		}
	};
	$.extend(realOptions, options);
	if(!realOptions['loadonce']){
		// 每次都从服务器加载时,分页参数
		$.extend(realOptions, {
			prmNames:{rows:"rows", page:"page", sort: "sortName", order: "sortOrder"},
			viewrecords:true
		});
	}
	var events = {
		gridComplete : function() {
//			$("#" + subgrid_table_id+" tr:odd").css( {
//				"background" : "#F0F0F0"
//			});
//			$("#" + subgrid_table_id+" tr:even").css( {
//				"background" : "#E0E0E0"
//			});
		},
		onSelectRow:function (a){
			$(this).css({"background" : "#F5FAFB"});
		}
	};
	$.extend(realOptions, events);
	return jQuery("#" + subgrid_table_id).jqGrid(realOptions);
}

 调用sample:

subGridOption : {
							subPager: false,
							shrinkToFit:false,
							subHeight : 200,
							subUrl:'detailSearch.action?invoiceDetailEntity.invoiceNoticeId=' + $('#invoiceNoticeId').val(),
							subColNames:['工厂代码', '工厂名称', '仓库代码',
											'仓库名称'],
							subColModel:[{name:'polineNo', index:'PO_LINE_NO', width:80, editable:true, align:"center"},
											{name:'factoryDesc', index:'FACTORY_DESC', width:80, editable:true, align:"center"},
											{name:'invLocCode', index:'INV_LOC_CODE', width:80, editable:true, align:"center"},
											{name:'invLocDesc', index:'INV_LOC_DESC', width:80, editable:true, align:"center"}]
					},

 

分享到:
评论

相关推荐

    jqGrid插件源码

    在"jqGrid插件源码"中,我们可以深入理解其内部工作机制,学习如何自定义功能或优化性能。源码分为以下几个关键部分: 1. **src**:这是jqGrid的主要源代码目录,包含了核心功能的JavaScript文件。在这里,你可以...

    C#封装的JqGrid插件

    本篇文章将深入探讨C#封装的JqGrid插件,以及如何在实际项目中配置和应用它。 首先,JqGrid插件的核心在于其丰富的功能特性,如分页、排序、搜索、过滤、编辑和添加数据等。通过C#进行封装,可以方便地与后端服务器...

    jqGrid插件--JQuery表格插件

    jqGrid是一款基于jQuery的开源表格插件,专为数据管理和展示设计,提供了丰富的功能和高度的自定义性。它在Web开发中广泛应用于构建高效、交互式的数据网格。以下是关于jqGrid的一些关键知识点: 1. **基本使用**:...

    JqGrid插件+JqGridDemo+JqGrid主题

    JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。...通过深入学习和实践"JqGrid插件+JqGridDemo+JqGrid主题",开发者可以提升其在前端开发中的数据处理能力,创建出更富交互性的网页应用。

    JqGrid插件

    JqGrid是一款强大的JavaScript插件,专为网页端的数据展示和操作设计,尤其适用于处理大量表格数据。它基于jQuery库,提供了丰富的功能,包括数据排序、查询、分页、编辑以及自定义列显示等,极大地提高了开发效率和...

    jqgrid 插件

    jqGrid是一款基于jQuery的表格插件,用于创建功能丰富的数据网格。它提供了强大的数据操作、分页、排序、过滤和编辑功能,使得在Web应用中展示和管理数据变得极其便捷。在JavaScript和HTML5的世界里,jqGrid是开发...

    jqGrid插件包

    jqGrid是一款功能强大的JavaScript表格插件,主要用于在Web页面中展示和操作数据,它提供了丰富的交互性和自定义功能。这款插件基于jQuery库,因此在兼容性和易用性上具有显著优势。jqGrid的主要特点包括分页、排序...

    jqgrid插件asp.net的例子

    以下是对jqGrid插件在ASP.NET中的应用进行的详细说明: 1. **数据绑定**:jqGrid支持多种数据源,包括Web服务、JSON、XML、CSV等。在ASP.NET中,你可以通过ADO.NET、Entity Framework或LINQ to SQL等方式获取数据,...

    jqgrid插件相关说明

    ### jqGrid插件知识点详解 #### 一、概述 jqGrid 是一款基于 jQuery 的表格插件,具有强大的功能,能够实现复杂的数据展示和操作。它不仅支持数据的排序、分页、过滤等基本功能,还提供了自定义列、行编辑等功能,...

    jqGrid表格插件(带中文/英文文档)

    jqGrid是一款功能强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它支持多种功能,如数据分页、排序、过滤、编辑和 AJAX 交互。这款插件基于 jQuery 库,使得开发者能够轻松地在网页上创建交互式、...

    jqGrid表格插件学习(一) 第一个Demo

    以下是对jqGrid插件的一些关键知识点的详细说明: 1. **安装与引入**: 在开始使用jqGrid前,你需要下载jqGrid的库文件,包括JavaScript文件(如`grid.base.js`, `grid.common.js`等)和CSS文件。这些文件可以从...

    jqGrid中文文档.doc

    jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作表格化的数据。在开始使用 jqGrid 之前,需要具备基本的 JavaScript 和 jQuery 知识,因为 jqGrid 是构建在 jQuery 库之上的。jQuery 提供了简便的...

    jqGrid demo (完整版)

    jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作大量结构化数据。这个"jqGrid demo (完整版)"提供了一个全面的示例,可以帮助开发者更好地理解和应用 jqGrid,无论是在 PHP 或 JSP 环境中。 1....

    jQgrid demo

    jQGrid 是一个基于 jQuery 的开源数据网格插件,它提供了强大的数据管理功能,包括数据的分页、排序、过滤、编辑等。在本"jQgrid demo"中,我们将深入探讨如何利用 jQGrid 实现交互式的数据展示和操作。 jQGrid 的...

    LaravelJqGrid:在Laravel中使用JqGrid插件的示例

    **LaravelJqGrid** 是一个专为 Laravel 框架设计的插件,它允许开发者集成 JqGrid JavaScript 库来创建动态、交互式的表格数据展示和管理界面。JqGrid 是一个强大的 jQuery 插件,提供了丰富的功能,如分页、排序、...

    jquery.jqgrid最新版

    五、jqGrid插件 jqGrid的`plugins`目录包含了多个增强功能的插件,例如: 1. `grid.locale-cn.js`:中文语言包,用于本地化提示信息。 2. `jqGrid.import.js`:支持数据导入功能。 3. `grid.columntype.js`:定义...

    jquery.jqGrid-4.0.0

    plugins 文件夹则是 jqGrid 插件的集合,这些插件扩展了 jqGrid 的功能,如分页、排序、搜索和编辑等。例如,"subgrid" 插件允许在一个单元格内嵌套另一个表格,"navigator" 插件则提供了包括新增、编辑、删除、查看...

    jqGrid中文教程

    jQGrid 是一个基于 jQuery 的开源插件,主要用于创建交互式网格控件。 jQGrid 提供了强大的数据展示和编辑功能,支持多种数据源,包括数组、XML 和 JSON 数据。 在开始使用 jQGrid 之前,需要具备基本的 JavaScript...

    jqGrid.CHM.zip

    11. **插件与扩展**:了解如何使用和创建jqGrid插件,以实现更复杂的功能,比如导出数据、导入数据、拖放列等。 12. **性能优化**:在处理大量数据时,了解如何配置jqGrid以提高加载速度和响应性能。 通过深入学习...

    jqgrid 3.4.4 稳定版

    jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作大量结构化数据。版本 3.4.4 被标记为稳定版,意味着它经过了广泛的测试和验证,适合在生产环境中使用,能提供可靠的数据管理功能。 1. **jQuery ...

Global site tag (gtag.js) - Google Analytics