【JQGRID DOCUMENTATION】.学习笔记.2.基本表格
JqGrid的实例是一个JavaScript对象，带有属性，事件和方法。属性可以是字符串，数字，数组，布尔值或任何其他对象。
1 调用的约定：
1
$("#grid_id").jqGrid(options);
options是一个”name:value”对格式的数组。这些设置中，有些是值，有些是执行他们关联事件的函数，有些是命令jqGrid工作的。
1
<
script
type
="text/javascript"
>
2
jQuery(document).ready(
function
(){
3
jQuery(
"
#grid
"
).jqGrid({
4
url:
'
/jqGridModel?model=Wine
'
,
5
datatype:
"
json
"
,
6
mtype:
'
GET
'
,
7
colNames:[
'
id
'
,
'
Provider
'
,
'
Name
'
,
'
Year
'
,
'
Description
'
,
'
Type
'
,
'
Geographical Region
'
,
'
Creation Date
'
,
'
Edit Date
'
],
8
colModel:[
9
{name:
'
id
'
,index:
'
id
'
, width:
55
, sortable:
false
, editable:
false
, editoptions:{readonly:
true
,size:
10
}},
10
{name:
'
provider
'
,index:
'
provider
'
, width:
200
,editable:
false
},
11
{name:
'
name
'
,index:
'
name
'
, width:
200
,editable:
true
},
12
{name:
'
year
'
,index:
'
year
'
, width:
100
,editable:
true
},
13
{name:
'
description
'
,index:
'
description
'
, width:
300
,editable:
true
},
14
{name:
'
type
'
,index:
'
type
'
, width:
200
,editable:
true
,edittype:
'
select
'
,editoptions:{dataUrl:
'
/jqGridOptionData?entity=WineType
'
}},
15
{name:
'
geographical_region
'
,index:
'
geographical_region
'
, width:
200
,editable:
true
},
16
{name:
'
creationDate
'
,index:
'
creationDate
'
, width:
100
},
17
{name:
'
editDate
'
,index:
'
editDate
'
, width:
100
},
18
],
19
jsonReader : {
20
repeatitems:
false
21
},
22
rowNum:
10
,
23
rowList:[
10
,
20
,
30
],
24
pager: jQuery(
'
#gridpager
'
),
25
sortname:
'
name
'
,
26
viewrecords:
true
,
27
sortorder:
"
asc
"
,
28
caption:
"
Wines
"
,
29
editurl:
"
/jqGridModel?model=Wine
"
30
}).navGrid(
'
#gridpager
'
);
31
});
32
</
script
>
2 Options
在grid创建后，一些属性不能被改变了。Can be changed？表示列在grid创建后能不能被修改。
| Property | Type | Description | Default | Can be changed? |
| ajaxGridOptions | object | 这个选项允许在grid请求数据时，设置global ajax setting。在gird中的error，complete和beforeSend事件能重写当前ajax setting | empty object | Yes |
| ajaxSelectOptions | object | 数据时通过editoptions或searchoption对象中设置的dataUrl选项获取的，这个选项允许在global ajax setting设置select | empty object | Yes |
| altclass | string | 给斑马行应用不用的样式。只有在altRows属性设为true时可用 | ui-priority-secondary | Yes. 需要重载 |
| altRows | boolean | 设置斑马行 | false | Yes. 在重载后 |
| autoencode | boolean | 当设为true，从服务器发来的数据会html encode，编辑模式posted的数据也会html encode | false | Yes |
| autowidth | boolean | 当设为true时，gird宽度会自动。当父元素改变宽度时，为了重设grid的宽度，需要应用自定义代码，并使用setGridWidth方法。 | false | No |
| caption | string | 定义gird的标题。标题显示在标题布局中，它在header布局上方，如果string是空,则不显示 | empty string | No. 方法有用 |
| cellLayout | integer | 这个选项指明padding+border的宽度。一般它不用改变。如果自定义了grid css文件中的td元素，那么需要改变。他的初始值是5，paddingLef(2)+paddingRight(2)+borderLeft(1)=5 | 5 | No |
| cellEdit | boolean | 启用或禁用cell编辑。 | false | Yes |
| cellsubmit | string | 指明cell被保存。可以是远程或客户端数组 | ‘remote’ | Yes |
| cellurl | string | cell被保存的url。 | null | Yes |
| cmTemplate | object | 定义一组属性，重写colModel中的默认值。例如，如果你想使得所有的列不能排序，可以在这里指定一个属性，代替所有colModel列中的属性 | null | No |
| colModel | array | 描述列的数组。是grid最重要的一部分。 | empty arrag | No |
| colNames | array | 设置列名的数组。显示在grid head布局上的文本。 | empty array[] | No |
| data | array | 存储本地数据的数组，传递给gird。可以直接指定这个变量，加载一个数组数据。它能替换addRowData方法 | empty array | Yes |
| datastr | string | 当datatype参数被设为xmlstring或jsonstring时，数据的字符串 | null | Yes |
| datatype | string | 定义填充grid的期待的数据格式。可用的选项时xml,xmlstring,json,jsonstring,local,javascript,function或客户端手工加载的数据数组 | xml | Yes |
| deepempty | boolean | 如果一个事件或一个插件加到表格cell中，这个选项应该设为true。这个选项为行和行的所有子元素使用jQuery empty。它影响速速，但能放置内存泄露。当一个可排序的row和/或column活动时，应设为true | false | Yes |
| deselectAfterSort | boolean | 当使用datatype:local时，使用该项。当排序应用时，反选当前选择的行 | true | Yes |
| direction | string | 指明grid中文本的方向。默认是Left To Right，ltr。在一个页面中有两个gird，两个grid可以有不同的文本方向。 | ltr | No |
| editurl | string | 定义行和表单的编辑地址。也可以设置为clientArray来手工post数据到服务器 | null | Yes |
| emptyrecords | string | 当grid中返回的记录数为0时，显示的字符串。只有viewrecords选项为true时，这个选项才可用 | see lang file | Yes |
| ExpandColClick | boolean | 当设为true时，我们点击后treegrid展开或关闭。 | true | No |
| ExpandColumn | string | 指明那一列用来展开treegrid。如果没有设置，默认为第一列。只有treegrid设为true时可用 | null | No |
| footerrow | boolean | 如果设为true，会将footer table放在grid的下方，pager的上方。列数等于colModel中指定的 | false | No |
| forceFit | boolean | 如果设为true，并且列的宽度变了，临近的列会重设，整个grid的宽度会维持。 | false | No |
| gridstate | string | 指明grid的当前状态：visible或hidden | visable | No |
| gridview | boolean | 在以前的版本，渲染一个行数大于100的大数据会导致速度问题。原因是因为插入到grid中的每个cell，我们都应用了五六个jQuery调用。现在这个问题解决了。偶们现在使用jQuery append一次加以整行。结果很明显，速度提升了三五倍。如果我们一次插入全部的数据呢？是的，可以使用gridview选项。结果时grid块了五到十倍。当然，这个选项设为true时，我们有一些局限性，我们不能使用treeGrid,sbuGrid,或afterInserRow事件。如果你不使用这三个选项，你可以设为true来享受速度 | false | Yes |
| grouping | boolean | 在grid中启用分组。 | false | Yes |
| headertitles | boolean | 如果设为true，title属性被加到column headers | false | No |
| height | mixed | 可以使用数字或百分比（只能是100%），或auto | 150 | No. Method avail |
| hiddengrid | boolean | 如果设为true，grid初始化后hidden。数据没有被载入，只有caption layer显示。当show/hide按钮第一次被点击来显示grid，请求发送到服务器，数据被载入，grid显示。关于这点，我们有regular grid。这个选项只有在cation选项时空，并且hidegrid属性设为true时，有效 | false | No |
| hidegrid | boolean | 启用或禁用show/hide按钮，出现在cation layout的右边。只有在caption属性不为空时生效 | true | No |
| hoverrows | boolean | 设为false时，鼠标悬停在grid data rows被禁用 | true | Yes |
| idPrefix | string | |||