jqgrid简单使用,添加工具栏,分组表头,添加子表

最近工作需要用到jqgrid和echarts相关信息,搞的差不多了,稍微总结一下:
jqgrid:
首先引入jqgrid包:

<!-- jqGrid组件基础样式包-必要 -->
		<link rel="stylesheet" href="../jqgrid/css/ui.jqgrid.css" />
		<!-- jqGrid主题包-非必要 --> 
		<!-- 在jqgrid/css/css这个目录下还有其他的主题包,可以尝试更换看效果 -->
		<link rel="stylesheet" href="../jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
		<!-- jqGrid插件包-必要 -->
		<script type="text/javascript" src="../jqgrid/js/jquery.jqGrid.src.js"></script>
		<!-- jqGrid语言插件包-必要 -->
		<script type="text/javascript" src="../jqgrid/js/i18n/grid.locale-cn.js"></script>

jqGrid语言插件包文档写的非必要,但是我试过,如果不引入这个包,中间很多地方会因为找不到语言包报错。因为找这个原因耽误了很多时间,所以建议一次都引入。

  1. 创建表格
	<BODY style="background-color: transparent;">  //这个设置背景色是将Body背景色设置为透明,为添加到iFrame准备
		<table id="list10"></table>
		<div id="pager11"></div>
	</BODY>
$("#list10").jqGrid({
   
			url:"XXXXX",	//后台直接返回List
			datatype : "json",	//返回格式
			mtype:"POST",	//请求方式
			loadonce: true,   //是否一次全部加载,这里使用的是前台分页,后台一次性加载所有数据,前台jqgrid自动分页,本地测试过数据量一次加载 5 万行 自动分页加载大概不到 1 秒
			rowNum : 15,	//jqgrid每页显示行数
			rowList : [ 15, 20, 30, 40, 50],   //可选一页显示行数
			pager: "#pager11",   //分页菜单  直接添加一个div即可  <div id="pager11"></div>
			cellLayout: 3,	//修改表格边框距离,默认为5
			height: $(window).height() - 100,  //高度
			width: $(window).width() - ($(window).width()*0.01),  宽度
			colNames:["id","部门","人员", "发起数量", "收到数量","处理数","处理分钟数","平均审批时间","未处理数","超期数","超期占比"],   //表头
			colModel:[    //表体
						{
   name:'id',index:'id', width:1,hidden:true,key:true},
						{
   name:'bm',index:'bm', width:180},
						{
   name:'fsry',index:'fsry', width:80, align:"center"}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值