【转】 jqGrid基础学习：jqGrid中在导航条使用按钮

转至：http://blog.csdn.net/yangbobo1992/article/details/7929873

 

 

 

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