jQuery.jqGrid

rarenmen

于 2022-06-21 08:23:05 发布

阅读量978

点赞数

分类专栏： JavaScript#jQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/rarenmen/article/details/125329975

版权

JavaScript#jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：为什么要写它

　　相信看到这文章的小伙伴，大多和我一样，手里的项目用到过它。并且已经能够在开发新功能或者修改现有功能的时候照猫画虎的使用它，依然觉得对它不太了解，想更深入的了解它的，我就是抱着这么样的心态，来记录了我跟随官方文档学习的过程，希望对有同样需求的小伙伴有所帮助。

怎么定义jQuery.jqGrid

　　这个问题看起来很无聊的。jqGrid不就是负责把获得过来的信息以表格的形式展示到界面里的JS控件嘛。确实，这个控件就是负责干这事儿的。它官方的WIKI上是这么写的，汉字部份是来自度娘的翻译。

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

jqGrid是一个支持Ajax的JavaScript控件，它提供了在web上表示和操作表格数据的解决方案。由于网格是通过Ajax回调动态加载数据的客户端解决方案，因此它可以与任何服务器端技术集成，包括PHP、ASP、Java servlet、JSP、ColdFusion和Perl。

　　历史和背景就不说了，不考试的话，帮助不大。有几个重要版本更新的注意事项，在它官网上标注了。需要更新的小伙伴，建议去官网上确认一下。

怎么使用jQuery.jqGrid

jQuery.jqGrid需要哪些支持

　　从名字上就能看得出来，jQuery.jqGrid需要jQuery的支持。官方说要”jQuery library, version 1.3 or later“。另外，官方说还要”Your choice of a jQuery UI theme“。嗯，它说的是一个jQuery UI主题，所以在官方给的例子里，没有引用jquery-ui.js。

官方给的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>My First Grid</title> <!--Your choice of a jQuery UI theme--> <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /> <!--jqGrid自身的样式表--> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> <!--jQuery library, version 1.3 or later--> <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <!--jqGrid的语言包--> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> <!--jqGrid--> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> </head> <body> </body> </html>

官方给的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
<!--Your choice of a jQuery UI theme-->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
<!--jqGrid自身的样式表-->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<!--jQuery library, version 1.3 or later-->
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<!--jqGrid的语言包-->
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<!--jqGrid-->
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

　　除了以上代码里提到的CSS文件和JS文件，还有一个images文件夹，是在下载的UI主题里自带的，是和jquery-ui-1.7.1.custom.css在同一目录下的，记着别漏下。

jQuery.jqGrid的工作环境

　　我是这么理解的，jqGrid生成的网格要指定输出到哪个容器，这个容器必须是个<table>容器，官网上说“The definition of the grid is done via the HTML tag <table>”，并且，一定要给它定义id属性，官网上也特意做了强调“The table should have an ID that is unique in the HTML document. In the example above, it is “#list”. This ID is important because you'll need it for grid functions. ”，此 ID 很重要，因为您将需要它来执行网格功能。“Cellspacing, cellpadding and border attributes are added by jqGrid and should not be included in the definition of your table.”，Cellspacing、cellpadding、border这些属性由jqGrid添加，不要在<table>标签里定义。随后的<div>标签，用来存放这个jqGrid的导航层的，可以放在HTML文档的任何位置，一般是紧随着<table>标签，并且必须有唯一的id。

<table id="list"></table>
<div id="pager"></div>

　　容器定义结束，接下来定义往容器里装什么内容。基本语法是："jQuery("#grid_id").jqGrid(options);"，官网上说jqGrid是一个javaScript object，具有属性、事件、方法，其中属性可以是字符串、数值、布尔值，甚至可以是其它对象。以下代码也是从官网上抄来的。

 $("#list").jqGrid({
        url: "example.php",//请求的后台地址
        datatype: "xml",//数据类型
        mtype: "GET",
        colNames: ["Inv No", "Date", "Amount", "Tax", "Total", "Notes"],//列名
        colModel: [
            { name: "invid", width: 55 },
            { name: "invdate", width: 90 },
            { name: "amount", width: 80, align: "right" },
            { name: "tax", width: 80, align: "right" },
            { name: "total", width: 80, align: "right" },
            { name: "note", width: 150, sortable: false }
//name:列名称，
//index:传递给服务器的，要对数据进行排序的名称
//width:宽度
//sortable:可排序的
        ],
        pager: "#pager",//导航层的ID。
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: "invid",
        sortorder: "desc",
        viewrecords: true,
        gridview: true,
        autoencode: true,
        caption: "My first grid"
    });

　　比较基本语法来看，option指的是jqGrid()里用{}这一部份吧，关于option，官网给出了相对应的说明文档：wiki:options - jqGrid Wiki。

　　嗯。写到这儿，当然不算完，只是我想先去我的项目里实践一下。请期待我（可能）的更新。

rarenmen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery.jqGrid

　　相信看到这文章的小伙伴，大多和我一样，手里的项目用到过它。并且已经能够在开发新功能或者修改现有功能的时候照猫画虎的使用它，依然觉得对它不太了解，想更深入的了解它的，我就是抱着这么样的心态，来记录了我跟随官方文档学习的过程，希望对有同样需求的小伙伴有所帮助。　　这个问题看起来很无聊的。jqGrid不就是负责把获得过来的信息以表格的形式展示到界面里的JS控件嘛。确实，这个控件就是负责干这事儿的。它官方的WIKI上是这么写的，汉字部份是来自度娘的翻译。jqGrid is an Ajax-enabled Jav
复制链接

扫一扫