最近工作需要用到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语言插件包文档写的非必要,但是我试过,如果不引入这个包,中间很多地方会因为找不到语言包报错。因为找这个原因耽误了很多时间,所以建议一次都引入。
- 创建表格
<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"}