jqGrid选项(Option)
调用jqGrid只需要执行以下代码:
jQuery("#grid_id").jqGrid(options)
options即jqGrid的选项设置，请参照以下表格。
属性类型描述默认值
ajaxGridOptionsobject此项用于设置当表格设置获得数据时，ajax的全局属性，注意此项可能覆盖所有当前的ajax设置（包括error, complete和beforeSend 事件）。empty
ajaxSelectOptionsobject此项用于设置在editoptions或searchoptions对象中通过dataUrl选择元素时， ajax的全局属性。empty
altclassstring交替行的类。 此项仅当altRows设置为true时有效。ui-priority-secondary
altRowsboolean设置为交替行表格false
autoencodeboolean当设置为true时，对来自服务器的数据和提交数据进行encodes编码。如<将被转换为< false
autowidthboolean当设置为true时，表格宽度将自动匹配到父元素的宽度。这个匹配只在表格建立时进行，为了使表格在父元素宽度变化时也随之变化，可以使用setGridWidth方法false
captionstring表格的标题。显示在Header上。若为空时将不会显示。empty
cellLayoutinteger该属性确定单元格的padding + border 宽度。通常不修改该属性，但若表格的CSS中改变了td元素，该属性需要修改。 缺省值5表示paddingLef(2) + paddingRight(2) + borderLeft(1)=55
cellEditboolean是否允许单元格编辑。false
cellsubmitstring确定单元格内容保存方式是remote还是clientArray 。'remote'
cellurlstring单元格保存的url。null
colModelarray描述列参数数组。这是表格最重要的部分，详见colModel API.null
colNamesarray[]列名称数组。该名称将在Header中显示。名称以逗号分隔，数量应与colModel 数组数量相等empty
dataarray以数组的形式保存本地数据。empty
datastrstring当datatype被设置为xmlstring或jsonstring时，为数据串。null
datatypestring定义表格希望获得的数据的类型，有效值有：
Xml —xml数据
xmlstring—xml字符串
json—JSON数据
jsonstring—JSON字符串
local—客户端数据（数组）
javascript—javascript数据
function—函数返回数据
xml
deselectAfterSortboolean只适用于当datatype为local时。当一个排序被应用时取消当前选定行。true
directionstring表格中的书写方向。“ltr”从左到右(缺省值)，“rtl”从右到左ltr
editurlstring定义行内编辑地址URLnull
emptyrecordsstring当返回(或当前)数量为零时显示的信息此项只用当viewrecords 设置为true时才有效。
ExpandColClickbooleantrue时，点击展开行的文字，treeGrid展开或收拢true
ExpandColumnstring指定用于张开treeGrid的列（名称来自colModel），未设置即用第一列。此项只有当treeGrid为true时有效.null
footerrowboolean如果设置为true时，将生成一个表脚行，列数等于colModelfalse
forceFitboolean如果设置为true，改变列宽，相邻列也将调整以适应整体表格，将不会出现水平滚动条。false
gridstatestring表格的当前状态。有visible或hiddenvisible
gridviewboolean设置为true将提高5~10倍的显示速度。但不能再使用treeGrid, subGrid, 或afterInsertRow事件false
groupingboolean是否设置表格组false
heightmixed表格高度。可为数值、百分比或auto150
hiddengridboolean如果设置为true，表格开始被隐藏，数据不被载入，只显示标题。当第一次点击显示/隐藏按钮显示表格，数据从服务器载入。false
hidegridboolean是否允许显示/隐藏按钮可用。只有标题不为空时可用。true
hoverrowsboolean表行是否有鼠标悬停效果true
jsonReaderarrayJSON数据结构数组
lastpageinteger请求返回的总页数0
lastsortinteger排序的列号（0开始）0
loadonceboolean设置为true时，表格只一次读取服务器数据（使用适当datatype），之后，datatype 自动变为local ，所有进一步 *** 作都在客户端完成，pager功能（若存在）将失效。false
loadtextstring数据请求和排序时显示的文本Loading…
loaduistring此项控制ajax进程进行时的动作。Disable—取消jqGrid的进程指示，可使用自定义的指示。 enable (缺省)—表格中间显示loading。 block – 显示“Loading”信息，禁用页面上的所有功能，直到数据装入完成。enable
mtypestring定义提交类型POST或GETGET
multikeystring此属性只有当multiselect为true时有效，定义多选时的组合键，可选值有： shiftKey ，altKey，ctrlKeyempty
multiboxonlyboolean此属性只有当multiselect为true时有效，. Multiboxonly设置为true时，只有点击checkbox时该行才被选中，点击其他列，将清除当前行的选中。false
multiselectboolean此属性设为true时启用多行选择，出现复选框false
multiselectWidthinteger若multiselect 为true时，定义多选列的宽度。20
pageinteger设置请求初始页的数量，此参数通过URL从服务器接受数据1
pagermixed定义分页浏览导航条。必须是一个HTML元素，如<div id="page"></div> empty
pagerposstring定义表格浏览导航条的位置，缺省情况下建立一个包括3部分的导航条：页码，导航按钮和记录信息。center
pgbuttonsboolean定义导航激活时导航按钮是否显示。true
pginputboolean定义导航栏是否有页码输入框。true
pgtextstring当前页信息。第一个量为当前页，第二个量为总页数。
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=1&rows=10&mysort=myindex&sord=asc 若将一些参数设为null，这些参数将不再发往服务器。例如prmNames: { nd:null} 则nd参数将不被发送。 Npage参数参见scroll option.none
postDataarray此数组能直接传递到url。这个数组可使用这种形式{name1:value1…}。empty
reccountinteger只读属性。定义表格显示的行数。切勿与records混淆。0
recordposstring定义页中记录信息的位置，可以是left，center，right。right
recordposobject交替行的类true
recordsinteger只读属性。定义从请求中获得的记录数none
recordtextstring可在页面上显示的提示信息，此文字只在viewrecords 为true是有效，并且当记录总数大于0时才显示。
此文字中{}中的内容表示：
{0} 该页显示的第一个记录的记录号
{1} 该页显示的最后一个记录的记录号
{2} 获得的记录总数
resizeclassstring列可变大小时的类empty
rowListarray[]用于改变显示行数的下拉列表框的元素数组。empty
rownumbersboolean若此属性为true，表格左侧将添加一用于显示行数（从1开始）的列。此时colModel自动扩展出一个名为rn的元素。所以在colModel中不要定义rn。false
rowNuminteger表格中可见的记录数。此参数通过url传递给服务器供检索数据用。注意：若此参数设置为10，而服务器返回15条记录，将只有10条记录被装入。若此参数被设置为-1，则此检查失效20
rownumWidthinteger当rownumbers为true时，定义显示行数的列的宽度。25
savedRowarray只读属性。用于行编辑和单元格编辑保存数据之前empty
scrollboolean or integer创建动态滚动表格。当设为启用时，pager被禁用，可使用垂直滚动条来装入数据。false
scrollOffsetinteger定义垂直滚动条的宽度。18
scrollrowsboolean该项启用时，用setSelection 选定一行，表格将滚动到被选行可见。false
selarrrowarray-[]只读属性。当multiselect 为true时，包含当前选定的行。此为一维数组，值为表格中选定行的ID。empty
selrowstring只读属性。内容是最后选定行的ID。如火应用了排序或pagging，该值为null。null
shrinkToFitboolean or integer该项描述计算每列相对于表格宽度的初始宽度的类型。
若为true，并且设置了列宽度，则每列的宽度根据定义宽度缩放。
若为false，并且设置了列宽度，表格宽度为设置宽度，列宽度不会重新计算，使用colModel中定义的值true
sortableobject启用此项，允许使用鼠标重新排序列。true
sortnamestring从服务器读取XML或JSON数据时初始的排序名，此名被加到URL中。empty
sortorderstring从服务器读取XML或JSON数据时初始的排序类型，此类型被加到URL中。可选值为asc或desc。asc
subGridboolean设置为true，可使用子表格。启用子表格，将在基本表的左边将添加一列，并包含一个“+”图像，用户可以点击扩展行。false
subGridModelarray-[]该属性用于描述子表格的模式，只有subGrid 为true时有效。它是一个用于描述子表格列的数组。empty
subGridTypemixed用于定义子表格装入的数据类型，若不定义，则使用与父表格同样的数据类型。null
subGridUrlstring该属性用于定义子表格获得数据的URL。行的ID将键入此URL中，若要添加其他参数，可使用subGridModel 中的选项。empty
subGridWidthinteger定义子表格的列宽20
toolbararray该参数定义表格的工具栏。参数是一个包含两个值的数组，第一个值使工具栏有效，第二个值相对位置（可以是top、bottom、both）。例如：设置toolbar为 [true,”both”]，将在表格的头部和底部建立两个工具栏，两个工具栏位两个DIV元素，头部DIV元素的ID为“t_表格ID”，底部DIV元素的ID为“tb_表格ID”。若只有一个工具栏（top或bottom）时，DIV的ID为“t_表格ID”。[false,'']
toppagerboolean是否在表格上部显示分页条。false
totaltimeinteger只读参数。用于记录装入XML和JSON数据的时间。0
treedatatypemixed定义初始数据类型null
treeGridboolean启用（禁用）TreeGrid。false
treeGridModelstring定义TreeGrid的方法。可以是nested或adjacency。nested
treeIconsarray此数组设置TreeGrid中使用的图标。图标应是UI theme中的有效图标。缺省为 {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'}
treeReaderarray扩展表格的colModel。这里定义的字段将添加到colModel的尾部并隐藏。服务器将返回这些字段的值。
tree_root_levelnumeric确定treeGrid相对于根元素的级别。0
urlstring请求数据的url地址null
userDataarray此数组保存请求的自定义信息，可随时使用empty
userDataOnFooterboolean到为true时， userData直接放置在页脚。false
viewrecordsboolean是否在浏览导航栏显示记录总数false
viewsortcolsarray定义表头中排序图标的外观和行为。缺省为[false,'vertical',true]。
第一个参数设定是否显示所有定义了排序的列旁显示图标。缺省的false表示只有当前排序列旁的图标显示。设为true可使所有可排序列都显示图标。
第二个参数设定排序图标如何放置。vertical为垂直放置，horizontal为水平放置。
第三个参数设定点击功能。True表示表头点击排序，false表示只点击排序图标排序。若将此参数设为false时，请确保第一个参数为true，否则将无法排序。
widthnumber若为设置，表格的宽度为colModel 中定义的所有列宽度的总和。若设置了该项，每列的初始宽度按照shrinkToFit 设置的值none
xmlReaderarray描述预期的XML数据结构的数组。
ColModel API
colModel属性以数组的形式定义各个表格列。这是jqGrid中很重要的部分。语法为：
jQuery("#gridid").jqGrid({
...
colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],
...
})
属性类型描述默认值
alignstring定义表格单元格（非表头）的对齐方式，可取值：left, center, right.left
classesstring此属性用于定义列的类名，当有多个类名时，用空格间隔，例如：“class1 class2”。在表格的CSS中，有一个预定义的类ui-ellipsis用于定义特定的行empty
datefmtstring日期格式，可用/，-和.。作为间隔符。y、Y、yyyy用于4位年，YY、yy用于2位的月，d、dd用于日期Y-m-d
defvalstring搜索字段的缺省值，此参数只用于自定义搜索是的初始值。empty
editableboolean定义字段是否可编辑，用于单元格编辑、行编辑和表单模式false
editoptionsarray根据edittype 参数定义可用的值数组empty
editrulesarray设置可编辑字段的补充规则empty
edittypestring定义行编辑和表单模式的编辑类型，可以是text、textarea、select、checkbox、 password、button、image和file。text
fixedboolean若设为true，即使shrinkToFit设置为true，列宽也不允许重新计算。GridWidth方法改变表格宽度时，列宽也不会改变。false
formoptionsarray定义表单编辑的各种选项empty
hidedlgboolean若设置为true，该列将不出现在模式对话框中，用户可以此控制列的显示或隐藏false
hiddenboolean定义初始化时，列是否隐藏。false
indexstring通过sidx参数设置排序时的索引名。empty
keyboolean在未从服务器获得ID的情况下，该列可设置为行ID。只有一列可设置该属性，若出现多列，表格只采用将第一个设置了该属性的列，其他列忽略。false
labelstring当colNames数组为空时，定义此列的标题。若colNames数组和此属性都为空，标题为该列的name属性值。none
namestring设置列在表格中的唯一名称，此属性是必须的。或者使用保留字subgrid、cb和rn.Required
resizableboolean定义是否可变列宽true
sortableboolean定义是否可以排序true
sorttypemixed当datatype为local时，用于定义排序列类型。可取int/integer（整数）、float/number/currency（小数）、date（日期）、text（文本）text
titleboolean当设置为false时，鼠标滑向单元格时不显示title属性true
widthnumber设置列的初始宽度，可用pixels和百分比
1 jqGrid动态增加列，目前还没有这样的方法
只能先卸载Grid再进行重绘，才能达到改变列的目的。
Java代码
jQuery('#grid1').GridUnload()
用这个方法 卸载jqgrid
然后重新设置吧
Java代码
jQuery('#grid1').jqGrid({
colNames:...,
colModel:...,
...
})
2 用本地 数据 修改表格
这个必须先把数据类型改成local
Java代码
$('#lgrid-1').jqGrid().clearGridData()
$('grid-1').jqGrid('setGridParam',
{ datatype:local,
rowNum:data.length,
data:data
}
).trigger('reloadGrid', [{page:1}])
一旦用本地数据 分页功能就不好用了,因为不会再去查后台了
3 修改多条 同时提交后台
Java代码
var savedRow = null
var savedCol = null
// 修正
$('#lgrid-3').setGridParam({
beforeEditCell : function(rowid, cellname, value, iRow, iCol) {
// 记录修改的表格
savedRow = iRow
savedCol = iCol
}
})
// 向后台发送数据前 保存表格的修改
if (savedRow &&savedCol) {
jQuery('#grid-3').jqGrid('saveCell', savedRow, savedCol)
}
// 取得表格的数据 全部
var data = $('#grid-3').jqGrid().getRowData()
4 隐藏列
Java代码
jQuery('#grid_id').hideCol('somecol').trigger('reloadGrid')
显示用 showCol
5 可以多选的情况下 默认选中
Java代码
$('#list').jqGrid().setSelection(1)
如果已经被选中 则是 反选
6 数据绑定前检查
Java代码
ajaxGridOptions:
{dataFilter:
function(data,dataType){// preprocess the data
if ( $(data).find("code").text() == 'problem' ) { // check for an error in the result
$("#list").jqGrid('GridUnload')
$("#errormsg").text( $(data).find("description").text() )
}else{
return data
}
}
}
<script>
$(document).ready(function()
{
initPlsfList()
})
//初始化grid列表
function initPlsfList(){
//缓存表列数组,key 为页面元素的name ，value 对应数据库中的字段
var cellArray = new Array()
cellArray["zoneID"] ="ZONE_ID"
cellArray["factorPG"] ="FACTOR_PG"
cellArray["factorQG"] ="FACTOR_QG"
cellArray["factorPL"] ="FACTOR_PL"
cellArray["factorQL"] ="FACTOR_QL"
cellArray["valid"] ="VALID"
var caseID = '${caseID}'
$("#plsfList").jqGrid({
url:"<c:url value='/lfc/powerlsfactor/queryData?caseID="+caseID+"' />",
datatype: "json",
mtype:"POST",
height: "auto",
width: "auto",
colNames:[
'id',
"<fmt:message key='case.valid'/>",
"<fmt:message key='zone'/>",
"<fmt:message key='pasf'/>",
"<fmt:message key='pisf'/>",
"<fmt:message key='lasf'/>",
"<fmt:message key='lisf'/>",
'modeID'
],
colModel:[
{name:'id',index:'id', width:100,hidden:true},
{name:'valid',index:'valid', width:100,editable:true,
formatter:formatValid,
editable:true,edittype:'checkbox',
editoptions:{value:'1:0',defaultValue:'1'}
},
{name:'zoneName',index:'zoneName', width:150,editable:true},
{name:'factorPG',index:'factorPG', width:100,editable:true},
{name:'factorQG',index:'factorQG', width:100,editable:true},
{name:'factorPL',index:'factorPL', width:100,editable:true},
{name:'factorQL',index:'factorQL', width:100,editable:true},
{name:'caseID',index:'caseID', width:100,hidden:true},
],
rowNum:10,
rowList:[10,20,30],
pager: '',
cellEdit:true,
viewrecords: true,
jsonReader: { repeatitems : false, id: "id" },
viewsortcols:[false,'horizontal',false],
sortable:false,
sortorder:"asc",
sortname:"id",
multiselect: true,
cellurl:"<c:url value='/lfc/powerlsfactor/save'/>",
cellsubmit: 'remote',
gridComplete: function() {
var $selecAll = $("#cb_plsfList")
var cb_title = "<fmt:message key='select.all' bundle='${commonResources}'/>"
if($selecAll){
$selecAll.attr("title",cb_title)
}
//设置全选checkbox title
var rowIds = jQuery("#plsfList").jqGrid('getDataIDs')
for(var k=0k<rowIds.lengthk++) {
var curRowData = jQuery("#plsfList").jqGrid('getRowData', rowIds[k])
var curChk = $("#"+rowIds[k]+"").find(":checkbox")
//curChk.attr('title', curRowData.modeName) //给checkbox赋予额外的属性值
}
},
onSortCol:function(index,iCol,sortorder){
return false
},
ondblClickRow: function (rowid,iRow,iCol,e) {
/*var $plsfList = $("#plsfList")
if (isRowNeedSave($plsfList)){
showMessage("请先保存")
}else{
$("#operate").val("update")
newrowid = rowid
$plsfList.setGridParam({cellEdit:false})
$plsfList.jqGrid('editRow', rowid, true)
//确定按钮可用
$("#confirm_btn").attr("disabled",false)
}*/
},
beforeSubmitCell:function(rowid, cellname, value, iRow, iCol){
//列提交前的拦截方法
var $plsfList = $("#plsfList")
var $editUrl = '<c:url value='/lfc/powerlsfactor/save'/>'
//设置列提交的url。updateCellName：要编辑的列名 ；updateCellValue ：是编辑的值
$editUrl = addParamToUrl($editUrl,'updateCellName',iCol == 3 ? cellArray['zoneID'] :cellArray[cellname])
$editUrl = addParamToUrl($editUrl,'updateCellValue',iCol == 3 ? $("#zone_id").val():value)
//给jqgrid 从新设置cellurl 值
$plsfList.setGridParam({cellurl:$editUrl})
return false
},
afterEditCell:function(rowid, cellname, value, iRow, iCol){
//动态修改lie时，当列 变为可修改状态时，给列add一个button，且列中元素不可编辑，点击button d出一个模态窗口，可以选择元素 ，赋值给grid当前编辑列中单行表单域中.
$("#"+rowid+" input[type='checkbox']").attr("checked",value == "<fmt:message key='case.valid'/>" ? true:false)
if(iCol==3){
$("#irowNum").val(rowid)
var $data = $("#"+rowid +">td")//获取这个行里所有的td元素，即：获取所有子元素
$zoneInput = $data.find("input").eq("1")
$zoneInput.css("width","100px")
$zoneInput.attr("disabled",true)
$zoneInput.after("<input type='button' value='选择' onclick='fnCallDialogForEidt()' />")
}
}
})
//grid添加新的一行
var newrowid
function addRow()
{
$("#operate").val("")
var selectedId = $("#plsfList").jqGrid("getGridParam", "selrow")
var ids = jQuery("#plsfList").jqGrid('getDataIDs')
//获得当前最大行号（数据编号）
var rowid = Math.max.apply(Math,ids)
//获得新添加行的行号（数据编号）
newrowid = rowid+1
var dataRow = {
id: "",
valid:"",
zoneID:'',
factorPG:'',
factorQG:'',
factorPL:'',
factorQL:'',
caseID:''
}
//将新添加的行插入到第一列
$("#plsfList").jqGrid("addRowData", newrowid, dataRow, "first")
//设置grid单元格不可编辑
$("#plsfList").setGridParam({cellEdit:false})
//设置grid单元格可编辑
$('#plsfList').jqGrid('editRow', newrowid, false)
//确定按钮可用
$("#confirm_btn").attr("disabled",false)
//给添加的列加选择按钮
var $zoneInput = $("#"+newrowid+"_zoneName")
$zoneInput.attr("disabled",true).css("width",100)
$zoneInput.after("<input type='button' value='选择' onclick='fnCallDialogForEidt()' />")
}
function insertPlsf(){
var $plsfList = $("#plsfList")
var $operate = $("#operate").val()
//设置grid单元格可编辑
$plsfList.setGridParam({cellEdit:true})
//设置grid行不可编辑
//$plsfList.jqGrid('editRow', newrowid, false)
//拼接请求的url
var url = '<%=basePath%>'+"/lfc/powerlsfactor/save"
var $params = $plsfList.find("input[id^="+newrowid+"]")
var $check_val = $params.eq(0).is(':checked') ? 1:0
url = addParamToUrl(url,'valid',$check_val)
url = addParamToUrl(url,'zoneID',$("#zone_id").val())
url = addParamToUrl(url,'factorPG',$params.eq(2).val())
url = addParamToUrl(url,'factorQG',$params.eq(3).val())
url = addParamToUrl(url,'factorPL',$params.eq(4).val())
url = addParamToUrl(url,'factorQL',$params.eq(5).val())
var $caseID = $("#caseID").val()
url = addParamToUrl(url,'caseID',$caseID)
$.ajax({url:url,type:"post",timeout:5000,
success:function(data){
showMessage(data)
reloadGrid()
}
})
//将新添加行号 初始为空
newrowid = ''
//确定按钮不可用
$("#confirm_btn").attr("disabled",true)
}
//格式zone列输出内容
function formatZone(cellvalue, options, rowObject){
if(cellvalue == 0){
return 0
}else if(cellvalue == 1){
return 1
}else if(cellvalue == 2){
return 2
}else{
return 3
}
}
function isRowNeedSave($jqgrid){
var $editTr = $jqgrid.find("tr[editable=1]")
var flag = false
if ( $editTr &&$editTr.length >0){
flag = true
}
return flag
}
function cancel(){
reloadGrid()
//确定按钮不可用
$("#confirm_btn").attr("disabled",true)
//设置grid单元格可编辑
$("#plsfList").setGridParam({cellEdit:true})
//设置grid单元格可编辑
$('#plsfList').jqGrid('editRow', newrowid, true)
}
function fnCallDialogForEidt(){
//获得当前行号（数据编号）
var returnValue = ""
returnValue = window.showModalDialog("<c:url value='/element/zone/query?caseID="+$("#caseID").val()+"' />",window,"")
if(returnValue==""||returnValue==null)
return
var $plsfList = $("#plsfList")
var $params = $plsfList.find("input[id$='zoneName']")
var names = returnValue.split(",")
$params.eq(0).val(names[1])
$("#zone_id").val(names[0])
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）