首页 > 其他分享 >jqGrid组件

jqGrid组件

时间:2023-04-23 17:04:23浏览次数:28  
标签:style rows jqGrid record getElementById 组件 document display


jsp

<html>
<link type="text/css" rel="stylesheet"
	href="/7e/css/template/default/style.css">
<link type="text/css" rel="stylesheet"
	href="/7e/css/template/default/network.css">
<link type="text/css" rel="stylesheet"
	href="/7e/css/template/default/space.css">
<link type="text/css" rel="stylesheet"
	href="/7e/css/datepick/humanity.datepick.css">
<script type="text/javascript" src="/7e/js/datepick/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/7e/js/datepick/jquery.datepick.js"></script>
<script type="text/javascript"
	src="/7e/js/datepick/jquery.datepick.lang.js"></script>

<head>
<base href=<%=basePath%>>
<script language="javascript" type="text/javascript"
	src="/7e/js/util/jquery.js"></script>
<link rel="stylesheet" type="text/css" media="screen"
	href="/7e/css/themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="/7e/css/themes/ui.jqgrid.css" />

<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>
<script type="text/javascript">
	$(function() {
		// 配置jqGrid组件   

		$("#feedlesson").jqGrid({
			url : "/7e/s/jqGridCourse.action",
			datatype : "json",
			data:"uid=1",
			mtype : "post",
			height : 180,
			autowidth : true,
			colModel : [ {
				name : "cname",
				index : "cname",
				label : "课程名",
				width : 180
			},],
			viewrecords : true,
			rowNum : 8,
			rowList : [ 5, 8 ],
			prmNames : {
				search : "search"
			}, //(1)   
			jsonReader : {
				root : "frontcoursebuy", // (2)  
				records : "record", // (3)   
				repeatitems : false
			// (4)   
			},
			pager : "#gridPager2",
			hidegrid : false

		});
	});
</script>
<script type="text/javascript">
	function changeBody(index) {
		switch (index) {
		case 1: {
			document.getElementById('bull').style.display = "";
			document.getElementById('cont').style.display = "none";
			document.getElementById('gridPager').style.display = "none";
			document.getElementById('dis').style.display = "none";
			break;
		}
		case 2: {
			document.getElementById('bull').style.display = "none";
			document.getElementById('cont').style.display = "";
			document.getElementById('gridPager').style.display = "";
			document.getElementById('dis').style.display = "";
			break;
		}

		}
	}
</script>
</head>

<body>
	<div id="warp">
		<div id="mainarea">

			<div id="content">

				<br />
				<div class="feed">


						<div id="feedlessondiv">

							<table id="feedlesson" >

								</table>
							<div id="gridPager2"></div>
						</div>


				</div>

			</div>
		</div>
	</div>
</body>
</html>





struts


<action name="jqGridCourse" class="studentAction" method="findCourseBuyByUid">
			<result type="json">
				<param name="includeProperties">  
		            ^frontcoursebuy\[\d+\]\.\w+,
		             rows, page, total, record ,
		        </param>
				<param name="excludeProperties">stdCourseService,studentService,courseservice
				</param>
			</result>	
		</action>



action


private int rows;
	private int page;
	private String sidx;
	private String sord;
	private Integer total;   
    private Integer record;   

	/**
	 * @param int uid
	 * @return List<Map>
	 */
//rows  page sidx sord=asc
	public String findCourseBuyByUid() {
       int  pages =rows*(page-1);
       System.out.println("uid: "+uid+" rows: "+rows+" pages: "+pages+" sidx: "+sidx+" sord: "+sord);
		frontcoursebuy = stdCourseService.findCourseBuyByUid(uid,rows,pages,sidx,sord);
		List<Map> list = stdCourseService.findCourseBuyByUid(uid,10000000,0,sidx,sord);
		record = list.size();   //总记录数
		System.out.println("record "+record);
		 total = (int) Math.ceil((double) record / (double) rows);//总页数
		return SUCCESS;
	}





成员变量 对应 prmNames 对应 jsonReader 注释


rows rows - 每页中现实的记录行数


search search - 是否是用于查询的请求


sidx sort - 用于排序的列名


sord order - 排序的方式


page page page 当前页码


gridModel - root 用于得到实际数据的数组名称


total - total 总页数


record - records 总记录数


标签:style,rows,jqGrid,record,getElementById,组件,document,display
From: https://blog.51cto.com/u_16085348/6218288

相关文章

  • 一统天下 flutter - widget Sliver: SliverToBoxAdapter - 为不可滚动组件提供 sliver
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:SliverToBoxAdapter-为不可滚动组件提供sliver效果示例如下:lib\widget\sliver\sliver_to_box_adapter.dart/**SliverToBoxAdapter-为不可滚动组件提供sliver效果......
  • 一统天下 flutter - widget Sliver: NestedScrollView - 为可滚动组件提供 sliver 效
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:NestedScrollView-为可滚动组件提供sliver效果示例如下:lib\widget\sliver\nested_scroll_view.dart/**NestedScrollView-为可滚动组件提供sliver效果*/import......
  • 组件的样式(含三元表达式)
    04-组件的样式import'../css/01.css'//导入样式functionApp(){varmyname="lucax"varobj={background:"red",fontSize:"40px"//font-size所有样式的-都改为用驼峰写法去替代}return(<div>......
  • 开发测试平台(六),组件化
    使用bootstrap,复制之前的bootstrap表格,在templates下新建一个component包,并且新建一个模板componentList.ftl,然后引入layout模板和<@body></@body>,把bootstrap表格复制到component.ftl里面2、在controller里新建一个ComponentController,component方法,启动component.ftl,3、修改第......
  • DRF的filter组件
    DRF的Filter组件如果某个API需要传递一些条件进行搜索,其实就在是URL后面通过GET传参即可,例如:/api/users?age=19&category=12在drf中filter组件可以支持条件搜索。1.自定义filter#models.pyfromdjango.dbimportmodelsclassRole(models.Model):"""角色表"""......
  • 【快应用】表单组件的model属性实际运用
     【关键词】表单组件、model 【问题背景】在使用表单组件时,往往需要同时绑定值和 change 事件动态更新数据,当表单交互较多的场景下会有大量与业务无关的代码。快应用从1100版本开始引入 model 指令,使用 model 指令可以简化代码逻辑,在框架内部对值进行绑定与更新,实现......
  • react18中antd的Upload组件上传头像,并且拿到服务器返回的头像的url地址在页面中显示头
    业务需求:上传头像,上传完毕后拿到头像的url,把头像展示在页面中,最终把头像url和其他用户信息一起发送给服务器 上传头像流程 导入Upload组件和图标(一个加号,一个加载中)import{Upload}from'antd';import{PlusOutlined,LoadingOutlined}from'@ant-design/ic......
  • toga高级组件
    Toga还提供了一些高级组件,如表格、滚动容器等,以满足更复杂的应用需求。以下是一些常用的高级组件的介绍和使用方法:表格-toga.Tabletoga.Table用于创建一个表格控件,用于显示数据。常用参数:id:表格控件的唯一标识符。data:表格的数据,格式为二维数组。headings:表格的标题,格式为......
  • 微信小程序:uni-app页面Page和组件Component生命周期执行的先后顺序
    目录H5微信小程序测试代码文档页面生命周期https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle组件生命周期https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle经测试,得出结论:H5和微信小程序的生命周期函数调用顺序不一致H5pagebeforeCreatepag......
  • vscode中react组件
    title:"vscode中ES7+React/Redux/React-Nativesnippets插件使用"date:2023-04-0723:21:32tags:['Vscode','插件']categories:["工具篇"]通过使用这个插件我们可以很方便的进行组件/方法/文件的导入本篇博客仅对插件进行介绍翻译,便于自己以后使用常用片段列表imr:......