jqGrid 参数详解

2023-11-03 02:32
文章标签 参数 详解 jqgrid

本文主要是介绍jqGrid 参数详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、 jqGrid的加载。

1.引用相关头文件

引入CSS：

<link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />

<link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />

引入JS：

<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>

<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>

<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>

<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

因为jqGrid3.6及以后的版本集成了jQuery UI，所以，此处需要导入UI相关js和css。另外grid.locale-en.js这个语言文件必须在jquery.jqGrid.min.js之前加载，否则会出问题。

2.将jqgrid加入页面中

根据jqGrid的文档，要想生成一个jqGrid，最直接的方法就是：

$("#list").jqGrid(options);

其中list是页面上的一个table：<table id="list"></table>

下面是一个简单的例子：

<span style="font-size: 18px;"><script type=<span class="str" style="color: rgb(0, 96, 128);">"text/javascript"</span>></span>
 
<span style="font-size: 18px;">$(document).ready(<span class="kwrd" style="color: rgb(0, 0, 255);">function</span> () {</span>
 
<span style="font-size: 18px;">jQuery(<span class="str" style="color: rgb(0, 96, 128);">"#list"</span>).jqGrid({</span>
 
<span style="font-size: 18px;">url: <span class="str" style="color: rgb(0, 96, 128);">'Handler.ashx'</span>,</span>
 
<span style="font-size: 18px;">datatype: <span class="str" style="color: rgb(0, 96, 128);">"json"</span>,</span>
 
<span style="font-size: 18px;">mtype: <span class="str" style="color: rgb(0, 96, 128);">'GET'</span>,</span>
 
<span style="font-size: 18px;">colNames: [<span class="str" style="color: rgb(0, 96, 128);">'SalesReasonID'</span>, <span class="str" style="color: rgb(0, 96, 128);">'Name'</span>, <span class="str" style="color: rgb(0, 96, 128);">'ReasonType'</span>, <span class="str" style="color: rgb(0, 96, 128);">'ModifiedDate'</span>],</span>
 
<span style="font-size: 18px;">colModel: [</span>
 
<span style="font-size: 18px;">{ name: <span class="str" style="color: rgb(0, 96, 128);">'SalesReasonID'</span>, index: <span class="str" style="color: rgb(0, 96, 128);">'SalesReasonID'</span>, width: 40, align: <span class="str" style="color: rgb(0, 96, 128);">"left"</span>, editable: <span class="kwrd" style="color: rgb(0, 0, 255);">true</span> },</span>
 
<span style="font-size: 18px;">{ name: <span class="str" style="color: rgb(0, 96, 128);">'Name'</span>, index: <span class="str" style="color: rgb(0, 96, 128);">'Name'</span>, width: 100, align: <span class="str" style="color: rgb(0, 96, 128);">"center"</span> },</span>
 
<span style="font-size: 18px;">{ name: <span class="str" style="color: rgb(0, 96, 128);">'ReasonType'</span>, index: <span class="str" style="color: rgb(0, 96, 128);">'ReasonType'</span>, width: 100, align: <span class="str" style="color: rgb(0, 96, 128);">"center"</span> },</span>
 
<span style="font-size: 18px;">{ name: <span class="str" style="color: rgb(0, 96, 128);">'ModifiedDate'</span>, index: <span class="str" style="color: rgb(0, 96, 128);">'ModifiedDate'</span>, width: 150, align: <span class="str" style="color: rgb(0, 96, 128);">"center"</span>, search: <span class="kwrd" style="color: rgb(0, 0, 255);">false</span> }</span>
 
<span style="font-size: 18px;">],</span>
 
<span style="font-size: 18px;">rowList: [10, 20, 30],</span>
 
<span style="font-size: 18px;">sortname: <span class="str" style="color: rgb(0, 96, 128);">'SalesReasonID'</span>,</span>
 
<span style="font-size: 18px;">viewrecords: <span class="kwrd" style="color: rgb(0, 0, 255);">true</span>,</span>
 
<span style="font-size: 18px;">sortorder: <span class="str" style="color: rgb(0, 96, 128);">"desc"</span>,</span>
 
<span style="font-size: 18px;">jsonReader: {</span>
 
<span style="font-size: 18px;">root: <span class="str" style="color: rgb(0, 96, 128);">"griddata"</span>,</span>
 
<span style="font-size: 18px;">total: <span class="str" style="color: rgb(0, 96, 128);">"totalpages"</span>,</span>
 
<span style="font-size: 18px;">page: <span class="str" style="color: rgb(0, 96, 128);">"currpage"</span>,</span>
 
<span style="font-size: 18px;">records: <span class="str" style="color: rgb(0, 96, 128);">"totalrecords"</span>,</span>
 
<span style="font-size: 18px;">repeatitems: <span class="kwrd" style="color: rgb(0, 0, 255);">false</span></span>
 
<span style="font-size: 18px;">},</span>
 
<span style="font-size: 18px;">pager: jQuery(<span class="str" style="color: rgb(0, 96, 128);">'#pager'</span>),</span>
 
<span style="font-size: 18px;">rowNum: 5,</span>
 
<span style="font-size: 18px;">altclass: <span class="str" style="color: rgb(0, 96, 128);">'altRowsColour'</span>,</span>
 
<span class="rem" style="color: rgb(0, 128, 0);"><span style="font-size: 18px;">//width: 'auto',</span></span>
 
<span style="font-size: 18px;">width: <span class="str" style="color: rgb(0, 96, 128);">'500'</span>,</span>
 
<span style="font-size: 18px;">height: <span class="str" style="color: rgb(0, 96, 128);">'auto'</span>,</span>
 
<span style="font-size: 18px;">caption: <span class="str" style="color: rgb(0, 96, 128);">"DemoGrid"</span></span>
 
<span style="font-size: 18px;">}).navGrid(<span class="str" style="color: rgb(0, 96, 128);">'#pager'</span>, { add: <span class="kwrd" style="color: rgb(0, 0, 255);">true</span>, edit: <span class="kwrd" style="color: rgb(0, 0, 255);">true</span>, del: <span class="kwrd" style="color: rgb(0, 0, 255);">true</span>,search:<span class="kwrd" style="color: rgb(0, 0, 255);">false</span>,refresh:<span class="kwrd" style="color: rgb(0, 0, 255);">false</span> }); ;</span>
 
<span style="font-size: 18px;">})</span>

二、 jqgrid的重要选项

具体的options参考，可以访问jqGrid文档关于option的章节（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有几个是比较常用的，重点介绍一下：

  • url ：jqGrid控件通过这个参数得到需要显示的数据，具体的返回值可以使XML也可以是Json。
  • datatype ：这个参数用于设定将要得到的数据类型。类型包括：json 、xml、xmlstring、local、javascript、function。
  • mtype : 定义使用哪种方法发起请求，GET或者POST。
  • height ：Grid的高度，可以接受数字、%值、auto，默认值为150。
  • width ：Grid的宽度，如果未设置，则宽度应为所有列宽的之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置，进行设置。
  • shrinkToFit ：此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条。
  • autowidth ：默认值为false。如果设为true，则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段；如果当父容器尺寸变化了，同时也需要变化Grid的尺寸的话，则需要在自己的代码中调用setGridWidth方法来完成。
  • pager ：定义页码控制条Page Bar，在上面的例子中是用一个div(<div id=”pager”></div>)来放置的。
  • sortname ：指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到Server端。
  • viewrecords ：设置是否在Pager Bar显示所有记录的总数。
  • caption ：设置Grid表格的标题，如果未设置，则标题区域不显示。
  • rowNum ：用于设置Grid中一次显示的行数，默认值为20。正是这个选项将参数rows（prmNames中设置的）通过url选项设置的链接传递到Server。注意如果Server返回的数据行数超过了rowNum的设定，则Grid也只显示rowNum设定的行数。
  • rowList ：一个数组，用于设置Grid可以接受的rowNum值。例如[10,20,30]。
  • colNames ：字符串数组，用于指定各列的题头文本，与列的顺序是对应的。
  • colModel ：最重要的数组之一，用于设定各列的参数。（稍后详述）
  • prmNames ：这是一个数组，用于设置jqGrid将要向Server传递的参数名称。（稍后详述）
  • jsonReader ：这又是一个数组，用来设定如何解析从Server端发回来的json数据。（稍后详述）

2.1 prmNames选项

prmNames是jqGrid的一个重要选项，用于设置jqGrid将要向Server传递的参数名称。其默认值为：

prmNames : {

page:"page", // 表示请求页码的参数名称

rows:"rows", // 表示请求行数的参数名称

sort: "sidx", // 表示用于排序的列名的参数名称

order: "sord", // 表示采用的排序方式的参数名称

search:"_search", // 表示是否是搜索请求的参数名称

nd:"nd", // 表示已经发送请求的次数的参数名称

id:"id", // 表示当在编辑数据模块中发送数据时，使用的id的名称

oper:"oper", // operation参数名称

editoper:"edit", // 当在edit模式中提交数据时，操作的名称

addoper:"add", // 当在add模式中提交数据时，操作的名称

deloper:"del", // 当在delete模式中提交数据时，操作的名称

subgridid:"id", // 当点击以载入数据到子表时，传递的数据名称

npage: null,

totalrows:"totalrows" // 表示需从Server得到总共多少行数据的参数名称，参见jqGrid选项中的rowTotal

}

2.2 jsonReader选项

jsonReader是jqGrid的一个重要选项，用于设置如何解析从Server端发回来的json数据，如果Server返回的是xml数据，则对应的使用xmlReader来解析。jsonReader的默认值为：

jsonReader : {

root: "rows", // json中代表实际模型数据的入口

page: "page", // json中代表当前页码的数据

total: "total", // json中代表页码总数的数据

records: "records", // json中代表数据行总数的数据

repeatitems: true, // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。

cell: "cell",

id: "id",

userdata: "userdata",

subgrid: {

root:"rows",

repeatitems: true,

cell:"cell"

}

}

假如有下面一个json字符串：

{"totalpages":"3","currpage":"1","totalrecords":"11","griddata":[{"SalesReasonID":"1","Name":"Price","ReasonType":"Other","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"2","Name":"On Promotion","ReasonType":"Promotion","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"3","Name":"Magazine Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"4","Name":"Television Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"5","Name":"Manufacturer","ReasonType":"Other","ModifiedDate":"1998年6月1日"}]}

其对应的jsonReader为：jsonReader: {

root: "griddata",

total: "totalpages",

page: "currpage",

records: "totalrecords",

repeatitems: false

}

注：cell、id在repeatitems为true时可以用到，即每一个记录是由一对id和cell组合而成，即可以适用另一种json结构。援引文档中的例子：

repeatitems为true时：

jQuery("#gridid").jqGrid({  

     ...  

     jsonReader : {  

         root:"invdata",  

         page: "currpage",  

         total: "totalpages",  

         records: "totalrecords"

     },  

     ...  

});  

json结构为：

{   

"totalpages": "xxx",   

"currpage": "yyy",  

"totalrecords": "zzz",  

"invdata" : [  

                  {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},   // cell中不需要各列的name，只要值就OK了，但是需要保持对应

                  {"id" :"2", "cell" :["cell21", "cell22", "cell23"]},  

                  ...  

     ]  

}  

repeatitems为false时：

jQuery("#gridid").jqGrid({  

     ...  

     jsonReader : {  

         root:"invdata",  

         page: "currpage",  

         total: "totalpages",  

         records: "totalrecords",  

         repeatitems: false,  

         id: "0"

     },  

     ...  

});  

json结构为：

{   

"totalpages" : "xxx",   

"currpage" : "yyy",  

"totalrecords" : "zzz",  

"invdata" : [  

                 {"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 数据中需要各列的name，但是可以不按列的顺序

                  {"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},  

                  ...  

     ]  

}  

2.3 colModel的重要选项

colModel也有许多非常重要的选项，在使用搜索、排序等方面都会用到。这里先只说说最基本的。

  • name ：为Grid中的每个列设置唯一的名称，这是一个必需选项，其中保留字包括subgrid、cb、rn。
  • index ：设置排序时所使用的索引名称，这个index名称会作为sidx参数（prmNames中设置的）传递到Server。
  • label ：当jqGrid的colNames选项数组为空时，为各列指定题头。如果colNames和此项都为空时，则name选项值会成为题头。
  • width ：设置列的宽度，目前只能接受以px为单位的数值，默认为150。
  • sortable ：设置该列是否可以排序，默认为true。
  • search ：设置该列是否可以被列为搜索条件，默认为true。
  • resizable ：设置列是否可以变更尺寸，默认为true。
  • hidden ：设置此列初始化时是否为隐藏状态，默认为false。
  • formatter ：预设类型或用来格式化该列的自定义函数名。常用预设格式有：integer、date、currency、number等（具体参见文档 ）。

三、 注意事项

1. 动态改变Add Form或者Edit Form中的select的内容，如：改变下图中的Comparator下拉中的内容。

clip_image002

$("#list_d").navGrid('#pager_d',{add:true,edit:true,del:true,search:false,refresh:false},

{

checkOnSubmit:false, closeAfterEdit: true,recreateForm:true,

beforeInitData:function(formid){

initComparator();

},

beforeShowForm: function(formid){

$("#list_d").jqGrid('setColProp', 'Name', { editrules:{required:false},});

$('#tr_Name', formid).hide();

}

}，//edit

{},//add

{}//del

）

beforeInitData, beforeShowForm在每次点击编辑的时候都会执行。initComparator的作用是通过ajax获取数据，然后利用$("#list_d").jqGrid('setColProp', 'Comparator', { editoptions: { value: valueString} });来设置Comparator下拉中的内容。其中valueString的格式如下’ equal to: equal to; not equal to: not equal to’。键值之间用冒号隔开，2项之间用分号隔开。注意：把recreateForm设为true，否则'setColProp'只在第一次调用时有效。

2. var rowNum = parseInt($(this).getGridParam("records"), 10); 得到数据条数。

3. jQuery("#list_d").clearGridData();清空数据。

4. jQuery("#list").getCell(ids,"Key");获取第ids行的key列。

5. $("#list").jqGrid('setSelection', "1");选中第一行。放在loadComplete：中在gird加载完成的时候自动选中第一行。loadComplete:function(data){$("#list").jqGrid('setSelection', "1");

}

6. 对于像1中的可编辑的字段，可以设定rule，参见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules

7. 修改Option，以URL为例

jQuery("#list_d").jqGrid('setGridParam',{url:"xxx.aspx",page:1}).trigger('reloadGrid');

这篇关于jqGrid 参数详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/334983。

相关文章

Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人，AI大神Andrej Karpathy，曾是OpenAI联合创始人之一，特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ，宣布将长期致力于AI原生教育。 近日，Andrej Karpathy接受了No Priors（投资博客）的采访，与硅谷知名投资人 Sara Guo 和 Elad G
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
4B参数秒杀GPT-3.5：MiniCPM 3.0惊艳登场！

4B参数秒杀GPT-3.5：MiniCPM 3.0惊艳登场！

​ 面壁智能 在 AI 的世界里，总有那么几个时刻让人惊叹不已。面壁智能推出的 MiniCPM 3.0，这个仅有4B参数的"小钢炮"，正在以惊人的实力挑战着 GPT-3.5 这个曾经的AI巨人。 MiniCPM 3.0 MiniCPM 3.0 MiniCPM 3.0 目前的主要功能有： 长上下文功能：原生支持 32k 上下文长度，性能完美。我们引入了
阅读更多...
6.1.数据结构-c/c++堆详解下篇（堆排序，TopK问题）

6.1.数据结构-c/c++堆详解下篇（堆排序，TopK问题）

上篇：6.1.数据结构-c/c++模拟实现堆上篇（向下，上调整算法，建堆，增删数据）-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小)： 2.2 C语言代码（手写堆） 2.3 C++代码（使用优先级队列 priority_queue）
阅读更多...
K8S（Kubernetes）开源的容器编排平台安装步骤详解

K8S（Kubernetes）开源的容器编排平台安装步骤详解

K8S（Kubernetes）是一个开源的容器编排平台，用于自动化部署、扩展和管理容器化应用程序。以下是K8S容器编排平台的安装步骤、使用方式及特点的概述： 安装步骤： 安装Docker：K8S需要基于Docker来运行容器化应用程序。首先要在所有节点上安装Docker引擎。 安装Kubernetes Master：在集群中选择一台主机作为Master节点，安装K8S的控制平面组件，如AP
阅读更多...
AI(文生语音)-TTS 技术线路探索学习:从拼接式参数化方法到Tacotron端到端输出

AI(文生语音)-TTS 技术线路探索学习:从拼接式参数化方法到Tacotron端到端输出

AI(文生语音)-TTS 技术线路探索学习:从拼接式参数化方法到Tacotron端到端输出 在数字化时代，文本到语音（Text-to-Speech, TTS）技术已成为人机交互的关键桥梁，无论是为视障人士提供辅助阅读，还是为智能助手注入声音的灵魂，TTS 技术都扮演着至关重要的角色。从最初的拼接式方法到参数化技术，再到现今的深度学习解决方案，TTS 技术经历了一段长足的进步。这篇文章将带您穿越时
阅读更多...
嵌入式Openharmony系统构建与启动详解

嵌入式Openharmony系统构建与启动详解

大家好，今天主要给大家分享一下，如何构建Openharmony子系统以及系统的启动过程分解。 第一：OpenHarmony系统构建      首先熟悉一下，构建系统是一种自动化处理工具的集合，通过将源代码文件进行一系列处理，最终生成和用户可以使用的目标文件。这里的目标文件包括静态链接库文件、动态链接库文件、可执行文件、脚本文件、配置文件等。      我们在编写hellowor
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2