jqgrid - расширение addRowData

Question

Спасибо Олегу, у меня есть решение добавить строку в любом месте сетки. НО я хочу эту функциональность

• НЕ при наличии ссылки "Add" в inlineNav
• НО при нажатии на jqgrid caption - МОЙ JQGRID

Возможно ли это?

HTML

<table id="myjqgrid"></table>
<div id="pager"></div>  

JQGRID

$(document).ready(function () {
    var oldAddRowData = $.fn.jqGrid.addRowData;
    var mydata = [
        { id: "1",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
        { id: "2",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
        { id: "3",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
        { id: "4",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
        { id: "5",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
        { id: "6",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
        { id: "7",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
        { id: "8",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
        { id: "9",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
        { id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
        { id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
        { id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
    ]
    $.jgrid.extend({
        addRowData: function (rowid, rdata, pos, src) {
            if (pos === 'afterSelected' || pos === 'beforeSelected') {
                if (typeof src === 'undefined' && this[0].p.selrow !== null) {
                    src = this[0].p.selrow;
                    pos = (pos === "afterSelected") ? 'after' : 'before';
                } else {
                    pos = (pos === "afterSelected") ? 'last' : 'first';
                }
            }
            return oldAddRowData.call(this, rowid, rdata, pos, src);
        }
    });

    $("#myjqgrid").jqGrid({
        datatype: 'local',
        data: mydata,
        colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
        colModel: [
            {name: 'invdate', index: 'invdate', width: 80, align: 'center', editable: true},
            {name: 'name', index: 'name', editable: true, width: 65},
            {name: 'amount', index: 'amount', width: 75},
            {name: 'tax', index: 'tax', width: 52},
            {name: 'total', index: 'total', width: 60},
            {name: 'closed', index: 'closed', width: 70, align: 'center', editable: true},
            {name: 'ship_via', index: 'ship_via', width: 105, align: 'center', editable: true},
            {name: 'note', index: 'note', width: 60, sortable: false, editable: true}
        ],
        rowNum: 10,
        rowList: [5, 10, 20],
        pager: '#pager',
        gridview: true,
        rownumbers: true,
        width: 1020,
        sortable: true,
        sortname: 'invdate',
        viewrecords: true,
        sortorder: 'desc',
        height: '100%',
        caption: 'MY JQGRID',
        editurl: 'clientArray'
   });
   $("#myjqgrid").jqGrid('navGrid', '#pager');            
   $("#myjqgrid").jqGrid('inlineNav', '#pager', {
        edittext: "Edit",
        addtext: "Add",
        savetext: "Save",
        canceltext: "Cancel",
        addParams: { position: "afterSelected" }
   });
});

Answer 1

Как вы понимаете свой вопрос, вы хотите привязать обработчик событий к клику на заголовке сетки.Структура элементов сетки описана, например, здесь .Таким образом, вы можете просто выбрать захват сетки с помощью следующего селектора

#gview_myjqgrid>div.ui-jqgrid-titlebar

и связать любой обработчик событий, который вам нужен.Например,

$('#gview_' + $.jgrid.jqID($grid[0].id) + '>div.ui-jqgrid-titlebar').click(function () {
    alert("The caption (the titlebar) is clicked");
});

Тем не менее, я бы не рекомендовал бы реализовать добавление новой строки при нажатии на заголовок захвата.Проблема заключается в том, что мощью многих современных графических интерфейсов, используемых в операционной системе и различном программном обеспечении, является стандартный пользовательский интерфейс .Таким образом, пользователю не нужно изучать каждую новую программу, которую пользователь должен использовать.Это экономит много денег на обучение и позволяет использовать программы, например, сразу после покупки и загрузки из Интернета.Поэтому, если у вас есть такие требования от клиентов, вы можете еще раз обсудить с ними требования и порекомендовать вставить кнопку добавления непосредственно в захват.Это позволит новым пользователям угадывать функциональность, реализованную вами, без какой-либо подготовки.