jqGrid基础学习：8jqGrid中在导航条使用按钮

jqGrid中可以再导航条上设置按钮，其中jqGrid已经默认设置了一些按钮，此外，用户也可以自定义自己的按钮。

使用默认的方法
系统中默认的按钮主要是对数据进行CRUD的操作的按钮。方法如下

jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true,view:true},{
//这里可以指定edit的一些属性和方法，如果不需要配置，可以不要这对大括号
},{
//这里可以指定add的一些属性和方法，如果不需要配置，可以不要这对大括号
},{
//这里可以指定del的一些属性和方法，如果不需要配置，可以不要这对大括号

},{
//这里可以指定搜索的一些属性，如果不需要配置，可以不要这对大括号
});

自定义按钮

 jQuery("#list").jqGrid('navButtonAdd','#pager',{
    caption: "",
   // buttonicon:"ui-icon-print",
    title: "选择要的列",
    onClickButton : function (){
        jQuery("#list").jqGrid('columnChooser');
    }

}).navSeparatorAdd("#pager",{sepclass : "ui-separator",sepcontent: ''}).navButtonAdd('#pager',{
                                           caption:"",
                                           title:"导出数据",
                                           buttonicon:"ui-icon-disk",
                                           onClickButton: function(){
                                             jAlert("您没有选择一行，将导出所有数据");
                                           },
                                           position:"last"
                                        });

navSeparatorAdd是增加一个|进行按钮分割.

也可以参考下官方的一些属性配置

$.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	当鼠标移到查看按钮上的提示信息	查看所选记录

自定义按钮的官方的说明：

<script>
...
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});
...
</script> 

或者用新API

<script>
...
jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});
...
</script>

默认参数

{ caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"}

caption：按钮名称，可以为空，string类型
buttonicon：按钮的图标，string类型，必须为UI theme图标
onClickButton：按钮事件，function类型，默认null
position：first或者last，按钮位置
title：string类型，按钮的提示信息
cursor：string类型，光标类型，默认为pointer
id：string类型，按钮id