BlazerOfIT / extjs / 6、jqGrid 3.6.2 中文文档——BasicGrid(...

0 0

   

6、jqGrid 3.6.2 中文文档——BasicGrid(4)

2011-10-14  BlazerOfIT

6、jqGrid 3.6.2 中文文档——BasicGrid(4)

分类: JQuery 2118人阅读 评论(1) 收藏 举报

Common functions and settings(公共功能和设置)

这些功能可用于任何项目中,不限于jqGrid对象。语法为:

 

<script>

...

jQuery.jgrid.jqGridFunction( parameter1,...parameterN );

...

</script>

 

这里:jgrid.jqGridFunction是函数名.

parameter1,…parameterN 为参数列表

注意命名空间jgrid

 

功能/选项

参数

返回

描述

ajaxOptions

空对象

none

设置用于表格的ajax的公共参数。此设置可能会覆盖当前特殊的ajax设置。从3.6开始,有3ajax设置。

第一级是模块级ajax设置;第二级即是此处的ajax设置;第三级为通过在具体方法上附加参数进行ajax设置,第三级的优先级最高。

我们可以进行ajax的全局设置:

jQuery.extend(jQuery.ajax({method specific options}, ajaxOptions, ThirdLevelajaxSettinds));

我们有可能为每个ajax请求增加序列化功能传递给服务器。

jqID

string

parsed string

转义字符,将两个反斜杠(//)转为单个反斜杠(/)。在jQuery选择器中使用以得到正确结果。

jgrid.htmlDecode

string

decoded_string

将一个HTML 编码的字符串还原为原html代码。

jgrid.htmlEncode

string

encoded_string

进行HTML编码——逆变换为htmlDecode

jgrid.format

string

formated_string

简单字符串模板。第一个参数为字符串模板,第二个参数可选,若指定,将替代第一个参数中的占位符。如:

jQuery.jqgformat(“Please enter a value between {0} and {1}.”, 4, 8)

结果为:Please enter a value between 4 and 8

jgrid.getCellIndex

cell

index

该方法用于修复在IE7上的一个bug——CellIndex计算结果不正确。cell 为单元格内容,即td元属。

jgrid.stringToDoc

xmlstring

xmlDoc

xmlstring 转化为dom文档。

jgrid.stripHtml

content

new_content

去除content中的html标记。

jgrid.parse

jsonString

object

jsonStringJSON文本)转换为对象或数组。

为防止JavaScript hijacking攻击,建议使用该功能,返回一个变量的JSON表示。

jqGrid获得json数据时,使用此功能。

 

 

Add on Grid Methods(附加表格方法)

要使用这些方法,需要在下载grid是选中Custom 复选框。开发版中,这些方法位于grid.custom.js 中。

 

方法

参数

返回值

描述

filterGrid

grid_id,

params

HTML对象

此方法用于构造网格的搜索表单界面。grid_id 为要搜索网格的ID

parms 为一个参数数组(见下)详见custom searching

filterToolbar

params

jqGrid对象

此方法同上,不同的是搜索输入元素在header的下方,搜索输入元素的宽度随header宽度的变化而变化。另一个不同是此方法的定义在colModel 中。详见Toolbar searching

getColProp

colname

array{}

返回给定列名的属性数组,列名为colModel中定义的名称。

GridDestroy

grid_id

成功true

否则false

DOM删除id= grid_id 的网格(清楚所有html元属及相关的方法)

GridUnload

grid_id

成功true

否则false

与以上方法不同的是网格被删除,但table元素和pager (若有的话)保留,供再次使用。

setGridState

state

jqGrid对象

根据state参数显示或隐藏网格。当state设置为visible时,网格将显示。当state设置为hidden时,网格将隐藏。此方法将不触发onHeaderClick 事件,表格的caption将总是显示。

setColProp

colname,

properties

jqGrid对象

设置新的colModel属性。此方法对动态改变列属性很有用。但有些属性的变化并不生效(见colModel options例如:

jQuery(”#grid_id”).setColProp('colname',{editoptions:{value:“True:False”}}); 将改变editoptions值。

sortGrid

colname,

reload

jqGrid对象

按给定列排序并显示排序标志。

效果同setGridParam({sortname:'myname'}).trigger('reloadGrid')

reload设置为true,网格将按当前页和排序设置重新加载。

updateGridRows

data,

rowidname,

jsonreader

成功true

否则false

更新网格中rowidname行的数据。data为数组,格式为:

[{name:value,name1:value1…}, {name:value,name2:value2…}]

NamecolModel中定义的名称, value为实际值。不需要包括全部数据,(与setRowData方法相同)。

rowidname (字符串) 为行的名称。

jsonreader(布尔值)缺省为false。若设置为true,以jsonReader 定义data。只有当repeatitems 设置为true时才有效。此时data中不是name:value对,只是value

 

 


 

HOW TO jqGrid的公共问题

允许FireFox RTL (Right To Left)语言

jqGrid完全支持FireFox 3.xInternet Explorer 6FireFox缺省设置不兼容RTL,可如下修改:

FireFoxURL输入about:config,出现警告信息;

Find中输入layout.scrollbar.side

双击layout.scrollbar.side修改01

RTL 3.6后开始可用。

配置jqGrid只使用新API

此工作应在安装过程中按以下步骤:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery.jgrid.no_legacy_api = true;

</script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

</head>

<body>

...

</body>

</html>

注意调用:

<script type="text/javascript">

  jQuery.jgrid.no_legacy_api = true;

</script>This line should be after the language file and before the jqGrid JS file

新的jqGrid API3.6开始可用

配置jqGrid是浏览器支持JSON.parse

到目前为止,主流浏览器IE8, Firefox 3.5Chrome 3已经支持JSON解析。

此工作应在安装过程中按以下步骤:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script type="text/javascript">

  jQuery.jgrid.useJSON = true;

</script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

</head>

<body>

...

</body>

</html>

注意调用:

<script type="text/javascript">

  jQuery.jgrid.useJSON = true;

</script>

此行应在语言文件后,jqGridJS文件前。

请注意这不影响不支持该功能的浏览器,如果浏览器不支持,将使用eval解析请求。

此项在从3.6开始可用。

使用JSON 响应时,用JSON.parse 代替jqGrid eval

在你想使用JSON.parse时,可按以下方法做

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/json2.js" type="text/javascript"></script>

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">

   jQuery.extend(jQuery.jgrid,{

      parse:function(jsstring) {

         return JSON.parse(jsstring);

      }

   });

</script>

</head>

<body>

...

</body>

</html>

json2.js 文件可从http://www.json.org/js.html 下载。

 

客户端排序,服务器端分页

为实现此功能,请确定网格定义了两个事件——loadCompleteonPaging。以下代码演示如何实现:

 

jQuery("#gridid").jqGrid({

...

datatype: 'json',      // 可以是xml

loadComplete : function () {

   jQuery("#gridid").jqGrid('setGridParam',{datatype:'local'});

},

onPaging : function(which_button) {

   jQuery("#gridid").jqGrid('setGridParam',{datatype:'json'});

},

...

});

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 或 拨打24小时举报电话:4000070609 与我们联系。

    猜你喜欢

    0条评论

    发表

    请遵守用户 评论公约

    类似文章
    喜欢该文的人也喜欢 更多