شريط الأدوات في JQGrid؟

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

ينظر الى هذه إجابة قديمة لي. يبدو لي ، أنه يفعل بالضبط ما تريد.

Answer 2

لقد مددت السيناريو مضيفا البوتون في 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);
        }
    });
},
});

Answer 3

إذا كنت ترغب في إضافة أزرار إلى شريط الأدوات العلوي ، فعليك القيام بشيء مثل هذه:

كما قلت في مقالتي السابقة ، فإن إضافة أزرار إلى شريط أدوات JQGrid أمر صعب بعض الشيء. تحتاج إلى إضافة الكود التالي في نهاية إعداد JQGrid

بعد القيام بذلك ، يمكنك استخدام:

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