`
张玉龙
  • 浏览: 737360 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

jqGrid 操作

阅读更多




<script type="text/javascript" src="/7e/js/admincp/jquery.min.js"></script>
<script type="text/javascript"
	src="/7e/js/admincp/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript"
	src="/7e/js/admincp/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="/7e/js/admincp/jquery.jqGrid.min.js"></script>
<head>
<base href=<%=basePath%>>
<SCRIPT type="text/javascript">
	function buycourse(uid, type) {
		// 配置jqGrid组件   

		/*显示网络课程 */
		$("#grid")
				.jqGrid(
						{
							url : "/7e/s/jqGridShowCourseBuy.action?uid=1&type=1",
							datatype : "json",
							//	data:"uid=1",
							mtype : "GET",
							height : 180,
							autowidth : true,
							colNames : [ '课程名', '价格', '课程说明' ,'操作'],
							colModel : [ {
								name : "cs.cname",
								index : "cs.cname",
								//	label : "课程名",
								width : 180,

								editable : true,
								edittype : 'text',
								editoptions : {
									size : 10,
									maxlength : 15
								},
								editrules : {
									required : true
								},
								formoptions : {
									elmprefix : '(*)'
								}

							}, {
								name : "cs.price",
								index : "cs.price",
								//label : "价格",
								width : 180,

								editable : true,
								edittype : 'text',
								editoptions : {
									size : 10,
									maxlength : 15
								},
								editrules : {
									required : true
								},
								formoptions : {
									elmprefix : '(*)'
								}
							}, {
								name : "op",
								index : "op",
								//	label : "课程说明",
								width : 180,

								editable : true,
								edittype : 'text',
								editoptions : {
									size : 10,
									maxlength : 15
								},
								editrules : {
									required : true
								},
								formoptions : {
									elmprefix : '(*)'
								}
							},

							{
								name : 'act',
								index : 'act',
								width : 110,
								search : false,
								sortable : false,
								editable : false
							},

							],
							viewrecords : true,
							rowNum : 20,
							rowList : [ 10, 20, 50 ],
							height : 400,
							prmNames : {
								search : "search"
							}, //(1)
							gridComplete : function() {
								var ids = $("#grid").getDataIDs();//jqGrid('getDataIDs');
								for ( var i = 0; i < ids.length; i++) {
									var cl = ids[i];
									be = "<input style='height:22px;width:40px;' type='button' value='编辑' onclick=\"jQuery('#grid').jqGrid('editGridRow','"
											+ cl
											+ "',{checkOnSubmit:true,checkOnUpdate:true,closeAfterEdit:true,closeOnEscape:true});\"  />";
									de = "<input style='height:22px;width:40px;' type='button' value='删除' onclick=\"jQuery('#grid').jqGrid('delGridRow','"
											+ cl
											+ "',{closeOnEscape:true});\"  />";
									listen="<a href=\"s/findCourseLesson.action?userid=1&courseid=1\">进入</a>"		
									jQuery("#grid").jqGrid('setRowData',
											ids[i], {
												act : be + de +listen
											});
								}
							},
							jsonReader : {
								root : "listTree", // (2)  
								records : "record", // (3)   
								repeatitems : false
							// (4)   
							},
							pager : "#gridPager",
							hidegrid : false

						});

	}

	 //显示网络课程 
</SCRIPT>




</head>


				<DIV>

					<TABLE id="grid" width="100%" border="0" align="center"
						cellpadding="0" bgcolor="#E9F2FC" cellspacing="1">
					</TABLE>
					<div id="gridPager"></div>
				</DIV>







  • 大小: 54.4 KB
分享到:
评论

相关推荐

    jqGrid源码及操作文档

    七、jqGrid操作文档 提供的操作文档通常包含安装指南、基本用法、API参考、示例代码等内容,帮助开发者快速上手并解决实际问题。 综上所述,jqGrid是一个强大且灵活的表格插件,它提供了丰富的功能和高度的可定制性...

    jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码

    在使用JqGrid这个强大的jQuery表格插件时,我们经常需要自定义操作列来实现更丰富的交互功能。本文将详细讲解如何在JqGrid的Table中实现点击【操作】按钮时弹出一个包含多个操作的Div层。 1. **配置列模型**: 在...

    jqgrid中文文档API

    jQgrid提供了许多方法来实现各种操作,例如reloadGrid、addRowData、deleteRowData等。开发者可以根据需要来使用这些方法,以实现所需的操作效果。 事件 jQgrid提供了许多事件来处理用户交互,例如onSelectRow、...

    JqGrid插件+JqGridDemo+JqGrid主题

    JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、筛选、分页、编辑、添加、删除和保存等,极大地增强了网页中表格的交互性和数据管理...

    jqGrid(jqueryGrid表格操作demo)

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作表格数据,它提供了丰富的功能,如数据分页、排序、过滤、编辑、添加、删除等,且具有高度自定义性。这个"jqGrid(jqueryGrid表格操作demo)"是一...

    jqGrid_api中文文档

    这些内容涉及了如何通过编程方式操作jqGrid,包括如何设置表格结构(ColModel)、如何处理数据(数据操作)、如何自定义用户界面(如按钮和搜索工具栏)以及如何响应用户交互事件。 6. jqGrid的高级功能 文件还...

    jqGrid4.6完整包

    jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据。这个"jqGrid4.6完整包"包含了所有你需要的组件来构建功能丰富的、可编辑的表格。以下是关于 jqGrid 4.6 版本的一些关键知识点: 1. **jqGrid ...

    jqGrid中文文档.doc

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

    JqGrid中文API文档

    JqGrid是一款强大的JavaScript数据网格组件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑和格式化数据。本中文API文档将帮助开发者深入理解并有效利用JqGrid的...

    jqGrid 4.6和4.7版本

    jqGrid是一款功能强大的jQuery插件,专用于在Web页面上展示和操作表格数据。它以其高效、灵活和可定制性而受到开发者的广泛欢迎。在jqGrid 4.6和4.7这两个版本中,我们可以深入探讨一些核心知识点: 1. **数据网格...

    jqGrid demo (完整版)

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

    jqgrid +bootstrap4.0 直接使用

    jqGrid 是一个强大的 jQuery 插件,用于在网页上展示和操作数据,它提供了丰富的功能,包括数据排序、筛选、分页和编辑等。Bootstrap 4.0 是一个流行的前端框架,用于构建响应式和移动优先的网站。将 jqGrid 与 ...

    jqGrid5.X 官方全Demo下载

    jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据表格。它提供了丰富的功能,如数据分页、排序、过滤、编辑和更多。本资源为 jqGrid5.X 的官方全Demo下载,包含中文文档和离线演示,用户可以在...

    jQgrid demo

    在本"jQgrid demo"中,我们将深入探讨如何利用 jQGrid 实现交互式的数据展示和操作。 jQGrid 的核心特性包括: 1. **数据加载与显示**:jQGrid 支持从服务器或本地数据源动态加载数据,并以表格形式展示。它可以...

    jqgrid4.6.rar

    jqGrid 是一个基于 jQuery 的开源网格插件,用于在网页上展示和操作数据。这个压缩包 "jqgrid4.6.rar" 包含了 jqGrid 4.6.0 版本,它是一个稳定且功能丰富的表格展示工具,广泛应用于Web开发中数据管理的场景。以下...

    jqGrid 3.5源码+DEMO+DOC

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作表格数据。它在Web开发领域中被广泛使用,特别是在需要处理大量结构化数据的场景下。jqGrid 3.5版本是该插件的一个较早版本,但仍然具有丰富的...

    jqGrid5.5 版本

    jqGrid是一款功能强大的JavaScript数据网格插件,专为Web应用程序设计,用于展示和操作大量结构化数据。在jqGrid5.5版本中,它提供了一系列的改进和新特性,使得数据管理和用户界面更加高效和易用。以下是关于jqGrid...

    jqgriddemo,样式漂亮,可以直接使用

    **jqGrid介绍** jqGrid是一款基于JavaScript的开源数据网格组件,它是jQuery库的一部分,用于创建交互式的、数据丰富的Web表格。jqGrid以其强大的数据管理能力、丰富的功能集和灵活的可定制性,深受开发者的喜爱。...

    jqgrid序列

    `jqGrid`是一款基于JavaScript的开源数据网格组件,主要用于在Web应用中展示和管理大量结构化数据。它提供了丰富的特性和功能,包括数据的分页、排序、过滤、编辑以及对服务器端数据的异步操作。jqGrid与jQuery库...

Global site tag (gtag.js) - Google Analytics