jqGrid ColModel详解
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等
colNames:['ID','角色名称', '角色说明'],
colModel:[
{name:'ID', index:'ID',width:55,sortable:false,hidden:true},
{name:"LBMC",width:80,sortable:false},
{name:"SM",width:80,sortable:false}
],
var rowId = $("#gridTable").getGridParam('selrow');
var rowData = $("#gridTable").getRowData(rowId);
jqGrid就是通过rowId来选择执行其他操作,而不是rowData.ID
注意:rowId是指table tr.id
如果colModel的属性中有name:'id'(小写,从数据库里面读出来的),这个值会把table tr的id覆盖了。此时rowId == rowData.id。
如果colModel的属性中没有有name:'id',会自动生成tr.id
jqGrid生成的源码如下:
<table id="gridTable" class="ui-jqgrid-btable" cellspacing="0" cellpadding="0" border="0" tabindex="1" role="grid" aria-multiselectable="true" aria-labelledby="gbox_gridTable" style="width: 1144px;">
<tbody>
<tr id="1" class="ui-widget-content jqgrow ui-row-ltr bgeaeff1" role="row" tabindex="-1">
<td aria-describedby="gridTable_cb" style="text-align:center;width: 20px;" role="gridcell">
<input id="jqg_gridTable_1" class="cbox" type="checkbox" name="jqg_gridTable_1" role="checkbox">
</td>
<td aria-describedby="gridTable_ID" title="4028818d2e8a1592012e8a1c1c0e0003" style="display:none;" role="gridcell">4028818d2e8a1592012e8a1c1c0e0003</td>
<td aria-describedby="gridTable_LBMC" title="2" style="" role="gridcell">2</td>
<td aria-describedby="gridTable_SM" title="2" style="" role="gridcell">2</td>
</tr>
</tbody>
</table>
ColModel是jqGrid里面最核心的属性。大部分配置都在这里面进行。所有的属性的含义对应如下:
Property |
Type |
Description |
Default |
align |
string |
Defines the alignment of the cell in the Body layer,
not in header cell. Possible values: left, center, right. {name:’id’,align:’left’},实现左对齐。 |
left |
classes |
string |
This option allow to add classes to the column. If more
than one class will be used a space should be set. By example classes:’class1
class2′ will set a class1 and class2 to every cell on that column. In the
grid css there is a predefined class ui-ellipsis which allow to attach
ellipsis to a particular row. Also this will work in FireFox too. |
empty string |
datefmt |
string |
Governs format of sorttype:date (when datetype is set
to local) and editrules {date:true} fields. Determines the expected date
format for that column. Uses a PHP-like date formatting. Currently ”/”,
”-”, and ”.” are supported as date separators. Valid formats are: |
ISODate (Y-m-d) |
defval |
string |
The default value for the search field. This option is
used only in Custom Searching and will be set as initial search. |
empty |
editable |
boolean |
Defines if the field is editable. This option is used
in cell, inline and form modules. |
false |
editoptions |
array |
Array of allowed options (attributes) for edittype
option editing |
empty array |
editrules |
array |
sets additional rules for the editable field editing |
empty array |
edittype |
string |
Defines the edit type for inline and form editing
Possible values: text, textarea, select, checkbox, password, button, image
and file. |
text |
fixed |
boolean |
If set to true this option does not allow recalculation
of the width of the column if shrinkToFit option is set to true. Also the
width does not change if a setGridWidth method is used to change the grid
width. |
false |
formoptions |
array |
Defines various options for form editing. |
empty |
formatoptions |
array |
Format options can be defined for particular columns,
overwriting the defaults from the language file. See Formatter for more details. |
none |
formatter |
mixed |
The predefined types (string) or custom function name
that controls the format of this field. {name:’sex’,index:’sex’,
align:’center’,width:60,editable:true,edittype:’select’,editoptions:{value:’0:待定;1:男;2:女’},formatter:function(cellvalue, options, rowObject){ |
none |
hidedlg |
boolean |
If set to true this column will not appear in the modal
dialog where users can choose which columns to show or hide. |
false |
hidden |
boolean |
Defines if this column is hidden at initialization. |
false |
index |
string |
Set the index name when sorting. Passed as sidx
parameter. |
empty string |
jsonmap |
string |
Defines the json mapping for the column in the incoming
json string. |
none |
key |
boolean |
In case if there is no id from server, this can be set
as as id for the unique row id. Only one column can have this property. If
there are more than one key the grid finds the first one and the second is
ignored. |
false |
label |
string |
When colNames array is empty, defines the heading for
this column. If both the colNames array and this setting are empty, the
heading for this column comes from the name property. |
none |
name |
string |
Set the unique name in the grid for the column. This
property is required. As well as other words used as property/event names,
the reserved words (which cannot be used for names) include subgrid, cb and
rn. |
Required |
resizable |
boolean |
Defines if the column can be re sized |
true |
search |
boolean |
When used in search modules, disables or enables
searching on that column. |
true |
searchoptions |
array |
Defines the search options used searching |
empty |
sortable |
boolean |
Defines is this can be sorted. |
true |
sorttype |
string |
Used when datatype is local. Defines the type of the
column for appropriate sorting.Possible values: |
text |
stype |
string |
Determines the type of the element when searching. |
text |
surl |
string |
Valid only in Custom Searching and edittype : ‘select’
and describes the url from where we can get already-constructed select
element |
empty string |
width |
number |
Set the initial width of the column, in pixels. This
value currently can not be set as percentage {name:’id’,index:’id’, width:180,editable:true,editoptions:{readonly:true,size:10}} |
150 |
xmlmap |
string |
Defines the xml mapping for the column in the incomming xml file. |
none |
unformat |
function |
Custom function to “unformat” a value of the cell when
used in editing Unformat is also called during sort operations. The value
returned by unformat is the value compared during the sort.) |
null |
下一篇: ps海绵工具使用详解实例教程