【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: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