如何给jqgrid导航栏增加自定义按钮及其事件

Question

除了自带的add ,del等，我想增加一个导出excel和导入excel等按钮，如何实现？
谢谢

Answer 1

jQuery("#grid_id").navButtonAdd('#pager',{
   caption:"Excel", 
   buttonicon:"ui-icon-excel", 
   onClickButton: function(){ 
      alert("导出excel");
   }, 
   position:"last"
});参考：jqGrid自定义按钮

Answer 2

$("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', 
                                    { edit: true, add: false, del: false, search:false }, 
                                    { closeOnEscape: true, closeAfterEdit: true,
                                        afterSubmit: function (response, postdata) {
                                        var res = $.parseJSON(response.responseText);
                                        if (res && res.insertStatus) {
                                        alert(res.insertStatus);
                                        //return [true,response.message]
                                            }
                                            else
                                            {
                                                alert(res.insertStatus);
                                                
                                            }
                                            return [true,response.message] ;
                                        // you should don't forget to return
                                        //     return [true, ""];
                                        // in case of successful editing and return
                                        //     return [true, "", newId];
                                        // with the Id of new row generated from the server
                                        // if you would use reloadAfterSubmit: false
                                        // option of editGridRow
                                        }
                                    },  
                                    {closeOnEscape: true,closeAfterAdd: true,
                                    afterSubmit: function (response, postdata) {
                                        var res = $.parseJSON(response.responseText);
                                        if (res && res.insertStatus) {
                                                alert(res.insertStatus);
                                            }
                                            else
                                            {
                                                alert(res.insertStatus);
                                            }
                                             return [true,response.message] ;
                                        // you should don't forget to return
                                        //     return [true, ""];
                                        // in case of successful editing and return
                                        //     return [true, "", newId];
                                        // with the Id of new row generated from the server
                                        // if you would use reloadAfterSubmit: false
                                        // option of editGridRow
                                        }
                                    });
        }).jqGrid('navButtonAdd',"#UsersGridPager",{caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"});;       
        
不起作用。没有增加上按钮。

Answer 3

你自己的代码有问题。。
$("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', 
                                    { edit: true, add: false, del: false, search:false }, 
                                    { closeOnEscape: true, closeAfterEdit: true,
                                        afterSubmit: function (response, postdata) {
                                        var res = $.parseJSON(response.responseText);
                                        if (res && res.insertStatus) {
                                        alert(res.insertStatus);
                                        //return [true,response.message]
                                            }
                                            else
                                            {
                                                alert(res.insertStatus);
                                                 
                                            }
                                            return [true,response.message] ;
                                        // you should don't forget to return
                                        //     return [true, ""];
                                        // in case of successful editing and return
                                        //     return [true, "", newId];
                                        // with the Id of new row generated from the server
                                        // if you would use reloadAfterSubmit: false
                                        // option of editGridRow
                                        }
                                    },  
                                    {closeOnEscape: true,closeAfterAdd: true,
                                    afterSubmit: function (response, postdata) {
                                        var res = $.parseJSON(response.responseText);
                                        if (res && res.insertStatus) {
                                                alert(res.insertStatus);
                                            }
                                            else
                                            {
                                                alert(res.insertStatus);
                                            }
                                             return [true,response.message] ;
                                        // you should don't forget to return
                                        //     return [true, ""];
                                        // in case of successful editing and return
                                        //     return [true, "", newId];
                                        // with the Id of new row generated from the server
                                        // if you would use reloadAfterSubmit: false
                                        // option of editGridRow
                                        }
                                    });
        }).jqGrid('navButtonAdd',"#UsersGridPager",{caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"});;   
多了红色的部分  

Answer 4

自己检查代码，添加自定义按钮就是navButtonAdd方法，看下是不是表格长度不够，没有显示出来