工具栏？

Question

我想在jqGrid中创建一个工具栏，只用通常在寻呼机上的按钮。

目前我有以下定义

$("#foroGrid").jqGrid('navGrid', '#pager', 
    { add: true, addtitle: 'Add Foro', 
     edit: true, edittitle: 'Edit Foro', 
     del: true, deltitle: 'Delete Foro', 
     refresh: true, refreshtitle: 'Refresh data', 
     search: true, searchtitle: 'Show Filters', 
     addfunc: addForo, editfunc: editForo, delfunc: deleteForo }, 
    {}, // default settings for edit 
    {}, // default settings for add 
    {}, // default settings for delete 
    { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options 
    {} 
); 

，我必须添加像“CSV导出”，“PDF导出”，“打印”等功能的要求，等等...

事实证明，空间已满，我想要移动顶部工具栏中的按钮，同时仍然使用导航器和底部的记录计数信息。

是否有可能用jqGrid实现这种配置？

Answer 1

看this老雷的答案。在我看来，它确实是你想要的。

Answer 2

如果你想按钮添加到你必须做一些像this顶部工具栏：

就像我在以前的文章 说添加按钮工具栏的jqGrid是一个 有点棘手。您需要在 jqGrid的设置

的末尾添加 下面的代码，你做了之后，你可以使用：

$("#tableID").toolbarButtonAdd("#t_tableID",{caption:"",position:"first",title:"Refresh", align:"right", buttonicon :'ui-icon-refresh', onClickButton:function(){ $("#tableID").trigger("reloadGrid"); } }); 

Answer 3

我已经扩展了脚本adding-buttons-in-jqgrid-toolbar并添加了以相同方式添加标签和锚点的功能。 现在你可以使用：

$("#tableID").toolbarButtonAdd("#t_tableID",{caption:"",position:"first",title:"Refresh", align:"right", buttonicon :'ui-icon-refresh', onClickButton:function(){ $("#tableID").trigger("reloadGrid"); } }) 
$("#tableID").toolbarLabelAdd("#t_tableID", { caption: "0 Selected", position: "first", title: "", align: "right", id: 'lblSelectedRows' }); 
$("#tableID").toolbarAncherAdd("#t_tableID", { caption: "Select All", title: "Select All", id: 'btnSelectAll', onClickButton: function() { selectAllRecords(true); } }); 

这里是库代码：

$.fn.extend({ 
/* 
* 
* The toolbar has the following properties 
* id of top toolbar: t_<tablename> 
* id of bottom toolbar: tb_<tablename> 
* class of toolbar: ui-userdata 
* elem is the toolbar name to which button needs to be added. This can be 
*  #t_tablename - if button needs to be added to the top toolbar 
*  #tb_tablename - if button needs to be added to the bottom toolbar 
*/ 
toolbarButtonAdd: function(elem, p) { 
    p = $.extend({ 
     caption: "newButton", 
     title: '', 
     buttonicon: 'ui-icon-newwin', 
     onClickButton: null, 
     position: "last" 
    }, p || {}); 
    var $elem = $(elem); 
    var tableString = "<table style='float:left;table-layout:auto;' cellspacing=\"0\" cellpadding=\"0\" border=\"0\" class='ui-toolbar-table'>"; 
    tableString += "<tbody> <tr></tr></table>"; 
    //console.log("In toolbar button add method"); 
    /* 
    * Step 1: check whether a table is already added. If not add 
    * Step 2: If there is no table already added then add a table 
    * Step 3: Make the element ready for addition to the table 
    * Step 4: Check the position and corresponding add the element 
    * Step 5: Add other properties 
    */ 
    //step 1 
    return this.each(function() { 
     if (!this.grid) { return; } 
     if (elem.indexOf("#") != 0) { 
      elem = "#" + elem; 
     } 
     //step 2 
     if ($(elem).children('table').length === 0) { 
      $(elem).append(tableString); 
     } 
     //step 3 
     var tbd = $("<td style=\"padding-left:1px;padding-right:1px\"></td>"); 
     $(tbd).addClass('ui-toolbar-button ui-corner-all').append("<div class='ui-toolbar-div'><span class='ui-icon " + p.buttonicon + "'></span>" + "<span>" + p.caption + "</span>" + "</div>").attr("title", p.title || "") 
     .click(function(e) { 
      if ($.isFunction(p.onClickButton)) { p.onClickButton(); } 
      return false; 
     }) 
     .hover(
      function() { $(this).addClass("ui-state-hover"); }, 
      function() { $(this).removeClass("ui-state-hover"); } 
     ); 
     if (p.id) { $(tbd).attr("id", p.id); } 
     if (p.align) { $(elem).attr("align", p.align); } 
     var findnav = $(elem).children('table'); 
     if (p.position === 'first') { 
      if ($(findnav).find('td').length === 0) { 
       $("tr", findnav).append(tbd); 
      } else { 
       $("tr td:eq(0)", findnav).before(tbd); 
      } 
     } else { 
      //console.log("not first"); 
      $("tr", findnav).append(tbd); 
     } 
    }); 
}, 
toolbarLabelAdd: function(elem, p) { 
    p = $.extend({ 
     caption: "newLabel", 
     title: '', 
     id: '', 
     position: "last" 
    }, p || {}); 
    var $elem = $(elem); 
    var tableString = "<table style='float:left;table-layout:auto;' cellspacing=\"0\" cellpadding=\"0\" border=\"0\" class='ui-toolbar-table'>"; 
    tableString += "<tbody> <tr></tr></table>"; 
    /* 
    * Step 1: check whether a table is already added. If not add 
    * Step 2: If there is no table already added then add a table 
    * Step 3: Make the element ready for addition to the table 
    * Step 4: Check the position and corresponding add the element 
    * Step 5: Add other properties 
    */ 
    //step 1 
    return this.each(function() { 
     if (!this.grid) { return; } 
     if (elem.indexOf("#") != 0) { 
      elem = "#" + elem; 
     } 
     //step 2 
     if ($(elem).children('table').length === 0) { 
      $(elem).append(tableString); 
     } 
     //step 3 
     var tbd = $("<td style=\"padding-left:1px;padding-right:1px\"></td>"); 
     $(tbd).addClass('ui-corner-all').append("<div class='ui-toolbar-lbl'><span>" + p.caption + "</span>" + "</div>").attr("title", p.title || ""); 
     if (p.id) { $(tbd).attr("id", p.id); } 
     if (p.align) { $(elem).attr("align", p.align); } 
     var findnav = $(elem).children('table'); 
     if (p.position === 'first') { 
      if ($(findnav).find('td').length === 0) { 
       $("tr", findnav).append(tbd); 
      } else { 
       $("tr td:eq(0)", findnav).before(tbd); 
      } 
     } else { 
      $("tr", findnav).append(tbd); 
     } 
    }); 
}, 
toolbarAncherAdd: function(elem, p) { 
    p = $.extend({ 
     caption: "newButton", 
     title: '', 
     id: '', 
     buttonicon: '', 
     buttonclass : '', 
     onClickButton: null, 
     position: "last" 
    }, p || {}); 
    var $elem = $(elem); 
    var tableString = "<table style='float:left;table-layout:auto;' cellspacing=\"0\" cellpadding=\"0\" border=\"0\" class='ui-toolbar-table'>"; 
    tableString += "<tbody> <tr></tr></table>"; 
    /* 
    * Step 1: check whether a table is already added. If not add 
    * Step 2: If there is no table already added then add a table 
    * Step 3: Make the element ready for addition to the table 
    * Step 4: Check the position and corresponding add the element 
    * Step 5: Add other properties 
    */ 
    //step 1 
    return this.each(function() { 
     if (!this.grid) { return; } 
     if (elem.indexOf("#") != 0) { 
      elem = "#" + elem; 
     } 
     //step 2 
     if ($(elem).children('table').length === 0) { 
      $(elem).append(tableString); 
     } 
     //step 3 
     var tbd = $("<td style=\"padding-left:1px;padding-right:1px\"></td>"), 
      iconClass = p.buttonicon.length === 0 ? "" : "<span class='ui-icon " + p.buttonicon + "'></span>"; 
     $(tbd).addClass('ui-toolbar-button ui-corner-all').append("<a class='ui-toolbar-a " + p.buttonClass + "'>" + iconClass + "<span>" + p.caption + "</span>" + "</a>").attr("title", p.title || "") 
     .click(function(e) { 
      if ($.isFunction(p.onClickButton)) { p.onClickButton(); } 
      return false; 
     }); 
     if (p.id) { $(tbd).attr("id", p.id); } 
     if (p.align) { $(elem).attr("align", p.align); } 
     var findnav = $(elem).children('table'); 
     if (p.position === 'first') { 
      if ($(findnav).find('td').length === 0) { 
       $("tr", findnav).append(tbd); 
      } else { 
       $("tr td:eq(0)", findnav).before(tbd); 
      } 
     } else { 
      //console.log("not first"); 
      $("tr", findnav).append(tbd); 
     } 
    }); 
}, 
});