jqGrid 翻页 | 您所在的位置:网站首页 › jqgrid翻页事件 › jqGrid 翻页 |
jqGrid的翻页要定义在html里,通常是在grid的下面,且是一个div对象: · · · jQuery("#grid_id").jqGrid({ · ... · pager : '#gridpager', · ... · }); 不必给翻页设置任何的css属性。在jqGrid里定义的翻页可以是::pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). 推荐使用前两个,当使用其他方式时jqGrid的导入导出功能时会引起错误。 导航栏的属性: · $.jgrid = { · defaults : { · recordtext: "View {0} - {1} of {2}", · emptyrecords: "No records to view", · loadtext: "Loading...", · pgtext : "Page {0} of {1}" · }, · ... · } 如果想改变这些设置: 1. jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});
2. jQuery("#grid_id").jqGrid({ ... pager : '#gridpager', emptyrecords: "Nothing to display", ... }); 导航栏的属性: 属性名 类型 说明 默认值 是否可以被修改 lastpage integer 只读属性,总页数 0 NO pager mixed 导航栏对象,必须是一个有效的html元素,位置可以随意 空字符串 NO pagerpos string 定义导航栏的位置,默认分为三部分:翻页,导航工具及记录信息 center NO pgbuttons boolean 是否显示翻页按钮 true NO pginput boolean 是否显示跳转页面的输入框 true NO pgtext string 页面信息,第一个值是当前页第二个值是总页数 语言包 YES reccount integer 只读属性,实际记录数,千万不能跟records 参数搞混了,通常情况下他们是相同的,假如我们定义rowNum=15,但我们从服务器端返回的记录为20即records=20,而reccount=15,表格中也显示15条记录 0 NO recordpos string 定义记录信息的位置,可选值:left, center, right right NO records integer 只读属性,从服务器端返回的记录数 none NO recordtext string 显示记录的信息,只有当viewrecords为true时起效,且记录数必须大于0 语言包 yes rowList array 可以改变表格可以显示的记录数,格式为[10,20,30] array no rowNum integer 设置表格可以显示的记录数 20 yes viewrecords boolean 是否要显示总记录数信息 false no jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid"); 跟翻页相关的事件只有一个:onPaging onPaging pgButton 当点击翻页按钮但还为展现数据时触发此事件,当然这跳转栏输入页码改变页时也同样触发此事件。参数pgButton可选值: first,last,prev,next
jqGrid的翻页导航是一个方法,你可以事先定义一些其他操作,比如:编辑、新增、删除及搜索。也可以增加自定义的函数。导航工具栏是定义到翻页控件上的。定义如下: · · ... · · · ... ·
· jQuery("#grid_id").jqGrid({ · ... · pager : '#gridpager', · ... · }); · jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
· 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 :表格id gridpager :导航栏id parameters :参数列表 prmEdit, prmAdd, prmDel, prmSearch, prmView :事件 · $.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" · }, · ... 属性 类型 说明 默认值 add boolean 是否启用新增功能,当点击按钮时会触发editGridRow事件 true addicon string 给新增功能设置图标,只有UI theme里的图标才可以使用 ui-icon-plus addtext string 新增按钮上的文字 空 addtitle string 当鼠标移到新增按钮上时显示的提示 新增一行 alertcap string 当我们edit,delete or view一行记录时出现的提示信息 警告 alerttext string 当edit,delete or view一行记录时的文本提示 请选择一行记录 closeOnEscape boolean 是否可以使用esc键关闭对话框 true del boolean 是否启用删除功能,启用时会触发事件delGridRow true delicon string 设置删除按钮的图标,只有UI theme里的图标才可以使用 ui-icon-trash deltext string 设置到删除按钮上的文字信息 空 deltitle string 当鼠标移到删除按钮上时出现的提示 删除锁选择的行 edit boolean 是否启用可编辑功能,当编辑时会触发事件editGridRow true editicon string 设置编辑按钮的图标,只有UI theme里的图标才可以使用 ui-icon-pencil edittext string 编辑按钮上文字 空 edittitle string 当鼠标移到编辑按钮上出现的提示信息 编辑所选择的行 position string 定义按钮位置,可选值left, center and right. left refresh boolean 是否启用刷新按钮,当点击刷新按钮时会触发trigger(“reloadGrid”)事件,而且会清空搜索条件值 true refreshicon string 设置刷新图标,只有UI theme里的图标才可以使用 ui-icon-refresh refreshtext string 刷新按钮上文字信息 空 refreshtitle string 当鼠标移到刷新按钮上的提示信息 重新加载 refreshstate string 指明表格如何刷新。firstpage:从第一页开始刷新;current:只刷新当前页内容 firstpage afterRefresh function 当点击刷新按钮之后触发此事件 null search boolean 是否启用搜索按钮,会触发searchGrid 事件 true searchhicon string 设置搜索按钮的图标,只有UI theme里的图标才可以使用 ui-icon-search searchtext string 搜索按钮上的文字 空 searchtitle string 当鼠标移到搜索按钮上的提示信息 搜索 view boolean 是否启用查看按钮,会触发事件viewGridRow false viewicon string 设置查看按钮的图标,只有UI theme里的图标才可以使用 ui-icon-document viewtext string 查看按钮上文字 空 viewtitle string 当鼠标移到查看按钮上的提示信息 查看所选记录
· jQuery("#grid_id").jqGrid({ · ... · pager : '#gridpager', · ... · }).navGrid('#gridpager',{view:true, del:false}, · {}, // use default settings for edit · {}, // use default settings for add · {}, // delete instead that del:false we need this · {multipleSearch : true}, // enable the advanced searching · {closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/ · ); |
CopyRight 2018-2019 实验室设备网 版权所有 |