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开发网
阅读(3151)喜欢(3)jqGrid中文API