Пользовательская кнопка удаления в jqGrid - PullRequest
Новая
       17

Пользовательская кнопка удаления в jqGrid

5 голосов
/ 02 марта 2010

Я бы хотел реализовать свою собственную функцию удаления в jqGrid. В настоящее время я использую встроенный пользовательский интерфейс (выберите строку, нажмите кнопку мусорной корзины в нижнем колонтитуле, подтвердите), но я бы предпочел иметь кнопку удаления в каждой строке и реализовать свой собственный пользовательский интерфейс для подтверждения.

В API я не вижу ничего, что позволяло бы мне запускать удаление на сервер - просто delRowData, который удаляет его на клиенте. Можно ли это сделать?

(я использую ASP.NET компонент , FWIW).

Ответы [ 3 ]

10 голосов
/ 02 марта 2010

Не существует части базового компонента jqGrid, который обрабатывает удаление на стороне сервера - даже если вы используете встроенное удаление, а оно не удаляет его на стороне сервера, вы должны это сделать самостоятельно. Но вот как настроить его так, чтобы ваш скрипт вызывался, когда кто-то нажимал вашу пользовательскую кнопку удаления: 

// your custom button is #bDelete
$("#bDelete").click(function(){ 

    // Get the currently selected row
    toDelete = $("#mygrid").jqGrid('getGridParam','selrow');

    // You'll get a pop-up confirmation dialog, and if you say yes,
    // it will call "delete.php" on your server.
    $("#mygrid").jqGrid(
        'delGridRow',
        toDelete,
          { url: 'delete.php', 
            reloadAfterSubmit:false}
    );
});

Следующая информация передается через POST на ваш URL для удаления 

Array
(
    [oper] => del
    [id] => 88
)

Где id - это, очевидно, идентификатор, который вы передали в функцию в этом случае, значение toDelete.

Я просто сделал это для своего проекта, отвечая на ваш вопрос - хотя до того, как я увидел вопрос, у меня было смутное представление о том, как это сделать. Так что ... спасибо, что заставили меня добраться до этого!

2 голосов
/ 04 марта 2010

@ Эрик помог мне выбрать правильный путь. Его решение работает, но сохраняет существующий псевдомодальный всплывающий интерфейс подтверждения, которого я хотел избежать.

Он также не использует службы, предоставляемые JqGrid ASP.NET компонентом . Компонент фактически заботится обо всех операциях CRUD, если он подключен к правильно настроенному источнику данных (ObjectDataSource, SqlDataSource и т. Д.).

Этот недостающий элемент для меня был механизмом CRUD-операций компонента. Поискав с помощью Fiddler, я смог увидеть, что он помещает соответствующие данные на одну и ту же страницу, используя ClientID объекта JqGrid в строке запроса: 

MyPage.aspx?jqGridID=ctl00_ctl00_Content_Content_MyJqGrid

Для удаления содержимое POST соответствует описанию @Erik: 

oper=del&id=18

Итак, я смог самостоятельно продублировать операцию, чтобы сохранить полный контроль над всем процессом: 

$(".DeleteButton", grid).click(function(e) {
    var rowID = getRowID(this);
    $(grid).setSelection(rowID, false);
    if (confirm('Are you sure you want to delete this row?')) {
        var url = window.location + '?jqGridID=' + grid[0].id;
        var data = { oper: 'del', id: rowID };
        $.post(url, data, function(data, textStatus, XMLHttpRequest) {
            $(grid).trigger("reloadGrid");
        });
    } else {
        $(grid).resetSelection();
    } // if
}); // click

getRowID = function(el) {
    return $(el).parents("tr").attr("id");
};
1 голос
/ 09 марта 2011

Другое решение состоит в том, чтобы программно щелкнуть значок удаления (если имеется). Идентификатор значка удаления (на самом деле div) - это «del_ [GridId]». Возможно, это не совсем твердое решение, поскольку они могут изменить это имя. Но вы получаете точно такое же поведение (а также более хороший модал подтверждения).

Пример: 

$('#MyButton').click(function() { $('#del_' + gridId).click(); });
...