将按钮添加到新的顶部工具栏？ [英] Add buttons to a new top toolbar?

问题描述

我正在尝试将按钮添加到新的顶部工具栏。我已经在顶部有一个工具栏用于搜索过滤，但我想在其上方放置一个新工具栏来添加菜单按钮。

I'm trying to add buttons to a new top toolbar. I already have a toolbar at the top for search filtering, but I would like to place a new toolbar above it to add buttons for a menu.

菜单与网格左下角的菜单相同。如果用户将行列表设置为高，则Juse使用户更容易，因此他们不必向下滚动到底部。

The menu is the the same as the ones in the bottom left of the grid. Juse makes it easier for the user if they have row list set high, so they dont have to scroll down to the bottom.

这样做的最佳方法是什么？示例欢迎，我很擅长这个。

What would be the best way to do this? Examples welcome, im pritty new to this.

这是我创建工具栏和按钮的代码。

This is my code to create the toolbar and buttons.

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(){

            }
    });

非常感谢

推荐答案

首先，我建议你阅读这个和这个老答案描述了toppager如何运作。如果使用 toppager：true jqGrid选项，将在搜索工具栏上方创建其他分页器工具栏。如果您使用导航器的 cloneToTop：true 选项，则将在两个工具栏中添加所有标准导航按钮。因为toppager的名称将根据网格id的修复规则构建：list_toppager用于grid id =list（在你的情况下为customer_grid_toppager）你可以使用相同的 navButtonAdd 方法，用于将按钮添加到顶部导航栏，如同底部导航栏。您应该只使用寻呼机的另一个ID（#customer_grid_toppager而不是#customer_grid_pager）。

First of all I recommend you to read this and this old answer which describe how the toppager works. If you use toppager:true jqGrid option the additional pager toolbar will be created above the searching toolbar. If you use cloneToTop:true option of the navigator all standard navigation buttons will be added in the both toolbars. Because the name of the toppager will be constructed based on the fix rule from the id of the grid: "list_toppager" for the grid id="list" (in your case "customer_grid_toppager") you can use the same navButtonAdd method which you use to add the button to the top navigation bar like to the bottom navigation bar. You should just use another id of the pager ("#customer_grid_toppager" instead of "#customer_grid_pager" in your case).

我修改了演示来自答案给你以下演示，它可以满足您的需求：

I modified the demo from the answer for you to the following demo, which do what you need:

相应的代码如下：

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

这篇关于将按钮添加到新的顶部工具栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！