jqgrid--自定义按钮

最新推荐文章于 2025-05-15 10:06:13 发布

jonathanzhan

最新推荐文章于 2025-05-15 10:06:13 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery插件

本文链接：https://blog.youkuaiyun.com/whatlookingfor/article/details/38381927

Jquery插件专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在JqGrid中自定义按钮，包括设置按钮名称、图标、事件处理函数、位置和提示信息等参数。同时，讲解了多个按钮间使用分隔符的方法，提供了默认参数和分隔符的样式配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

新的API

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

默认参数

    { 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

如果设置多个按钮：

    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"    
      
    });

按钮间的分隔

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

默认参数：

{sepclass : “ui-separator”,sepcontent: ''}

sepclass：ui-jqgrid的属性名
sepcontent：分隔符的内容.