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



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



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



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

880   3  

3 ответов:

В базовом компоненте 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.

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

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

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

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

MyPage.aspx?jqGridID=ctl00_ctl00_Content_Content_MyJqGrid

Для удаления содержимое поста выглядит так, как описывает @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");
};

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

Пример:

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

Comments

    Ничего не найдено.