將按鈕添加到新的頂部工具欄？

Question

我試圖將按鈕添加到新的頂部工具欄。我已經在頂部有一個用於搜索過濾的工具欄，但是我想在它上面放置一個新的工具欄來爲菜單添加按鈕。

菜單與網格左下方的菜單相同。如果用戶將行列表設置爲高，Juse使用戶更容易，因此他們不必向下滾動到底部。

這樣做的最好方法是什麼？歡迎舉例，我對此很感興趣。

這是我創建工具欄和按鈕的代碼。

JS

// Toolbar 
$("#customer_grid").jqGrid('filterToolbar', {searchOnEnter: false}); 

// Bottom left buttons 
$("#customer_grid").jqGrid('navButtonAdd',"#customer_grid_pager",{caption:"Add Customer",title:"Add Customer",buttonicon :'ui-icon-plus', 
      onClickButton:function(){ 

      } 
    }); 

    $("#customer_grid").jqGrid('navButtonAdd',"#customer_grid_pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh', 
      onClickButton:function(){ 
        $("#customer_grid")[0].clearToolbar() 
      } 
    }); 
    $("#customer_grid").jqGrid('navButtonAdd',"#customer_grid_pager",{caption:"Close",title:"Close Search",buttonicon :'ui-icon-close', 
      onClickButton:function(){ 

      } 
    }); 

非常感謝

Answer 1

首先，我建議你閱讀this和this老答案，描述如何toppager作品。如果您使用toppager:true jqGrid選項，將在搜索工具欄上方創建附加的傳呼機工具欄。如果您使用導航器的cloneToTop:true選項，則所有標準導航按鈕都將添加到這兩個工具欄中。因爲toppager的名稱將根據來自網格id的修復規則構建：grid_id =「list」的「list_toppager」（在您的情況下爲「customer_grid_toppager」），您可以使用您使用的相同navButtonAdd方法將按鈕添加到頂部導航欄像底部導航欄。你應該只使用其他的尋呼機ID（「#customer_grid_toppager」而不是「#customer_grid_pager」）。

我修改the demo從the answer爲您the following demo，它做你的需要：

相應的代碼如下：

var mygrid = $("#list"), 
    pagerSelector = "#pager", 
    mydata = [ 
     {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
     {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
     {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
     {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
     {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
     {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
     {id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
     {id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
     {id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
     {id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
     {id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
     {id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} 
    ], 
    myAddButton = function(options) { 
     mygrid.jqGrid('navButtonAdd',pagerSelector,options); 
     mygrid.jqGrid('navButtonAdd','#'+mygrid[0].id+"_toppager",options); 
    }; 

mygrid.jqGrid({ 
    datatype: 'local', 
    data: mydata, 
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
    colModel:[ 
     {name:'id',index:'id',width:70,sorttype:'int', 
     searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}}, 
     {name:'invdate',index:'invdate',width:80,align:'center',sorttype:'date', 
     formatter:'date',formatoptions:{srcformat:'Y-m-d', newformat:'d-M-Y'}, 
     srcfmt:'d-M-Y', datefmt:'d-M-Y', 
     searchoptions: { 
      sopt:['eq','ne','lt','le','gt','ge'], 
      dataInit:function(elem) { 
       setTimeout(function() { 
        $(elem).datepicker({ 
         dateFormat: 'dd-M-yy', 
         autoSize: true, 
         //showOn: 'button', // it dosn't work in searching dialog 
         changeYear: true, 
         changeMonth: true, 
         showButtonPanel: true, 
         showWeek: true 
        }); 
       },100); 
      } 
     }}, 
     {name:'name',index:'name', width:100}, 
     {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, 
     {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, 
     {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, 
     {name:'note',index:'note', width:150, sortable:false} 
    ], 
    height: '100%', 
    width: 720, 
    toppager: true, 
    gridview: true, 
    pager: pagerSelector, 
    rowNum: 10, 
    rowList: [5, 10, 20, 50], 
    sortname: 'id', 
    sortorder: 'asc', 
    viewrecords: true, 
    caption: 'Add buttons to both top and bottom toolbars' 
}); 
mygrid.jqGrid('navGrid',pagerSelector, 
       {cloneToTop:true,edit:false,add:false,del:false,search:true}); 
mygrid.jqGrid('filterToolbar', 
       {stringResult:true, searchOnEnter:true, defaultSearch:'cn'}); 

myAddButton ({ 
    caption:"Add Customer", 
    title:"Add Customer", 
    buttonicon :'ui-icon-plus', 
    onClickButton:function(){ 
     alert("Add Customer"); 
    } 
}); 
myAddButton ({ 
    caption:"Clear", 
    title:"Clear Search", 
    buttonicon:'ui-icon-refresh', 
    onClickButton:function(){ 
     mygrid[0].clearToolbar(); 
    } 
}); 
myAddButton ({ 
    caption:"Close", 
    title:"Close Search", 
    buttonicon:'ui-icon-close', 
    onClickButton:function(){ 
     alert("Close Search"); 
    } 
});