jqGrid导航Navigator配置

　　导航是一个用户界面，可以简单执行记录操作如查找或者编辑，用户可以执行表格操作通过点击对应的在导航栏上的图标按钮。

　　开发者可以创建自定义的动作，或者使用jqGrid已经定义的6个动作。jqGrid预定义的动作如下

  1. 添加新记录
  2. 编辑选择的行
  3. 查看选择的记录
  4. 删除选择的行
  5. 查找记录
  6. 重新加载grid

这6个按钮在导航层的底部左边位置，如下图所示

jqGrid导航Navigator配置

导航层不一定在底部，可以放置到grid窗体内。同时，导航层是可选的，可以删除掉。

* 可以在导航才呢过添加有自定义动作的jqGrid自定义按钮
  • 可以修改鼠标移动到按钮上提示的信息（参考下面的，text可以在语言文件中找到）

* 导航按钮可以放在左边，中间或者右边

如何使用

Navigator是jqGrid的方法，可以通过扩展jqGrid的方法来激活配置，如下面的示例所示。最下面给出客配置的参数。

内置的导航放置在分页元素内容。所有jqGrid的pager需要配置过。内置的导航动作对应表单编辑动作，更多信息参考：Form Editing.

定义

要使用导航，Form Edit module , Common module 和可选的 the search and Modal modules需要被勾选，下载地址：http://www.trirand.com/blog/?page_id=6

HTML定义

<body>
...
   <table id="list"></table> 
   <div id="gridpager"></div> 
...
</body>
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
});
jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
...

新API调用方式

//...
jQuery("#grid_id").jqGrid({
//...
   pager : '#gridpager',
//...
});
jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
//...

链式调用方式

//...
jQuery("#grid_id").jqGrid({
//...
   pager : '#gridpager',
...
}).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView);
//...

参数说明

  • grid_id：已经被实例化过的jqGrid对象的id
  • gridpager：导航条容器id
  • parameters ：下面列出的配置项
  • prmEdit, prmAdd, prmDel, prmSearch, prmView ：json对象，包含表单编辑中需要的参数和事件，参考 Form editing

　　prmEdit, prmAdd, prmDel, prmSearch, prmView 需要定义一个id参数以便区分导航按钮，如果id没有定义，将使用前缀和grid的id组成。【注意这几个参数的循序，循序搞错定义的对象还是按照上面的循序来定义，如你只需要添加按钮，prmEdit这个参数不能省略，传递{}启用默认配置】

　　如果按钮id没有设置，将使用如下规则生成id。

  1. 添加按钮，id为 “add_"+grid的id
  2. 编辑按钮，id为 “edit_"+grid的id
  3. 删除按钮，id为 “del_"+grid的id
  4. 查看按钮，id为 “view_"+grid的id
  5. 查找按钮，id为 “search_"+grid的id
  6. 刷新按钮，id为 “refresh_"+grid的id
　　下面的代码定义一个编辑按钮 
//...
jQuery("#grid_id").jqGrid({
//...
   pager : '#gridpager',
...
}).navGrid('#gridpager',{}, {id:'myedit'});
//...

如果ui-state-disabled 养生被添加到这些按钮中，按钮及点击动作都会被禁用。

参数

导航可以使用下面的选项，来自语言配置文件。

如果想修改鼠标悬浮再按钮上时提示的信息，可以替换示例代码最下面的title内容，例如，修改查看按钮的鼠标悬浮提示信息，viewtitle: “View selected row”

$.jgrid = {
...
   search : {
     caption: "Search...",
     Find: "Find",
     Reset: "Reset",
     odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],
     groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],
     matchText: " match",
     rulesText: " rules"
   },
   edit : {
     addCaption: "Add Record",
     editCaption: "Edit Record",
     bSubmit: "Submit",
     bCancel: "Cancel",
     bClose: "Close",
     saveData: "Data has been changed! Save changes?",
     bYes : "Yes",
     bNo : "No",
     bExit : "Cancel",
  },
  view : {
    caption: "View Record",
    bClose: "Close"
  },
  del : {
    caption: "Delete",
    msg: "Delete selected record(s)?",
    bSubmit: "Delete",
    bCancel: "Cancel"
  },
  nav : {
    edittext: "",
    edittitle: "Edit selected row",
    addtext:"",
    addtitle: "Add new row",
    deltext: "",
    deltitle: "Delete selected row",
    searchtext: "",
    searchtitle: "Find records",
    refreshtext: "",
    refreshtitle: "Reload Grid",
    alertcap: "Warning",
    alerttext: "Please, select row",
    viewtext: "",
    viewtitle: "View selected row"
  },
...

	

		 $.jgrid.edit, $.jgrid.add, $.jgrid.del and $.jgrid.search 这些配置的按钮显示在同一行上。

	

		parameters的玩完整配置如下

	

		
			

				
					配置名称
				
					类型
				
					描述
				
					默认值
			

			

				
					add
				
					boolean
				
					是否在导航栏中显示添加操作。点击这个按钮将会调用addRow(addParams)方法
				
					true
			

			

				
					addicon
				
					string
				
					设置添加按钮的图标。目前仅能设置为UI比附中的图标
				
					ui-icon-plus
			

			

				
					addtext
				
					string
				
					在添加按钮中显示的文本内容
				
					empty
			

			

				
					addtitle
				
					string
				
					鼠标移动到添加按钮上时显示的提示信息
				
					Add new row
			

			

				
					alertcap
				
					string
				
					没有选择某行时，点击编辑，删除，查看按钮，弹出的提示窗口标题栏显示的信息
				
					Warning
			

			

				
					alerttext
				
					string
				
					没有选择某行时，点击编辑，删除，查看按钮，弹出的提示窗口内容容器显示的信息
				
					Please, select row
			

			

				
					cloneToTop
				
					boolean
				
					设置为true，所有底部分页的动作都会被克隆并且添加到顶部分页去。注意navGrid只能做yuyu顶部分页。顶部分页容器id格式为griid+"_toppager”
				
					false
			

			

				
					closeOnEscape
				
					boolean
				
					定义提示窗口是否可以通过按ESC键关闭
				
					true
			

			

				
					del
				
					boolean
				
					是否在导航栏中显示删除操作。点击这个按钮将会调用delGridRow()方法
				
					true
			

			

				
					delicon
				
					string
				
					设置删除按钮的图标。目前仅能设置为UI比附中的图标
				
					ui-icon-trash
			

			

				
					deltext
				
					string
				
					在删除按钮中显示的文本内容
				
					empty
			

			

				
					deltitle
				
					string
				
					鼠标移动到添加删除上时显示的提示信息
				
					Delete selected row
			

			

				
					edit
				
					boolean
				
					是否在导航栏中显示编辑操作。点击这个按钮将会调用editRow(editParams)方法
				
					true
			

			

				
					editicon
				
					string
				
					设置编辑按钮的图标。目前仅能设置为UI比附中的图标
				
					ui-icon-pencil
			

			

				
					edittext
				
					string
				
					在编辑按钮中显示的文本内容
				
					empty
			

			

				
					edittitle
				
					string
				
					鼠标移动到编辑按钮上时显示的提示信息
				
					Edit selected row
			

			

				
					position
				
					string
				
					定义导航按钮在分页容器中的位置，可用值有： left, center 和 right.
				
					left
			

			

				
					refresh
				
					boolean
				
					是否在导航栏中显示刷新操作。点击这个按钮将会调用trigger(“reloadGrid”) 并且清空查询参数。
				
					true
			

			

				
					refreshicon
				
					string
				
					设置刷新按钮的图标。目前仅能设置为UI比附中的图标
				
					ui-icon-refresh
			

			

				
					refreshtext
				
					string
				
					在刷新按钮中显示的文本内容
				
					empty
			

			

				
					refreshtitle
				
					string
				
					鼠标移动到刷新按钮上时显示的提示信息
				
					Reload Grid
			

			

				
					refreshstate
				
					string
				
					定义grid要如何重新加载。

					firstpage ：grid重新加载第一页数据.

					current ：保存当前页和当前选择		
				
					firstpage
			

			

				
					afterRefresh
				
					function
				
					定义点击刷新按钮后触发的事件
				
					null
			

			

				
					beforeRefresh
				
					function
				
					定义点击刷新按钮前触发的事件
				
					null
			

			

				
					search
				
					boolean
				
					是否在导航栏中显示查询操作。点击这个按钮将会调用searchGrid 方法
				
					true
			

			

				
					searchicon
				
					string
				
					设置刷新按钮的图标。目前仅能设置为UI比附中的图标
				
					ui-icon-search
			

			

				
					searchtext
				
					string
				
					在刷新按钮中显示的文本内容
				
					empty
			

			

				
					searchtitle
				
					string
				
					鼠标移动到刷新按钮上时显示的提示信息
				
					Find records
			

			

				
					view
				
					boolean
				
					是否在导航栏中显示查看操作。点击这个按钮将会调用viewGridRow 方法
				
					false
			

			

				
					viewicon
				
					string
				
					设置查看按钮的图标。目前仅能设置为UI比附中的图标
				
					ui-icon-document
			

			

				
					viewtext
				
					string
				
					在查看按钮中显示的文本内容
				
					empty
			

			

				
					viewtitle
				
					string
				
					鼠标移动到查看按钮上时显示的提示信息
				
					View selected row
			

			

				
					addfunc
				
					function
				
					配置此函数将会替换内置的添加操作处理函数。此方法没有参数
				
					null
			

			

				
					editfunc
				
					function
				
					配置此函数将会替换内置的编辑操作处理函数。参数被编辑的行id
				
					null
			

			

				
					delfunc
				
					function
				
					配置此函数将会替换内置的删除操作处理函数。参数被编辑的行id
				
					null
			

		
	

	

		编辑方法的更多配置参考： Form Editing

	

		示例

	

		
//...
jQuery("#grid_id").jqGrid({
//...
   pager : '#gridpager',
//...
}).navGrid('#gridpager',{view:true, del:false}, //启用查看按钮，禁用删除按钮
{}, // 使用默认的修改配置
{}, // 使用默认的添加配置
{},  // delete instead that del:false we need this
{multipleSearch : true}, // 语序高级查询
{closeOnEscape:true} /* 用户按下ESC键后可以关闭对话框*/
);
//...

	

	

		上面的代码启用查看操作，并且可以通过ESC键关闭提示对话框，设置高级查询，同时禁用了删除按钮





	来源：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator



	 


加支付宝好友偷能量挖...

	


原创文章，转载请注明出处：jqGrid导航Navigator配置




评论(0)Web开发网


阅读(8277)喜欢(1)jqGrid中文API