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 表格，其中包含一个动态列（如上例中的“总价”）。
- 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代理去处理该操作。