JQUERY插件JQGRID常用属性说明
jqgrid cellattr用法
jqgrid cellattr用法jqGrid列设定CellAttr所有的jqGrid列都可以通过CellAttr设定。
CellAttr包含很多有用的选项，如：rowspan、colspan、title、style等等，通过它们可以对表格中每个单元格进行设定，提高表格的可读性和易用性。
1. rowspan，合并行rowspan是一个十分常用的功能，他可以让您合并Grid中的单元格，使得用户在看到表格时能清楚地看到事项的分组情况。
具体用法如下：function rowSpan(rowId, cellValue, rowObject) {if (cellValue == 0) {return ' rowspan='2'';}}在colModel中加入以上代码：{na'name', index:'name', width:200, cellattr: rowSpan}, 2. colspan，合并列colspan功能与rowspan相似，合并Grid中的单元格，使得用户在看到表格时清楚地看到列的分组情况。
具体用法如下：function colSpan(rowId, cellValue, rowObject) {if (cellValue == 0) {return ' colspan='2'';}}在colModel中加入以上代码：{na'name', index:'name', width:200, cellattr: colSpan}, 3. title，文字提示title功能主要是添加一个文字提示，当用户将鼠标放在单元格上时可以显示出一个提示文字。
具体用法如下：function showTitle(rowId, cellValue, rowObject) {return ' title='这里是提示的文字'';}在colModel中加入以上代码：{na'name', index:'name', width:200, cellattr: showTitle}, 4. style，样式调整style功能主要是可以对单元格进行样式调整，使表格得以更合理地显示。
jqGrid表格底部汇总、合计行footerrow处理
jqGrid表格底部汇总、合计⾏footerrow处理jqGrid提供了表格底部汇总、合计⾏功能，我们先看下user-guide关于jqGrid合计⾏都有哪些说明？然后再看个DEMO，看看jqGrid表格底部汇总、合计⾏到底如何实现。
1、user-guide关于jqGrid合计⾏的说明1）表格配置：footerrow, boolean, 默认falseIf set to true this will place a footer table with one row below the gird records and above the pager. The number of columns equal those specified in colModel表格是否显⽰底部合计⾏。
2）表格配置：userDataOnFooter，boolean，默认falseWhen set to true we directly place the user data array userData in the footer if the footerrow parameter is set to true. The rules are as follows: If the userData array contains a name which matches any name defined in colModel, then the value is placed in that column. If there are no such values nothing is placed. Note that if this option is used we use the current formatter options (if available) for that column. See footerData method.如果设为true，则userData可以⽤来填充汇总⾏。
jqgrid分组条件
jqgrid分组条件jqGrid分组条件可以通过设置`grouping`和`groupingView`属性来实现。
下面是一种常见的设置分组条件的方法：```javascript$("#grid").jqGrid({url: "data.json", // 数据接口地址datatype: "json", // 数据类型colNames: ["ID", "姓名", "部门", "工资"], // 列名colModel: [{name: "id", index: "id", width: 50, sortable: false},{name: "name", index: "name", width: 100, sortable: true}, {name: "department", index: "department", width: 100, sortable: true},{name: "salary", index: "salary", width: 100, sortable: true} ],rowNum: 10, // 每页显示的记录数rowList: [10, 20, 30], // 可选择的每页记录数pager: "#pager", // 分页控件的idsortname: "name", // 默认按照姓名排序grouping: true, // 开启分组groupingView: { // 分组设置groupField: ["department"], // 按照部门进行分组groupColumnShow: [true], // 显示分组列groupText: ["<b>{0}</b>"], // 分组列显示的文本格式，可自定义groupCollapse: false, // 分组是否默认展开groupOrder: ["asc"], // 分组列的排序方式groupSummary: [false] // 是否在分组行显示汇总数据},caption: "员工信息" // 表格标题});```以上示例中，通过设置`groupField`为`["department"]`，即按照部门字段进行分组。
jQueryjqGrid中ColModel的参数大全(详解带实例)(精)
jQuery jqGrid中 ColModel 的参数大全(详解带实例 (2012-03-28 10:53:46转载▼标签: jquery jqgrid colmodel的参数大全详解 demo 实例杂谈分类: WEB技术ColModel 是 jqGrid 里最重要的一个属性,设置表格列的属性。
用法:Java 代码jQuery("#gridid".jqGrid({...colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],...};属性数据类型备注默认值align string 定义单元格对齐方式;可选值:left, center, right. leftclasses string 设置列的 css 。
多个 class 之间用空格分隔, 如:'class1 class2' 。
表格默认的 css 属性是 ui-ellipsis empty stringdatefmt string 对日期列进行格式化。
” /” , ” -” , and ” . ” 都是有效的日期分隔符。
y,Y,yyyy 年 YY, yy 月 m,mm for monthsd,dd 日 . ISO Date (Y-m-ddefval string 查询字段的默认值空editable boolean 单元格是否可编辑 falseeditoptions array 对列进行编辑时设置的一些属性 empty arrayeditrules array 对于可编辑单元格的一些额外属性设置 empty arrayedittype string 可以编辑的类型。
可选值:text, textarea, select, checkbox, password, button, image and file. textfixed boolean 列宽度是否要固定不可变 falseformoptions array 对于 form 进行编辑时的属性设置 emptyformatoptions array 对某些列进行格式化的设置 noneformatter mixed 对列进行格式化时设置的函数名或者类型 nonehidedlg boolean 是否显示或者隐藏此列 falsehidden boolean 在初始化表格时是否要隐藏此列 falseindex string 当排序时定义排序字段名称的索引,参数名为 sidx empty stringjsonmap string 定义了返回的 json 数据映射 nonekey boolean 当从服务器端返回的数据中没有 id 时,将此作为唯一 rowid 使用,默认只能有一个 id 属性 falselabel string 如果 colNames 为空则用此值来作为列的显示名称,如果都没有设置则使用 name 值 nonename string 必输项, 表格列的名称, 所有关键字, 保留字都不能作为名称使用包括 subgrid, cb and rn. Requiredresizable boolean 是否可以被 resizable truesearch boolean 在搜索模式下,定义此列是否可以作为搜索列 truesearchoptions array 设置搜索参数 emptysortable boolean 是否可排序 truesorttype string 用在当 datatype 为 local 时,定义搜索列的类型,可选值:int/integer - 对 integer 排序 float/number/currency - 排序数字 date - 排序日期 text - 排序文本 text stype string 定义搜索元素的类型 textsurl string 搜索数据时的 url empty stringwidth number 默认列的宽度,只能是象素值,不能是百分比 150xmlmap string 定义当前列跟返回的 xml 数据之间的映射关系 noneunformat function ‘ unformat ’ 单元格值 null有一些参数当表格初始化完成后是不能被修改的:namewidthresizablelabel (method avail.例子:$("#grid1".xgrid({url:{url:'../data/json-grid-standard.htm',pageSize:'10',currentPage:'1'},// 列表数据colModel:[{"display":"序号","width":"20","align":"center","sortable":"false","name":"xuhao"},{"display":"登陆ID","width":32,"align":"center","sortable":"true","name":"LOGIN_ID"},{"display":"姓名 ","width":32,"align":"center","sortable":"true","name":"XM"}, {"display":"组织机构","width":32,"align":"left","sortable":"true","name":"ORG_ID"},{"display":"区域","width":32,"align":"center","sortable":"true","name":"REGION_ID"},{"display":"日期","width":32,"align":"center","sortable":"true","name":"DATE"},{"display":"是否删除","width":32,"align":"center","sortable":"true","name":"ISDEL","hide":"true"} ], //列表结构配置title:'列表控件 ',searchitems:[{"display":"登陆 ID","name":"LOGIN_ID"},{"display":"姓名 ","name":"XM"},{"display":"时间 ","name":"ORG_ID"},{"display":"日期 ","name":"DATE"},{"display":"区域代码 ","name":"REGION_DM"}],//列表中搜索的条件项width:800,callback:function({ alert('列表初始化完成后,执行回调 ' }, searchMode:true //搜索模式,初始化时不加载数据并隐藏列表};。
jqgrid-colmodel参数
ColModel APIcolModel 属性定义属性数组的单个网格列。
这是最重要的部分，在jqGrid 的。
语法：jQuery 的（“＃gridid” ） 。
jqGrid 的（{ ...colModel ： [ { 名：“NAME1” ，指数：指数1 ... } ， { ... } ， ... ] ... } ） ;可用的colModel 属性都列在这里，按字母顺序排列。
只需要属性的名称。
colModel 选项可以获取或设置使用getColProp 和setColProp 1）方法- 方法。
Property Type 描述默认alignstring定义体层中的单元格的对齐方式，而不是在标题单元格。
可能的值：左，居中，右。
离开cellattrfunction 此功能属性添加到该单元格的创建过程中的数据-即动态。
例如，所有的有效属性的表格单元格可用于具有不同的属性或样式属性。
该函数返回字符串。
参数传递给这个函数 的RowId -行的id 值 -值将被添加在细胞rawObject -原始的数据行的对象-即如果数据类型为JSON -阵列，如果数据类型是XML XML 节点。
厘米 -此列的所有属性列在colModel RDATA -行会被插入的数据行。
这个参数是数组类型的名称：值，其中的名称是在colModel 空classesstring 此选项允许将类的列。
如果一个以上的类将被使用的空间应该被设置。
例如类：1级2级的设置Class1和Class2在该列上的每一个细胞。
在网格中的CSS 有一个预定义类的UI省略号，允许附加的特定行的省略号。
此外，这也将在Firefox 。
空字符串datefmtstring 治格式的sorttype ：日期（当设置为本地datetype ）和editrules 日期：真正}字段。
确定的预期日期格式该列。
使用一个PHP 的日期格式。
目前支持“/”，“ - ”和“。
”作为日期分隔符。
jqGrid参数
ajaxGridOptions
object
本选项用来设置全局的Ajax设置。注意：这个选项会覆盖当前所有的ajax设置，包括ajax的error、complete以及beforeSend事件。
默认值:empty object
该属性可以修改
该属性不能修改
hidegrid
boolean
设置grid的隐藏/显示按钮是否可用。
默认值:true
该属性不能修改
hoverrows
boolean
设置为false，在grid的数据行中鼠标悬浮被禁用。
默认值:false
默认值:false
该属性不能修改
forceFit
boolean
如果设置为true，并且用户改变了列宽度，那么右边临近的列宽度会自动调整以适应grid的整体宽度。这种情况下，是没有水平滚动条的。
注意：本选项与shrinkToFit选项不相容。如果shrinkToFit设置为false，那么forceFit的设置将被忽略。
direction
string
确定grid中文本显示的方向。默认ltr表示从左道右。还有一个可选值是rtl表示从右到左。
本选项只在FireFox 3.x和IE >=6的浏览器有效。当前Safai和Google Chrome、Opera不完全支持“rtl”。FireFox默认设置是不支持RTL的，但是可以通过修改FireFox的 layout.scrollbar.side设置为1来支持。本属性是在jqGrid v3.6版本中新增加的。
当然，使用也有限制，设置为true之后，不能使用treeGrid，subGrid或者afterInsertRow事件。
jqGrid选项配置
jqGrid选项配置 jqGrid选项配置属性默认从静态变量$.jgrid.defaults中加载。
英⽂版本的属性默认配置如下。
本⼈下载的jqGrid4.4.0⽰例中暂时不⽀持中⽂语⾔的语⾔包，所以要配置为中⽂语⾔，只能通过重写下⾯表格列出的属性来实现。
语⾔配置⽂件在demo⽬录js/i18n这个⽂件夹下，要改为其他语⾔加载对应的js语⾔配置⽂件即可。
[javascript]view plaincopy1. $.jgrid = {2. defaults : {3. recordtext: "View {0} - {1} of {2}",4. emptyrecords: "No records to view",5. loadtext: "Loading...",6. pgtext : "Page {0} of {1}"7. },8. //...9. }下⾯选项配置表格最后⼀列是否能改变指的是这个参数配置在jqGrid创建后是否能修改。
配置项类型描述默认值能否改变ajaxGridOptions object jqGrid使⽤ajax请求数据时的全局配置。
配置了这个对象可能会覆盖当前的jqueryajax配置，包括error，complete和beforeSend事件empty object YesajaxSelectOptions object⽤于配置editoptions或者searchoptions配置中select对象通过dataUrl动态获取⽤的。
empty object Yesaltclass string隔⾏显⽰的样式，只有当altRows参数设置为true时才起作⽤ui-priority-secondaryYes.RequiresreloadaltRows boolean 是否隔⾏显⽰。
说的⽩⼀些就是第⼀⾏显⽰⽩⾊背景，第⼆⾏蓝⾊背景，依次交替显⽰。
jqgrid的setcell对于动态列的使用 使用方法
jqgrid的setcell对于动态列的使用使用方法【最新版】目录1.jqgrid 简介2.setcell 的作用3.动态列的定义与使用4.setcell 在动态列中的应用实例5.总结正文1.jqgrid 简介jqgrid 是一款基于 jQuery 的表格插件，它可以方便地实现数据的展示、编辑、排序、分页等功能。
在许多 Web 应用中，jqgrid 都是一个理想的选择，因为它可以节省大量的开发时间，提供丰富的功能，以及优秀的用户体验。
2.setcell 的作用在 jqgrid 中，setcell 方法用于设置单元格的值。
它接受三个参数：行号、列名和值。
通过这个方法，我们可以动态地修改表格中的数据，以满足不同的业务需求。
3.动态列的定义与使用动态列是 jqgrid 中的一种特殊列，它的内容是根据其他列的值计算生成的。
动态列在数据处理和展示方面具有很大的灵活性。
要定义一个动态列，我们需要在 colModel 中指定一个函数，该函数会根据当前行的数据返回动态列的值。
例如，我们可以定义一个计算总价的动态列，它的值是数量和单价的乘积。
定义如下：```javascriptcolModel: [{name: "数量", index: "quantity", width: 80},{name: "单价", index: "unitPrice", width: 80},{name: "总价", index: "totalPrice", width: 80,formatter: function(cellvalue, options, row) {return cellvalue.quantity * cellvalue.unitPrice;}}```4.setcell 在动态列中的应用实例假设我们有一个 jqgrid 表格，其中包含一个动态列（如上例中的“总价”）。
jqGrid超详细属性说明
jqGrid超详细属性说明1.jqGrid Options<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"/TR/xhtml1/DTD/xhtml1-transitional.dtd>声明了文档的根元素是 html，它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Transitional//EN" 的DTD 中进行了定义。
浏览器将明白如何寻找匹配此公共标识符的 DTD。
如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。
另外，需要知道的是，HTML 4.01 规定的三种文档类型、XHTML 1.0 规定的三种 XML 文档类型都是：Strict、Transitional 以及 Frameset。
而这句<html xmlns="/1999/xhtml">，是在文档中的<html> 标签中使用 xmlns 属性，以指定整个文档所使用的主要命名空间。
对于文档声明，了解这些就足够了，现在的html5不再这么繁琐，只需要：<!DOCTYPE html><html>就可以了。
1.1.options 参数1.1.1.colModel设定各列的参数1.1.2.groupingView分组设置1.1.3.groupingView分组设置1.1.4.groupingView分组设置2.方法Methods 2.1.addRowData编辑行2.2.editRow 编辑行3.事件4.方法4.1.1.getGridParamsetGridParam4.1.2.编辑栏编辑框j Query("#list2").jqGrid('navGrid','#pager2',{ edit:true, add:true, del:true},{//edit ----------------------------------这里注意 edit ,add ,del 的顺序，默认的这个顺序，好像是不能改的//afterShowForm:afterShowEdit,afterSubmit:processAddEdit ,//beforeSubmit:validateData,closeAfterAdd:true,closeAfterEdit:true,reloadAfterSubmit:true},{//add //afterShowForm:afterShowAdd, afterSubmit:processAddEdit ,//beforeSubmit:validateData,closeAfterAdd:true,closeAfterEdit:true},{//del}//{view:true})/* .navButtonAdd('#pager2',{caption:'Add',onClickButton:function(){alert('i am button');}});*/});function afterShowEdit(formId){//do stuff after the form is rendered}function afterShowAdd(formId){}1.获得当前列表行数：$("#gridid").getGridParam("reccount");2.获取选中行数据（json）：$("#gridid").jqGrid('getRowData', id);3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData:''}).trigger('reloadGrid');4.选中行：$("#jqGrid").setSelection("1", true); （Toggles a selection of the row with id = rowid; if onselectrow is true (the default) then the event onSelectRow is launched, otherwise it is not.）//true:重新加载表格数据, false:不重新加载表格数据5.重置选中行：$("#jqgrid").resetSelection(); //Resets (unselects) the selected row(s). Also works in multiselect mode.6.清除：$("#jqgrid").clearGridData(); //Clears the currently loaded data from grid. If the clearfooter parameter is set to true, the method clears the data placed on the footer row.7. $("#jqgrid").setCell(rowid,colname,nData,cssp,attrp);//This method can change the content of particular cell and can set class or style properties. Where:rowid the id of the row,colname the name of the column (this parameter can be a number (the index of the column) beginningfrom 0data the content that can be put into the cell. If empty string the content will not be changed class if class is string then we add a class to the cell using addClass; if class is an array we set the new css properties via cssproperties sets the attribute properies of the cell,forceup If the parameter is set to true we perform update of the cell instead that the value is empty8.获取选中行IDvar rowid = $("#jqgrid").jqGrid('getGridParam','selrow');var rowid = $("#searchResultList").getGridParam("selrow");var rowData = $("#searchResultList").getRowData(rowid); /根据行ID，获取选中行的数据(根据) prmNames是jqGrid的一个重要选项，用于设置jqGrid将要向Server传递的参数名称。
Jquery Jqgrid使用手册
一、电子信息技术 (2)（一）软件.................................................................................................... 错误！未定义书签。
（二）微电子技术 ...................................................................................... 错误！未定义书签。
（三）计算机及网络技术 ............................................................................ 错误！未定义书签。
（四）通信技术............................................................................................ 错误！未定义书签。
（五）广播电视技术 .................................................................................. 错误！未定义书签。
（六）新型电子元器件 ................................................................................ 错误！未定义书签。
（七）信息安全技术 .................................................................................... 错误！未定义书签。
（八）智能交通技术 .................................................................................... 错误！未定义书签。
jqgrid column resize -回复
jqgrid column resize -回复中括号内的主题是"[jqgrid column resize]"，本文将一步一步回答关于jqGrid列大小调整的问题。
第一步：介绍jqGrid和列调整功能jQuery Grid（此处简称jqGrid）是基于jQuery的一个功能强大的开源表格插件，用于显示、编辑和操作数据。
它在网页开发中广泛使用，因其丰富的功能和灵活的配置而备受欢迎。
其中一项重要功能是允许用户调整列的大小，以适应不同的数据内容和显示需求。
第二步：了解jqGrid列调整的基本知识在使用jqGrid时，可以通过设置resizeModel属性启用列调整功能。
resizeModel有两种模式可供选择：'none'（默认）和'resizable'。
当设置为'resizable'时，用户可以通过拖动列边缘来改变列的宽度。
第三步：配置jqGrid以启用列调整功能首先，我们需要在HTML页面中引入jQuery库和jqGrid插件的相关文件。
然后，通过JavaScript代码来定义和配置jqGrid的各个参数，其中包括启用列调整功能的设置。
以下是一个示例配置，演示如何启用列调整功能：("#grid").jqGrid({其他配置参数...resizeModel: 'resizable',autowidth: true,shrinkToFit: false,});在上述示例中，resizeModel被设置为'resizable'，以启用列调整功能。
autowidth被设置为true，表明表格宽度将自动调整为合适的大小。
shrinkToFit被设置为false，以防止列自动缩小以适应表格宽度。
第四步：自定义列调整的样式和行为默认情况下，jqGrid使用jQuery UI提供的可调整的边界样式。
jQuery jqGrid中ColModel的参数大全(详解带实例)
jQuery jqGrid中ColModel的参数大全（详解带实例） (2012-03-28 10:53:46)转载▼标签： jquery jqgrid colmodel的参数大全详解 demo 实例杂谈分类： WEB技术ColModel 是jqGrid里最重要的一个属性，设置表格列的属性。
用法：Java代码jQuery("#gridid").jqGrid({...colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],...});属性数据类型备注默认值align string 定义单元格对齐方式；可选值：left, center, right. leftclasses string 设置列的css。
多个class之间用空格分隔，如：'class1 class2' 。
表格默认的css 属性是ui-ellipsis empty stringdatefmt string 对日期列进行格式化。
”/”, ”-”, and ”.”都是有效的日期分隔符。
y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日. ISO Date (Y-m-d)defval string 查询字段的默认值空editable boolean 单元格是否可编辑 falseeditoptions array 对列进行编辑时设置的一些属性 empty arrayeditrules array 对于可编辑单元格的一些额外属性设置 empty arrayedittype string 可以编辑的类型。
可选值：text, textarea, select, checkbox, password, button, image and file. textfixed boolean 列宽度是否要固定不可变 falseformoptions array 对于form进行编辑时的属性设置 emptyformatoptions array 对某些列进行格式化的设置 noneformatter mixed 对列进行格式化时设置的函数名或者类型 nonehidedlg boolean 是否显示或者隐藏此列 falsehidden boolean 在初始化表格时是否要隐藏此列 falseindex string 当排序时定义排序字段名称的索引，参数名为sidx empty stringjsonmap string 定义了返回的json数据映射 nonekey boolean 当从服务器端返回的数据中没有id时，将此作为唯一rowid使用，默认只能有一个id属性 falselabel string 如果colNames为空则用此值来作为列的显示名称，如果都没有设置则使用name 值 nonename string 必输项，表格列的名称，所有关键字，保留字都不能作为名称使用包括subgrid, cb and rn. Requiredresizable boolean 是否可以被resizable truesearch boolean 在搜索模式下，定义此列是否可以作为搜索列 truesearchoptions array 设置搜索参数 emptysortable boolean 是否可排序 truesorttype string 用在当datatype为local时，定义搜索列的类型，可选值：int/integer - 对integer排序float/number/currency - 排序数字date - 排序日期text - 排序文本 text stype string 定义搜索元素的类型 textsurl string 搜索数据时的url empty stringwidth number 默认列的宽度，只能是象素值，不能是百分比 150xmlmap string 定义当前列跟返回的xml数据之间的映射关系 noneunformat function ‘unformat’单元格值 null有一些参数当表格初始化完成后是不能被修改的：namewidthresizablelabel (method avail.)例子：$("#grid1").xgrid({url:{url:'../data/json-grid-standard.htm',pageSize:'10',currentPage:'1'},// 列表数据colModel:[{"display":"序号","width":"20","align":"center","sortable":"false","name":"xuhao"},{"display":"登陆ID","width":32,"align":"center","sortable":"true","name":"LOGIN_ID"},{"display":"姓名","width":32,"align":"center","sortable":"true","name":"XM"}, {"display":"组织机构","width":32,"align":"left","sortable":"true","name":"ORG_ID"},{"display":"区域","width":32,"align":"center","sortable":"true","name":"REGION_ID"},{"display":"日期","width":32,"align":"center","sortable":"true","name":"DATE"},{"display":"是否删除","width":32,"align":"center","sortable":"true","name":"ISDEL","hide":"true"}], //列表结构配置title:'列表控件',searchitems:[{"display":"登陆ID","name":"LOGIN_ID"},{"display":"姓名","name":"XM"},{"display":"时间","name":"ORG_ID"},{"display":"日期","name":"DATE"},{"display":"区域代码","name":"REGION_DM"}],//列表中搜索的条件项width:800,callback:function(){ alert('列表初始化完成后，执行回调') },searchMode:true //搜索模式，初始化时不加载数据并隐藏列表});。
jQueryGrid入门指南（2）
jQueryGrid⼊门指南（2）上周以为已经把jqgrid 表格这部分已经搞得差不多了，没想到在实际⽤的时候，出现了不少问题，重新把这块知识整理⼀下。
问题⼀：设置表格的⾃动刷新问题的原因： 使⽤表格⾃带的增删改查的功能，编辑完数据后表中数据会刷新。
但是⼿写⽅法修改数据，例如模态框，修改完成后并不会在表中进⾏数据的刷新。
解决的办法： 在请求发送之后，模态框关闭之前使⽤jqgrid的reloadGrid。
$("#jqGrid").trigger("reloadGrid");问题⼆：表中⽇期的显⽰格式问题的原因： 当数据库中的字段是date类型时，直接将数据加载到表格中，显⽰得是⼀串数字，为时间的毫秒值。
解决的办法： 给字段后追加时间转换的⽅法{ label: '⽇期', name: 'birthday' ,align: 'center',editable: true, formatter:dateConvert }, 编写dateConvert⽅法function dateConvert(cellvalue){var times= new Date(cellvalue) ;date = times.toLocaleString();return date;}问题三：设置表中每⾏交替显⽰样式不同问题的原因： 在设置表格的属性altRows:true 后，表格的样式并没有发⽣改变解决的办法： 在添加altRows:true属性之后，还需要设置altclass来规定需要交替显⽰得样式altRows: true, //设置⾏交替样式altclass: 'differ', //⼿动写的交替的样式.differ{background-color: #DDDDDC;}问题四：表格完成响应式问题的原因： 这个问题本来已经在上⼀篇博客中得到了解决，可是⼜发现了⼀个新的问题，就是当表格的列数⽐较多时，表格中不会出现滚动条，⼿动调整窗⼝⼤⼩时才会出现。
jqgrid用法
jqGrid是一个强大的jQuery插件，用于创建分页、排序、过滤和编辑的表格。
以下是一些jqGrid的基本用法：1. 创建表格：```javascript$("#grid").jqGrid({url: 'data.json', // 数据源URLdatatype: 'json', // 数据类型colModel: [ // 列模型{ name: 'id', key: true },{ name: 'name' },{ name: 'email' }],pageNumber: 1, // 初始页面号pageSize: 10, // 初始页面大小ajaxGridOptions: { cache: false }, // 配置Ajax请求选项 serializeGridData: function (postData) {return JSON.stringify(postData);},loadComplete: function () {// 在数据加载完成后执行的回调函数},loadError: function (jqXHR, textStatus, errorThrown) { // 在数据加载出错时执行的回调函数}});```2. 添加行：```javascript$("#grid").jqGrid('addRowData', rowId, data);```3. 编辑行：```javascript$("#grid").jqGrid('editRow', rowId, true); // true表示保存更改```4. 删除行：```javascript$("#grid").jqGrid('delRowData', rowId);```5. 刷新表格：```javascript$("#grid").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');```6. 自定义排序：```javascript$("#grid").jqGrid('sortGrid', 'name', true); // 按名称排序，true表示升序排序```7. 自定义分页：```javascript$("#grid").jqGrid('setGridParam', { pageNumber: 2, pageSize: 10 }); // 设置页面号和页面大小```。
Jquery Jqgrid使用手册
一、jqGrid学习jqGrid学习之------------- 安装jqGrid安装很简单，只需把相应的css、js文件加入到页面中即可。
按照官网文档：*/myproject/css/oui.jqgrid.csso/ui-lightness/+/images/+jquery-ui-1.7.2.custom.css*/myproject/js/o/i18n/+grid.locale-bg.js+list of all language files+….oChanges.txtojquery-1.3.2.min.jsojquery.jqGrid.min.js目录结构如上。
在页面中写法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>My First Grid</title><link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /><link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" /><link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" /><style>html, body {margin: 0;padding: 0;font-size: 75%;}</style><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script><script src="js/src/grid.loader.js" type="text/javascript"></script></head><body>...</body></html>需要说明的是，jquery-ui的字体大小与jqgrid字体大小不一致，故需要在页面上在加上一段style来指定页面上文字大小。
jqgrid的setcell使用方法
jqgrid的setcell使用方法setCell方法的使用方法如下：1. 语法：`setCell(rowid, colname, data, class, properties)`。
参数解释：- rowid：要更新的行的id，可以是行的index或唯一标识符。
- colname：要更新的列的名字。
- data：要更新的单元格的新内容，可以是文本、HTML代码或其他格式。
- class：要为单元格添加的样式类名。
- properties：要为单元格添加的其他属性。
示例代码如下：```$("#grid").jqGrid('setCell', rowid, colname, data, class, properties);```下面是一个更具体的例子，演示如何使用setCell方法更新jqGrid中的单元格内容和样式：HTML部分：```html<table id="grid"></table><div id="pager"></div>```JavaScript部分：```javascript$(document).ready(function// 初始化grid$("#grid").jqGridurl: 'data.json', // 数据源URL datatype: 'json', // 数据类型colModel:{name:'id',label:'ID',width:50}, {name:'name',label:'Name',width:100}, {name:'age',label:'Age',width:50}, {name:'gender',label:'Gender',width:50} ],rowNum: 10, // 每页显示记录数pager: '#pager', // 分页栏的ID sortname: 'id', // 默认排序列viewrecords: true, // 显示总记录数caption: 'My Grid' // 表格标题});//更新单元格内容和样式$("#grid").jqGrid('setCell', '1', 'name', 'John Smith');$("#grid").jqGrid('setCell', '1', 'age', '35');$("#grid").jqGrid('setCell', '1', 'gender', 'Male');//添加样式类$("#grid").jqGrid('setCell', '1', 'name', '', 'highlight');$("#grid").jqGrid('setCell', '1', 'gender', '', 'highlight');//添加其他属性$("#grid").jqGrid('setCell', '1', 'name', '', '', {'title': 'This is a name'});});```注意事项：- 在使用setCell方法之前，要确保grid已经初始化完成，并且数据已经加载到grid中。
jqGrid中文文档
jqGrid中⽂⽂档⼀、主要API接⼝getGridParam、setGridParam：getGridParam⽅法：getGridParam("url")：获取当前的AJAX的URLgetGridParam("sortname")：排序的字段getGridParam("sortorder")：排序的顺序getGridParam("selrow")：得到选中⾏的IDgetGridParam("page")：当前的页数getGridParam("rowNum")：当前有多少⾏getGridParam("datatype")：得到当前的datatypegetGridParam("records")：得到总记录数getGridParam("selarrrow")：可以多选时，返回选中⾏的IDsetGridParam⽅法：setGridParam({url:newvalue})：可以设置⼀个grid的ajax url，可配合trigger("reloadGrid")使⽤setGridParam({sortname:newvalue})：设置排序的字段setGridParam({sortorder:newvalue})：设置排序的顺序asc or descsetGridParam({page:newvalue})：设置翻到第⼏页setGridParam({rowNum:newvalue})：设置当前每页显⽰的⾏数setGridParam({datatype:newvalue})：设置新的datatype(xml,json)形式2：jQuery('#tableID').jqGrid('getGridParam','url'))jQuery("#tableID").jqGrid('setGridParam',{page:2}).trigger("reloadGri d")⼆、jqGrid colModel表体结构配置name 必要的属性，具有唯⼀标识性，如在弹出的editform窗体中，将作为input 的name属性index 为排序⽤，最⽅便的是设为数据库字段width 150，宽度，数值align left,center,rightdetefmt date:trueeditable flaseeditoptions edittype为先决条件，此为值，[]editrules 编辑规范edittype text,textarea,select,checkbox,passwordformatoptionsformatterhidedlg false (appear in the modal dialog)hidden false 在加载时是否隐藏列jsonmap 声明json的格式key falselabel 当没有设置colNames时，在列⾥⽤此代替，此项也为空时，就是name代替resizable t rue，列宽可调节search true，可搜索sortable true，可排序sorttype text,int,float,date，排序⼦段类型xmlmap 声明xml的格式options即jqGrid的选项设置，请参照以下表格。
jquery grid中文说明文档
jqGrid的属性很多，其实很大部分的属性，使用其默认值就可以了。
但是详细了解一下属性的含义以及作用，对我们定制自己的grid是有帮助的。
以下内容描述格式是：属性名称参数值类型描述内容(可能有多行)默认值是否可修改(表示grid创建完成之后，该属性是否能够被修改。
也就是说，是否grid的初始化的属性值能够被修改)————详细属性列表————ajaxGridOptionsobject本选项用来设置全局的Ajax设置。
注意：这个选项会覆盖当前所有的ajax设置，包括ajax的error、complete以及beforeSend事件。
默认值:empty object该属性可以修改ajaxSelectOptionsobject本选项用来设置select元素的ajax全局设置。
在searchoptions选项或者editoptions选项属性设置中，可以通过设置dataUrl来获取生成一个select的下拉框内容的URL。
jqGrid 通过ajax的方式访问这个URL来自动获取可选择值。
注意：这里要求通过dataUrl返回的结果是形如<select><option value=‖1‖>One</option><option value=‖2‖>Two</option></select>这种格式的字符串。
当然，其实也可以直接返回1：One；2：Two这种格式的数据，但是要通过另外一个选项进行处理，处理之后还是要变成上面的字符串。
比如searchOptions中，就有一个属性是buildSelect，就是用来干这事儿的。
默认值:empty object该属性可以修改altclassstring用来设置jqGrid的交替行的class。
只有设置了altRows为true才有效。
默认值:ui-priority-secondary该属性可以修改. Requires reloadaltRowsboolean设置jqGrid显示为斑马线样式。
jqgrid的setcell 使用方法
jqGrid 的 setCell 使用方法1. 什么是 jqGrid？jqGrid 是一个基于 jQuery 的表格插件，它提供了丰富的功能和灵活的配置选项，可以用于展示和编辑数据表格。
jqGrid 是一个开源项目，由多个开发者共同维护和改进，目前已经成为了非常受欢迎的前端表格插件之一。
2. setCell 方法的作用setCell 方法是 jqGrid 提供的一个用于修改单元格内容的方法。
通过调用setCell 方法，我们可以动态地改变表格中指定单元格的值，并且可以选择是否更新单元格的样式。
3. setCell 方法的语法setCell 方法的语法如下所示：$("#grid_id").jqGrid('setCell', rowId, colName, newValue, cssClass, propertie s);•grid_id：表示 jqGrid 的表格 ID，通过该 ID 可以获取到对应的表格对象。
•rowId：表示需要修改的单元格所在行的 ID，可以是一个字符串或数字。
•colName：表示需要修改的单元格所在列的名称，必须是一个字符串。
•newValue：表示需要设置的新值，可以是一个字符串或其他合法的JavaScript 值。
•cssClass：表示需要设置的新样式，可以是一个字符串或数组。
•properties：表示需要设置的其他属性，可以是一个对象。
4. setCell 方法的使用示例下面是一个使用 setCell 方法的简单示例：$("#grid").jqGrid('setCell', 'row_id', 'col_name', 'new_value', 'new_class', {attr1: value1, attr2: value2});在这个示例中，我们通过调用 setCell 方法，将表格中row_id行的col_name列的值修改为new_value，并且将单元格的样式修改为new_class，同时还可以设置其他属性。
JQuery插件jqGrid常用属性说明
希望这个帮助文档能对jQuery插件的学习有所帮助jqGrid包说明:jquery.js is the jQuery library,jquery.jqGrid.js 主单元，包含的功能取决您的选择grid.basic.js主插件其他插件包依赖于该插件正常运行grid.custom.js Grid高级插件功能包grid.formedit.js用于表格编辑、增加、删除功能grid.inlinedit.js 线条编辑grid.subgrid.js 一个处理表格的插件grid.postext.js 一个可以用来操作post数据的包jqModal.js 模态对话框的编辑jqDnR.js 可拖拉的表格编辑themes 包含gird需要的样式表一、功能描述：jqGrid包主要用于将需要展示的数据动态的展示在页面的上，即动态画出表格，并封装了增、删、改、查、分类显示、在线编辑修改等功能。
二、关键使用说明：1、导入jqGrid包，在首页属性里面添加如下包的信息<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\"href=\"/SedSoft/jqGrid/themes/basic/grid.css\"><link rel=\"stylesheet\" type=\"text/css\" media=\"screen\"href=\"/SedSoft/jqGrid/themes/jqModal.css\"><script type=\"text/javascript\" src=\"/sedsoft/jqGrid/jquery.js\" > </script><script type=\"text/javascript\" src=\"/sedsoft/jqGrid/jquery.jqGrid.js\" ></script><script type=\"text/javascript\" src=\"/sedsoft/jqGrid/js/jqModal.js\" ></script><script type=\"text/javascript\" src=\"/sedsoft/jqGrid/js/jqDnR.js\" > </script>注：由于加载js包会耗费大量资源，建议动态加载这些js包，优化页面初始化效率。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
希望这个帮助文档能对jQuery插件的学习有所帮助jqGrid包说明:jquery.js is the jQuery library,jquery.jqGrid.js主单元，包含的功能取决您的选择grid.basic.js主插件其他插件包依赖于该插件正常运行grid.custom.js Grid高级插件功能包grid.formedit.js用于表格编辑、增加、删除功能grid.inlinedit.js线条编辑grid.subgrid.js一个处理表格的插件grid.postext.js一个可以用来操作post数据的包jqModal.js模态对话框的编辑jqDnR.js可拖拉的表格编辑themes包含gird需要的样式表一、功能描述：jqGrid包主要用于将需要展示的数据动态的展示在页面的上，即动态画出表格，并封装了增、删、改、查、分类显示、在线编辑修改等功能。
二、关键使用说明：1、导入jqGrid包，在首页属性里面添加如下包的信息<link rel=\"stylesheet\"type=\"text/css\"media=\"screen\"href=\"/SedSoft/jqGrid/themes/basic/grid.css\"><link rel=\"stylesheet\"type=\"text/css\"media=\"screen\"href=\"/SedSoft/jqGrid/themes/jqModal.css\"><script type=\"text/javascript\"src=\"/sedsoft/jqGrid/jquery.js\"></script><script type=\"text/javascript\"src=\"/sedsoft/jqGrid/jquery.jqGrid.js\"></script><script type=\"text/javascript\"src=\"/sedsoft/jqGrid/js/jqModal.js\"></script><script type=\"text/javascript\"src=\"/sedsoft/jqGrid/js/jqDnR.js\"></script>注：由于加载js包会耗费大量资源，建议动态加载这些js包，优化页面初始化效率。
2、在页面上需要添加表格的地方，增加<table id="list"class="scroll"></table><div id="pager"class="scroll"style="text-align:center;"></div></body>list表格id，pager为表格导航条idcolNames:['Inv No','Date','Amount','Tax','Total','Notes'],colModel:[{name:'invid',index:'invid',width:55},{name:'invdate',index:'invdate',width:90},{name:'amount',index:'amount',width:80,align:'right'},{name:'tax',index:'tax',width:80,align:'right'},{name:'total',index:'total',width:80,align:'right'},{name:'note',index:'note',width:150,sortable:false}],pager:jQuery('#pager'),rowNum:10,rowList:[10,20,30],sortname:'id',sortorder:"desc",viewrecords:true,imgpath:'themes/basic/images',caption:'My first grid'});});以上代码基本可以将要展示的表格展示出来了，现在对一些属性说明：jQuery(“#list”).jqGrid list为将要显示表格的table的idaltRows:设置表格显示斑马条纹属性，默认值为truecaption:定义表格标题名cellEdit：设置表格单元是否可以编辑，默认值为true，详见cellEdit介绍cellsubmit:决定cell容器如何被保存，使用’remote’或者‘clientArray’，详见cellEdit cellurl:处理cell编辑的url路径，默认值为空datatype:从后台展示的数据格式，有xml、json等mtype：数据传递的方式,有get和post两种editurl:定义inline和form编辑的后台处理urlExpandcolumn:在定义treeGrid情况下，指明那一列用来伸展树forceFit：设置表格在被拖动时自动调整大小以不破坏表格整体布局，注：该属性和shrinkToFit不能同时使用gridstate:设置通用表格在使用hiddengrid属性时，hidegrid的值，可以是：’visible’或’hidden’默认为visibleshrinkToFitloadonce:如果该值设置为true则表格数据仅加载一次，在第一次请求之后数据信息自动转变为客户端处理，pager导航条上的函数都不可用。
loadtext：在请求数据时显示字幕，默认值为：Loading….colNames：要显示数据表格的列名，需要在前台定义好表格列名colModel：对要展示的每列值属性进行定义，最常用的有：align:定义表格对齐方式，默认值为leftdatefmt：日期格式，默认值为：Y-M-deditable：定义field是否可编辑，该属性用于inline和form编辑，默认值为falseeditrules：editrules：{edithidden:true,//如果为true，则该列在添加和编辑时被隐藏required:true,//如果为true，则该列表格不能为空number:true,//true时表格必须为数字型integer:true,//true时，表格数字为整形minValue:val,//设置数字最小值与最大值maxValue:val,email:true}//验证是否为emailedittype：定义编辑类型：text,texttarea,select,checkbox,passworadhidedlg:为true时，该列不会显示在表格对话框中hidden：定义列在初始化时是否被隐藏index：定义索引名name:定义属性名，必填项resizable:定义列是否可调整大小index:定义列idwidth：宽度align：对齐方式pager：导航条要展示的位置rowNum：默认的每页显示记录数rowList：可选的每页显示数viewrecords：是否设置表格可选，为true是可选，但此时表格不可编辑，只有在false是才可以编辑imgpath：图片路径注：以上属性并不会全部同时出现在jqGrid表格设置里，jqGrid设计了灵活多变的不同组合来展示表格不同的功能。
在以后的实际应用里，将对重点属性的组合和分配进行说明。
四、增加、删除、修改操作的实现1)增加jqGrid包自身封装了相当完善的操作事件，jQuery("#list").navGrid('#pager',{refresh:true,edit:true,add:true,del:true,search:true,position:"right"})将上面一段代码，添加到jqGrid({})后面，refresh等参数，均设置为true，则导航条上即可显示出五个按钮，刷新、编辑、增加、查找等，position设置这些按钮在导航条上的位置。
editurl:pathname+'/xmlTableEdit?openagent&oper=edit',//设置添加、更新的url这段代码是编辑、增加、查找等功能执行的代码，写在url后面方便查找。
对于这些定义的功能，每个操作传递过去的editurl是不一样的，oper分别是edit，add，search、等。
之后传递的是操作后，数据变化的参数。
当然，我们很多时候需要自己定义一些事件，jqGrid有一个添加按钮的函数，可以方便的添加我们想要的任何功能按钮jQuery("#list").navGrid('#pager',{refresh:true,edit:true,add:true,del:true,search:true,position:"right"}).navButtonAdd('#pager',{caption:"Del",buttonimg:"/SedSoft/jqGrid/themes/basic/images/folder.png",onClickButton:function(){//执行删除行操作//var gr=jQuery("#list").getGridParam("selarrrow");var gr=chooseid;if(gr!=null&gr!=""){jQuery("#list").delGridRow(gr,{afterSubmit:function(xhr,postdata){alert('After Submit:'+postdata);return[true]},url:pathname+'/xmlTableEdit?openagent&oper=del'//执行删除代理rul});}else{alert("Please Select Row to delete!");};},position:"last"})上面这段代码就添加了一个删除按钮，并获得选中的id数组，并通过url代理去处理该操作。