jqGrid-基础篇

jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。 
jqGrid demo

一、jqGrid特性

  • 基于jquery UI主题，开发者可以根据客户要求更换不同的主题。
  • 兼容目前所有流行的web浏览器。
  • Ajax分页，可以控制每页显示的记录数。
  • 支持XML，JSON，数组形式的数据源。
  • 提供丰富的选项配置及方法事件接口。
  • 支持表格排序，支持拖动列、隐藏列。
  • 支持滚动加载数据。
  • 支持实时编辑保存数据内容。
  • 支持子表格及树形表格。
  • 支持多语言。
  • 目前是免费的。

二、jqGrid使用方式

  1. 首先，您需要到jqGrid官网下载最新版本的程序包，下载地址为：http://www.trirand.com/blog/?page_id=6
  2. 下载jqGrid皮肤，下载地址为：http://jqueryui.com/themeroller/
  3. HTML编辑工具建议使用HBuilder 下载地址：http://www.dcloud.io/index.html (注：第一次使用需联网邮箱注册，成功登陆后可离线)
  4. 打开HBuilder :文件->新建->WEB项目，填写项目名称 （这里以jqGriddemo为例） 
    4.1 导入CSS文件 （注意文件路径） 
    4.1 jqGrid css
    4.1 jqGrid theme css
    4.2 导入JS文件(注：i18n 文件夹下可根据所需语言选一个就好 复制时连同文件夹一起复制) 
    4.2 jqGrid js
    4.2 jqGrid locale js

  5. 导入完成后目录如下 
    这里写图片描述

    5.1 打开HBuilder自动生成的index.html 引入相应的css和js 并编写以下代码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>DEMO</title>
  7.  
  8. <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
  9. <link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css" />
  10. <link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap-ui.css" />
  11. <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
  12. </head>
  13.  
  14. <body>
  15. <div class="main" id="main">
  16. <!--jqGrid所在-->
  17. <table id="grid-table"></table>
  18. <!--jqGrid 浏览导航栏所在-->
  19. <div id="grid-pager"></div>
  20.  
  21. </div>
  22.  
  23. <script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
  24. <script src="js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
  25. <script src="js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>
  26.  
  27. <script type="text/javascript">
  28. //当 datatype 为"local" 时需填写
  29. var grid_data = [
  30. {id: "00001",type: "退货出库",pay: "1000",name: "abc",text: "ccc"},
  31. {id: "00002",type: "退货出库", pay: "1000",name: "abc",text: "aaa"},
  32. {id: "00003",type: "退货出库", pay: "1040.06",name: "abc",text: "ddd"
  33. }];
  34. var grid_selector = "#grid-table";
  35. var pager_selector = "#grid-pager";
  36.  
  37. $(document).ready(function () {
  38.  
  39. $("#grid-table").jqGrid({
  40. data: grid_data,//当 datatype 为"local" 时需填写
  41. datatype: "local", //数据来源，本地数据（local，json,jsonp,xml等）
  42. height: 150,//高度，表格高度。可为数值、百分比或'auto'
  43. //mtype:"GET",//提交方式
  44. colNames: ['出库单号', '出库类型', '总金额', '申请人（单位）', '备注'],
  45. colModel: [{
  46. name: 'id',
  47. index: 'id',//索引。其和后台交互的参数为sidx
  48. key: true,//当从服务器端返回的数据中没有id时，将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个，那么只选取第一个，其他被忽略
  49. width: 100,
  50. editable: false,
  51. editoptions: {
  52. size: "20",
  53. maxlength: "30"
  54. }
  55. }, {
  56. name: 'type',
  57. index: 'type',
  58. width: 200,//宽度
  59. editable: false,//是否可编辑
  60. edittype: "select",//可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file.s
  61. editoptions: {
  62. value: "1:采购入库;2:退用入库"
  63. }
  64. }, {
  65. name: 'pay',
  66. index: 'pay',
  67. width: 60,
  68. sorttype: "double",
  69. editable: true
  70. }, {
  71. name: 'name',
  72. index: 'name',
  73. width: 150,
  74. editable: false,
  75. editoptions: {
  76. size: "20",
  77. maxlength: "30"
  78. }
  79. }, {
  80. name: 'text',
  81. index: 'text',
  82. width: 250,
  83. sortable: false,
  84. editable: true,
  85. edittype: "textarea",
  86. editoptions: {
  87. rows: "2",
  88. cols: "10"
  89. }
  90. }, ],
  91. viewrecords: true,//是否在浏览导航栏显示记录总数
  92. rowNum: 10,//每页显示记录数
  93. rowList: [10, 20, 30],//用于改变显示行数的下拉列表框的元素数组。
  94. pager: pager_selector,//分页、按钮所在的浏览导航栏
  95. altRows: true,//设置为交替行表格,默认为false
  96. //toppager: true,//是否在上面显示浏览导航栏
  97. multiselect: true,//是否多选
  98. //multikey: "ctrlKey",//是否只能用Ctrl按键多选
  99. multiboxonly: true,//是否只能点击复选框多选
  100. // subGrid : true,
  101. //sortname:'id',//默认的排序列名
  102. //sortorder:'asc',//默认的排序方式（asc升序，desc降序）
  103. caption: "采购退货单列表",//表名
  104. autowidth: true//自动宽
  105. });
  106.  
  107. });
  108. </script>
  109. </body>
  110.  
  111. </html>

注释仅说明了主要参数的用法，具体API 中文可见：http://blog.mn886.net/jqGrid/ 
6. 效果如下 
6 demo

posted on 2019-03-29 11:03  奔跑吧人生  阅读(406)  评论(0)  编辑  收藏  举报

导航