将按钮添加到新的顶部工具栏?

时间:2011-04-01 20:44:21

标签: javascript jquery jqgrid

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

菜单与网格左下角的菜单相同。如果用户将行列表设置为高,则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(){

            }
    });

非常感谢

1 个答案:

答案 0 :(得分:8)

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

我将the demothe answer修改为the following demo,这样做可以满足您的需求: enter image description here

相应的代码如下:

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