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', 55, sortable:false, editable:false, editoptions:{readonly:true,size:10}}, 10 {name:'provider',index:'provider', 200,editable:false}, 11 {name:'name',index:'name', 200,editable:true}, 12 {name:'year',index:'year', 100,editable:true}, 13 {name:'description',index:'description', 300,editable:true}, 14 {name:'type',index:'type', 200,editable:true,edittype:'select',editoptions:{dataUrl: '/jqGridOptionData?entity=WineType'}}, 15 {name:'geographical_region',index:'geographical_region', 200,editable:true}, 16 {name:'creationDate',index:'creationDate', 100}, 17 {name:'editDate',index:'editDate', 100}, 18 ], 19 jsonReader : { 20 repeatitems:false21 }, 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 | |||