使用jqGrid展示网络课程-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_20054/article/details/82065728

本文介绍了一种利用jqGrid插件展示网络课程的方法。通过配置jqGrid组件，实现了网络课程的基本信息展示、编辑和删除等功能。此外，还展示了如何通过按钮实现课程的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >




<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>