Добавить кнопки на новую верхнюю панель инструментов?

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

Прежде всего, я рекомендую вам прочитать этот и этот старый ответ, который описывает, как работает топпер.Если вы используете опцию toppager:true jqGrid, над панелью инструментов поиска будет создана дополнительная панель инструментов пейджера.Если вы используете опцию cloneToTop:true навигатора, все стандартные кнопки навигации будут добавлены на обе панели инструментов.Поскольку имя toppager будет построено на основе правила исправления из идентификатора сетки: «list_toppager» для идентификатора сетки = «список» (в вашем случае «customer_grid_toppager»), вы можете использовать тот же navButtonAdd метод, который вы используете для добавления кнопки на верхнюю панель навигации, как на нижнюю панель навигации.Вам просто нужно использовать другой идентификатор пейджера (в вашем случае это "#customer_grid_toppager" вместо "#customer_grid_pager").

Я изменил демо из ответа для вас следующее демо , которое делает то, что вам нужно:

Соответствующий код следует:

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