JqGrid的实例是一个JavaScript对象,带有属性,事件和方法。属性可以是字符串,数字,数组,布尔值或任何其他对象。

1 调用的约定:

$("#grid_id").jqGrid(options);

options是一个”name:value”对格式的数组。这些设置中,有些是值,有些是执行他们关联事件的函数,有些是命令jqGrid工作的。

jQuery(document).ready(function(){ jQuery("#grid").jqGrid({ url:'/jqGridModel?model=Wine', datatype: "json", mtype: 'GET', colNames:['id', 'Provider', 'Name', 'Year', 'Description', 'Type', 'Geographical Region', 'Creation Date', 'Edit Date'], colModel:[ {name:'id',index:'id', width:55, sortable:false, editable:false, editoptions:{readonly:true,size:10}}, {name:'provider',index:'provider', width:200,editable:false}, {name:'name',index:'name', width:200,editable:true}, {name:'year',index:'year', width:100,editable:true}, {name:'description',index:'description', width:300,editable:true}, {name:'type',index:'type', width:200,editable:true,edittype:'select',editoptions:{dataUrl: '/jqGridOptionData?entity=WineType'}}, {name:'geographical_region',index:'geographical_region', width:200,editable:true}, {name:'creationDate',index:'creationDate', width:100}, {name:'editDate',index:'editDate', width:100}, ], jsonReader : { repeatitems:false }, rowNum:10, rowList:[10,20,30], pager: jQuery('#gridpager'), sortname: 'name', viewrecords: true, sortorder: "asc", caption:"Wines", editurl:"/jqGridModel?model=Wine" }).navGrid('#gridpager'); }); </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      
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         

【JQGRID DOCUMENTATION】.学习笔记.2.基本表格的更多相关文章

  1. iView学习笔记(三):表格搜索,过滤及隐藏列操作

    iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...

  2. 吴裕雄--天生自然HTML学习笔记:HTML 表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  4. HTML&CSS基础学习笔记1.16-单元格间距和表格主体

    上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...

  5. jQgrid学习笔记

    jQgrid学习笔记

  6. amazeui学习笔记--css(HTML元素5)--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  7. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  8. 学习笔记 第九章 使用CSS美化表格

    第9章  使用CSS美化表格 学习重点 正确使用表格标签: 设置表格和单元格属性: 设计表格的CSS样式. 9.1 表格的基本结构 表格由行.列.单元格3部分组成,单元格时行与列交叉的部分. 在HTM ...

  9. MongoDB学习笔记(转)

    MongoDB学习笔记(一) MongoDB介绍及安装MongoDB学习笔记(二) 通过samus驱动实现基本数据操作MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB ...

随机推荐

  1. Android java判断字符串包含某个字符段(或替换)

    String str = "; ) { System.out.println("包含该字符串"); }

  2. 经过各种坑之后centos+ uwsgi + nginx +django 终于配好了

    https://pypi.python.org/pypi/setuptools#downloads https://www.python.org/ftp/python/ 开机 加入 uwsgi ngi ...

  3. [BS-14] 打印NSArray和NSDictionary的3种方法

    打印NSArray和NSDictionary的3种方法 NSArray *arr = @[@"奔驰",@"宝马",@"路虎",@" ...

  4. Fiddler 的Window 8.1中不可以正常工作

    昨天晚上新升级了操作系统至Windows 8.1 Pro,发现使用Fiddler时网站不能正常使用,导致“代理错误”等信息. 解决方案: http://fiddler2.com/blog/blog/2 ...

  5. snapshot standby database

    快照备库接收和归档主库发送来的redo,但是不会应用:切换成physical standby之后会自动开启redo apply.快照standby不可以参加主备切换:在最大保护性模式下,如果只有一个备 ...

  6. arm跑飞 分析

    当arm跑飞后,可以用ICE 追踪是哪边出错了: 1. 链接ICE, 修改Ice的mode,由 udf -> system. (因为跑飞了,在UDF) 2. 查看寄存器: LR对应callbac ...

  7. 链表操作,空间复杂度要求为O(1)

    对于O(1)的空间复杂度要求,不能对链表进行复制等操作,双指针法对处理该类问题比较有效. 同时由于链表头结点的特殊性,可以考虑引入一个空的头结点来辅助操作.

  8. Swift游戏实战-跑酷熊猫 05 踩踏平台是怎么炼成的

    这节内容我们一起学习下随机长度的踩踏平台的原理是怎么样的. 要点: 平台的组成 我们的平台由3部分组成 左: 中: 右: 其中中间部分是可以无缝衔接的,下面就是两个中间部分衔接在一起 要任何长度的平台 ...

  9. @Transactional

    转载请标明出处:http://blog.csdn.net/cuker919/archive/2010/10/21/5957209.aspx Spring事务的传播行为 在service类前加上@Tra ...

  10. 转:Jmeter之Bean shell使用(二)

    上一篇Jmeter之Bean shell使用(一)简单介绍了下Jmeter中的Bean shell,本文是对上文的一个补充,主要总结下常用的几种场景和方法,相信这些基本可以涵盖大部分的需求.本节内容如 ...