jqGrid自定义按钮

jqGrid分页器自定义按钮

自定义按钮可以执行自定义动作,被添加到分页器中。

定义

调用方式

jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});

新API调用方式

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

parameters 默认配置

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

 

参数说明

  • caption:(string)按钮中显示的内容
  • buttonicon: (string) :设置自定义按钮的图标,和UI主题中的图标名称一致。如果设置为 “none”,仅显示caption配置的内容。如果没有配置,默认的图标为“ui-icon-newwin”
  • onClickButton:(function) 点击按钮后执行的事件,默认为null
  • position: (“first” or “last”) 按钮的位置(例如,在内置标准按钮之前或者后面),默认为last
  • title:(string)鼠标移动到按钮上显示的提示信息
  • cursor:(string )定义鼠标移动到按钮上,鼠标形状(默认 pointer)
  • id :(string 类型,可选)定义按钮的id(实际为td元素的id)

调用navButtonAdd方法添加自顶按钮前,首先需要调用navGrid方法。

示例,通过链式方法添加多个自定按钮
jQuery("#grid_id")
.navGrid('#pager',{edit:false,add:false,del:false,search:false})
.navButtonAdd('#pager',{
   caption:"Add", 
   buttonicon:"ui-icon-add", 
   onClickButton: function(){ 
     alert("Adding Row");
   }, 
   position:"last"
})
.navButtonAdd('#pager',{
   caption:"Del", 
   buttonicon:"ui-icon-del", 
   onClickButton: function(){ 
      alert("Deleting Row");
   }, 
   position:"last"
});

分隔符

添加分隔符以便给一些动作分组,可以调用navSeparatorAdd方法添加

调用方式

jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};

separator_parameters默认值为

{sepclass : "ui-separator",sepcontent: ''}

参数说明

  • sepclass:jqGrid UI主题中定义的分隔符号样式,可以设置为自己自定义的样式
  • sepcontent:分隔符号中显示的内容

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


原创文章,转载请注明出处:jqGrid自定义按钮

评论(0)Web开发网
阅读(2851)喜欢(2)不喜欢(0)jqGrid中文API