2024年10月jqgrid属性表（如何利用jqGrid表格方法重新设置caption属性值）

　　⑴jqgrid属性表（如何利用jqGrid表格方法重新设置caption属性值

　　⑵如何利用jqGrid表格方法重新设置caption属性值

　　⑶问题背景（jqGrid生成表格带有标题，固定不变的（表格标题随着年份进行变化、实现源码viewplaincopyprint?《!DOCTYPEhtml》《html》《head》《metacharset=“UTF-“》《title》如何设置表格caption值《/title》《linkrel=“stylesheet“href=(function(){vardate=newDate();varyear=date.getFullYear();varstudent=[{id:’’,name:’zhangsan’,sex:’m’,age:},{id:’’,name:’zhangsan’,sex:’w’,age:},{id:’’,name:’zhangsan’,sex:’m’,age:},{id:’’,name:’zhangsan’,sex:’w’,age:},{id:’’,name:’zhangsan’,sex:’m’,age:},{id:’’,name:’zhangsan’,sex:’w’,age:},{id:’’,name:’zhangsan’,sex:’m’,age:},{id:’’,name:’zhangsan’,sex:’w’,age:},{id:’’,name:’zhangsan’,sex:’m’,age:},{id:’’,name:’zhangsan’,sex:’w’,age:}];$(“#title-grid-table“).jqGrid({data:student,datatype:’local’,caption:’学生信息表’,height:’auto’,rowNum:,rowList:,colNames:,colModel:[{name:’id’,index:’id’,width:,sorttype:“int“},{name:’name’,index:’name’,width:,editable:true},{name:’sex’,index:’sex’,width:},{name:’age’,index:’age’,width:}],pager:“#title-grid-pager“,viewrecords:true,sortname:’name’,loadplete:function(){$(this).jqGrid(“setCaption“,year+“年毕业学生信息表“);}});});《/script》《/head》《body》《div》《tableid=“title-grid-table“》《/table》《tableid=“title-grid-pager“》《/table》《/div》《/body》《/html》、问题说明（固定标题属性直接使用caption（重新设置标题的方法是setCaption

　　⑷jqgridrows怎么设置

　　⑸jqGrid提供了大量的选项设置，开发者可以通过设置选项对应值来控制jqGrid，比如表格的宽度、高度、数据类型以及列名称等等都是通过选项设置来完成的。jqGrid的选项一般是名称：值（name:value的形式，也可以是对象(object)及数组（array的形式配置。jqGrid选项(Option)调用jqGrid只需要执行以下代码:jQuery(“#grid_id“).jqGrid(options);options即jqGrid的选项设置，请参照以下表格。属性类型描述默认值ajaxGridOptionsobject此项用于设置当表格设置获得数据时，ajax的全局属性，注意此项可能覆盖所有当前的ajax设置（包括error,plete和beforeSend事件。emptyajaxSelectOptionsobject此项用于设置在editoptions或searchoptions对象中通过dataUrl选择元素时，ajax的全局属性。emptyaltclassstring交替行的类。此项仅当altRows设置为true时有效。ui-priority-secondaryaltRowsboolean设置为交替行表格falseautoencodeboolean当设置为true时，对来自服务器的数据和提交数据进行encodes编码。如《将被转换为《falseautowidthboolean当设置为true时，表格宽度将自动匹配到父元素的宽度。这个匹配只在表格建立时进行，为了使表格在父元素宽度变化时也随之变化，可以使用setGridWidth方法falsecaptionstring表格的标题。显示在Header上。若为空时将不会显示。emptycellLayoutinteger该属性确定单元格的padding+border宽度。通常不修改该属性，但若表格的CSS中改变了td元素，该属性需要修改。缺省值表示paddingLef()+paddingRight()+borderLeft()=cellEditboolean是否允许单元格。falsecellsubmitstring确定单元格内容保存方式是remote还是clientArray。’remote’cellurlstring单元格保存的url。nullcolModelarray描述列参数数组。这是表格最重要的部分，详见colModelAPI.nullcolNamesarray列名称数组。该名称将在Header中显示。名称以逗号分隔，数量应与colModel数组数量相等emptydataarray以数组的形式保存本地数据。emptydatastrstring当datatype被设置为xmlstring或jsonstring时，为数据串。nulldatatypestring定义表格希望获得的数据的类型，有效值有：Xml—xml数据xmlstring—xml字符串json—JSON数据jsonstring—JSON字符串local—客户端数据（数组javascript—javascript数据function—函数返回数据xmldeselectAfterSortboolean只适用于当datatype为local时。当一个排序被应用时取消当前选定行。truedirectionstring表格中的书写方向。“ltr”从左到右(缺省值)，“rtl”从右到左ltrediturlstring定义行内地址URLnullemptyrecordsstring当返回(或当前)数量为零时显示的信息此项只用当viewrecords设置为true时才有效。ExpandColClickbooleantrue时，点击展开行的文字，treeGrid展开或收拢trueExpandColumnstring指定用于张开treeGrid的列（名称来自colModel，未设置即用第一列。此项只有当treeGrid为true时有效.nullfooterrowboolean如果设置为true时，将生成一个表脚行，列数等于colModelfalseforceFitboolean如果设置为true，改变列宽，相邻列也将调整以适应整体表格，将不会出现水平滚动条。falsegridstatestring表格的当前状态。有visible或hiddenvisiblegridviewboolean设置为true将提高~倍的显示速度。但不能再使用treeGrid,subGrid,或afterInsertRow事件falsegroupingboolean是否设置表格组falseheightmixed表格高度。可为数值、百分比或autohiddengridboolean如果设置为true，表格开始被隐藏，数据不被载入，只显示标题。当第一次点击显示/隐藏按钮显示表格，数据从服务器载入。falsehidegridboolean是否允许显示/隐藏按钮可用。只有标题不为空时可用。truehoverrowsboolean表行是否有鼠标悬停效果truejsonReaderarrayJSON数据结构数组lastpageinteger请求返回的总页数lastsortinteger排序的列号（开始loadonceboolean设置为true时，表格只一次读取服务器数据（使用适当datatype，之后，datatype自动变为local，所有进一步操作都在客户端完成，pager功能（若存在将失效。falseloadtextstring数据请求和排序时显示的文本Loading…loaduistring此项控制ajax进程进行时的动作。Disable—取消jqGrid的进程指示，可使用自定义的指示。enable(缺省)—表格中间显示loading。block–显示“Loading”信息，禁用页面上的所有功能，直到数据装入完成。enablemtypestring定义提交类型POST或GETGETmultikeystring此属性只有当multiselect为true时有效，定义多选时的组合键，可选值有：shiftKey，altKey，ctrlKeyemptymultiboxonlyboolean此属性只有当multiselect为true时有效，.Multiboxonly设置为true时，只有点击checkbox时该行才被选中，点击其他列，将清除当前行的选中。falsemultiselectboolean此属性设为true时启用多行选择，出现复选框falsemultiselectWidthinteger若multiselect为true时，定义多选列的宽度。pageinteger设置请求初始页的数量，此参数通过URL从服务器接受数据pagermixed定义分页浏览导航条。必须是一个HTML元素，如《divid=“page“》《/div》emptypagerposstring定义表格浏览导航条的位置，缺省情况下建立一个包括部分的导航条：页码，导航按钮和记录信息。centerpgbuttonsboolean定义导航激活时导航按钮是否显示。truepginputboolean定义导航栏是否有页码输入框。truepgtextstring当前页信息。第一个量为当前页，第二个量为总页数。prmNamesarray缺省情况下prmNames:{page:“page”,rows:“rows”,sort:“sidx”,order:“sord”,search:“_search”,nd:“nd”,npage:null}以POST方式发送到服务器，字段为：page，rows，sidx，sord，search，nd例如要将sidx改为mysort，可写成：prmNames:{sort:“mysort”}.这样提交到服务器的字符串就变为：page=&rows=&mysort=myindex&sord=asc若将一些参数设为null，这些参数将不再发往服务器。例如prmNames:{nd:null}则nd参数将不被发送。Npage参数参见scrolloption.nonepostDataarray此数组能直接传递到url。这个数组可使用这种形式{name:value…}。emptyreountinteger只读属性。定义表格显示的行数。切勿与records混淆。recordposstring定义页中记录信息的位置，可以是left，center，right。rightrecordposobject交替行的类truerecordsinteger只读属性。定义从请求中获得的记录数nonerecordtextstring可在页面上显示的提示信息，此文字只在viewrecords为true是有效，并且当记录总数大于时才显示。此文字中{}中的内容表示：{}该页显示的第一个记录的记录号{}该页显示的最后一个记录的记录号{}获得的记录总数resizeclassstring列可变大小时的类emptyrowListarray用于改变显示行数的下拉列表框的元素数组。emptyrownumbersboolean若此属性为true，表格左侧将添加一用于显示行数（从开始的列。此时colModel自动扩展出一个名为rn的元素。所以在colModel中不要定义rn。falserowNuminteger表格中可见的记录数。此参数通过url传递给服务器供检索数据用。注意：若此参数设置为，而服务器返回条记录，将只有条记录被装入。若此参数被设置为-，则此检查失效rownumWidthinteger当rownumbers为true时，定义显示行数的列的宽度。savedRowarray只读属性。用于行和单元格保存数据之前emptyscrollbooleanorinteger创建动态滚动表格。当设为启用时，pager被禁用，可使用垂直滚动条来装入数据。falsescrollOffsetinteger定义垂直滚动条的宽度。scrollrowsboolean该项启用时，用setSelection选定一行，表格将滚动到被选行可见。falseselarrrowarray-只读属性。当multiselect为true时，包含当前选定的行。此为一维数组，值为表格中选定行的ID。emptyselrowstring只读属性。内容是最后选定行的ID。如火应用了排序或pagging，该值为null。nullshrinkToFitbooleanorinteger该项描述计算每列相对于表格宽度的初始宽度的类型。若为true，并且设置了列宽度，则每列的宽度根据定义宽度缩放。若为false，并且设置了列宽度，表格宽度为设置宽度，列宽度不会重新计算，使用colModel中定义的值truesortableobject启用此项，允许使用鼠标重新排序列。truesortnamestring从服务器读取XML或JSON数据时初始的排序名，此名被加到URL中。emptysortorderstring从服务器读取XML或JSON数据时初始的排序类型，此类型被加到URL中。可选值为asc或desc。ascsubGridboolean设置为true，可使用子表格。启用子表格，将在基本表的左边将添加一列，并包含一个“+”图像，用户可以点击扩展行。falsesubGridModelarray-该属性用于描述子表格的模式，只有subGrid为true时有效。它是一个用于描述子表格列的数组。emptysubGridTypemixed用于定义子表格装入的数据类型，若不定义，则使用与父表格同样的数据类型。nullsubGridUrlstring该属性用于定义子表格获得数据的URL。行的ID将键入此URL中，若要添加其他参数，可使用subGridModel中的选项。emptysubGridWidthinteger定义子表格的列宽toolbararray该参数定义表格的工具栏。参数是一个包含两个值的数组，第一个值使工具栏有效，第二个值相对位置（可以是top、bottom、both。例如：设置toolbar为toppagerboolean是否在表格上部显示分页条。falsetotaltimeinteger只读参数。用于记录装入XML和JSON数据的时间。treedatatypemixed定义初始数据类型nulltreeGridboolean启用（禁用TreeGrid。falsetreeGridModelstring定义TreeGrid的方法。可以是nested或adjacency。nestedtreeIconsarray此数组设置TreeGrid中使用的图标。图标应是UItheme中的有效图标。缺省为{plus:’ui-icon-triangle--e’,minus:’ui-icon-triangle--s’,leaf:’ui-icon-radio-off’}treeReaderarray扩展表格的colModel。这里定义的字段将添加到colModel的尾部并隐藏。服务器将返回这些字段的值。tree_root_levelnumeric确定treeGrid相对于根元素的级别。urlstring请求数据的url地址nulluserDataarray此数组保存请求的自定义信息，可随时使用emptyuserDataOnFooterboolean到为true时，userData直接放置在页脚。falseviewrecordsboolean是否在浏览导航栏显示记录总数falseviewsortcolsarray定义表头中排序图标的外观和行为。缺省为。第一个参数设定是否显示所有定义了排序的列旁显示图标。缺省的false表示只有当前排序列旁的图标显示。设为true可使所有可排序列都显示图标。第二个参数设定排序图标如何放置。vertical为垂直放置，horizontal为水平放置。第三个参数设定点击功能。True表示表头点击排序，false表示只点击排序图标排序。若将此参数设为false时，请确保第一个参数为true，否则将无法排序。widthnumber若为设置，表格的宽度为colModel中定义的所有列宽度的总和。若设置了该项，每列的初始宽度按照shrinkToFit设置的值nonexmlReaderarray描述预期的XML数据结构的数组。ColModelAPIcolModel属性以数组的形式定义各个表格列。这是jqGrid中很重要的部分。语法为：jQuery(“#gridid“).jqGrid({...colModel:,...});属性类型描述默认值alignstring定义表格单元格（非表头的对齐方式，可取值：left,center,right.leftclassesstring此属性用于定义列的类名，当有多个类名时，用空格间隔，例如：“classclass”。在表格的CSS中，有一个预定义的类ui-ellipsis用于定义特定的行emptydatefmtstring日期格式，可用/，-和.。作为间隔符。y、Y、yyyy用于位年，YY、yy用于位的月，d、dd用于日期Y-m-ddefvalstring搜索字段的缺省值，此参数只用于自定义搜索是的初始值。emptyeditableboolean定义字段是否可，用于单元格、行和表单模式falseeditoptionsarray根据edittype参数定义可用的值数组emptyeditrulesarray设置可字段的补充规则emptyedittypestring定义行和表单模式的类型，可以是text、textarea、select、checkbox、password、button、image和file。textfixedboolean若设为true，即使shrinkToFit设置为true，列宽也不允许重新计算。GridWidth方法改变表格宽度时，列宽也不会改变。falseformoptionsarray定义表单的各种选项emptyhidedlgboolean若设置为true，该列将不出现在模式对话框中，用户可以此控制列的显示或隐藏falsehiddenboolean定义初始化时，列是否隐藏。falseindexstring通过sidx参数设置排序时的索引名。emptykeyboolean在未从服务器获得ID的情况下，该列可设置为行ID。只有一列可设置该属性，若出现多列，表格只采用将第一个设置了该属性的列，其他列忽略。falselabelstring当colNames数组为空时，定义此列的标题。若colNames数组和此属性都为空，标题为该列的name属性值。nonenamestring设置列在表格中的唯一名称，此属性是必须的。或者使用保留字subgrid、cb和rn.Requiredresizableboolean定义是否可变列宽truesortableboolean定义是否可以排序truesorttypemixed当datatype为local时，用于定义排序列类型。可取int/integer（整数、float/number/currency（小数、date（日期、text（文本texttitleboolean当设置为false时，鼠标滑向单元格时不显示title属性truewidthnumber设置列的初始宽度，可用pixels和百分比

　　⑹jqgriddatatype参数local和json的区别

　　⑺简单描述datatype参数的local和json值的区别：

　　⑻当jqgrid的参数为datatype:“local“表示由前端先获取到jsonData，再set到jqgrid去渲染数据：

　　⑼$(’#table’).jqGrid(’setGridParam’,?{data:?jsonData});

　　⑽$(’#table’).jqGrid({???data:jsonData,???datatype:“local“,???loadonce:?false,//更多参数请查看文档})

　　⑾当jqgrid的参数为datatype:“json“表示由jqgrid直接Ajax获取jsonData；

　　⑿如何利用jqGrid表格插件获取选中行的id属性值

　　⒀varrowsData=$(“#“+gridid).jqGrid(’getGridParam’,’selarrrow’);vardata=$(“#“+gridid).jqGrid(’getRowData’,rowsData);

　　⒁loadplete什么意思

　　⒂*单单这样看很难很好地解说“loadplete”的意思，因为“load”本身有很多意思，而“plete”就比较简单=完成的意思装货完成加载完成

　　⒃jqgrid里的colModel里面设置两个属性hidden各有什么意思

　　⒄你可以看下jqgrid的api里面对每个参数的解释hidedlg：是否显示或者隐藏此列hidden：在初始化表格时是否要隐藏此列下是api地址?

　　⒅jqGrid怎么动态控制multiselect属性

　　⒆在jqGrid中设置multiselect:true可以实现全选的操作，但怎么设置被选中的checkbox里面的值呢，做法如下：jQuery(“#listTable“).jqGrid({url:’queryList.do’,datatype:’json’,colNames:,colModel:[{name:’MY_ID’,index:’MY_ID’,sortable:false,width:’%’,hidden:true},{name:’MY_NO’,index:’MY_NO’,sortable:false,align:’center’,width:’%’},{name:’NAME’,index:’NAME’,sortable:false,align:’center’,width:’%’}],page:,rowNum:,rowList:,pager:’#listPage’,multiselect:true,sortname:’MY_NO’,viewrecords:true,sortorder:“desc“,jsonReader:{repeatitems:false},width:“%“,height:’%’,gridplete:function(){varrowIds=jQuery(“#listTable“).jqGrid(’getDataIDs’);for(vark=;k《rowIds.length;k++){varcurRowData=jQuery(“#listTable“).jqGrid(’getRowData’,rowIds);varcurChk=$(“#“+rowIds+““).find(“:checkbox“);curChk.attr(’name’,’checkboxname’);//给每一个checkbox赋名字curChk.attr(’value’,curRowData);//给checkbox赋值curChk.attr(’title’,curRowData);//给checkbox赋予额外的属性值//curChk.attr(’checked’,’true’);//设置所有checkbox被选中}//下面的代码顺序不能变(这是页面上所有行被真选中)//$(“#cb_listTable“).attr(“checked“,true);//$(“#cb_listTable“).click();//input框//$(“#jqgh_listTable_cb“).click();//div标签//$(“#listTable_cb“).click();//th标签}});加载完列表后获取被选中的checkbox的值及其属性值的做法如下：varcheckedVals=newArray();varcheckedTitles=newArray();$(“:checkbox“).each(function(){checkedVals.push($(this).val());checkedTitles.push($(this).attr(“title“));});for(varp=;p《checkedVals.length;p++){alert(checkedVals);alert(checkedTitles);}--------------------------------------------------------------------------------------------------让查询列表中按指定条件被默认选中或灰掉checkbox的做法如下：jQuery(“#listTable“).jqGrid({url:’queryList.do’,datatype:’json’,colNames:,colModel:[{name:’MY_ID’,index:’MY_ID’,sortable:false,width:’%’,hidden:true},{name:’MY_NO’,index:’MY_NO’,sortable:false,align:’center’,width:’%’},{name:’NAME’,index:’NAME’,sortable:false,align:’center’,width:’%’}],page:,rowNum:,rowList:,pager:’#listPage’,multiselect:true,multiboxonly:true,sortname:’MY_NO’,viewrecords:true,sortorder:“desc“,jsonReader:{repeatitems:false},width:“%“,height:’%’,gridplete:function(){varrowIds=jQuery(“#listTable“).jqGrid(’getDataIDs’);for(vark=;k《rowIds.length;k++){varcurRowData=jQuery(“#listTable“).jqGrid(’getRowData’,rowIds);if(curRowData.MY_NO==’’){$(“#listTable“).find(“input+“’]“).val(curRowData.MY_ID);if(curRowData.NAME==’shihuan’){$(“#listTable“).find(“input+“’]“).attr(“checked“,true);}}else{$(“#listTable“).find(“input+“’]“).val(curRowData.MY_ID);$(“#listTable“).find(“input“).attr(“checked“,true);$(“#listTable“).find(“input“).attr(“disabled“,true);}}}onSelectAll:function(rowid,status){//rowid数组varids=jQuery(“#listTable“).jqGrid(’getDataIDs’);for(vari=;i《ids.length;i++){varcl=ids;varcurRowData=jQuery(“#listTable“).jqGrid(’getRowData’,cl);varckt=$(“#listTable“).find(“input“).attr(“disabled“);if(ckt){$(“#listTable“).find(“input“).attr(“checked“,true);}}},beforeSelectRow:function(rowid,e){//alert(rowid);//rowid的值是checkbox的value值returnfalse;}});--------------------------------------------------------------------------------------------------jqGrid被重新载入的做法如下：functiongridReload(){jQuery(“#listTable“).jqGrid(’setGridParam’,{//url:’//shihuan/search.do’,//postData:transferFormElementsToObject(’theForm’),postData:{“message“:msval},page:}).trigger(“reloadGrid“);}

　　⒇jqGrid同时拖拽多行到另一个表格的指定位置，如何实现此问题类似如何对多行或指定行的资料进行修改

　　⒈获取值、获取单个id获取行号，有这种方式：varrowid=$(“#grid-table“).jqGrid(“getGridParam“,“selrow“);但是经过实际验证，这种方式不可行，当选中行，再点击同一行会出现获取不到行号的情况。最后先在js最外部定义一个变量selId，然后使用如下代码在选中行时赋值：onSelectRow:function(rowid,status){selId=rowid;//给最外层的selId赋值}、获取多个选中行的idvarids=$(’#gridTable’).jqGrid(’getGridParam’,’selarrrow’);其输出格式是逗号分隔的id，如：,,,,、获得所有行的ID数组varids=$(“jqgridtableid“).jqGrid(’getDataIDs’);、获取行数据如果想获取选择的行的数据，只要传入rowId即可，如下：varrowData=$(’#gridTable’).jqGrid(’getRowData’,rowId);而这个rowData是一个对象，如果要获取选择的行的这个对象的属性值，如name的值，需如下：varName=rowData.name;、获取单元格数据varcelldata=$(“jqgridtableid“).jqGrid(’getCell’,id,colnum);、设定行选中//设定选中行,可设定多行选中：$(“jqgridtableid“).jqGrid(’setSelection’,id);$(“jqgridtableid“).jqGrid(’setSelection’,id);