Как я могу реализовать пользовательскую кнопку удаления jqGrid?

Question

Я добавил кнопку удаления для каждой строки в мой jqGrid. Теперь мне нужно добавить функциональность к этим кнопкам. Каждая кнопка должна удалить строку, в которой она находится, и удалить данные с сервера. Как я могу это сделать? Вот мой код:

var lastsel;

jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        url: '@Url.Action("Category1List")',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Navn', 'Slet'],
        colModel: [
            { name: 'Navn', index: 'Navn', width: 50,edittype: 'text', align: 'center', editable: true , key: true },
            { name: 'act', index: 'act', width: 75, sortable: false}],
        gridComplete: function () {
            var ids = jQuery("#list").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                be = "<input style='height:22px;width:90px;' type='button' value='Slet' onclick=\"jQuery('#list').deleteRow('" + cl + "');\"  />";
                jQuery("#list").jqGrid('setRowData', ids[i], { act: be });
            }
        },

        onSelectRow: function (id) {
            if (id && id !== lastsel) {
                jQuery('#list').jqGrid('restoreRow', lastsel);
                jQuery('#list').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },
        editurl: '@Url.Action("GridSave")',
        rowNum: 50000,
        rowList: [5, 10, 20, 50],
        pager: '#page',
        sortname: 'Id',
        sortorder: "desc",
        viewrecords: true,
        height: "500px"
    });
}); 

Answer 1

Вы можете использовать delGridRow метод для примера. Для этого вы можете просто заменить в своем коде jQuery('#list').deleteRow( на jQuery('#list').jqGrid('delGridRow',

Вы можете использовать formatter:'actions': см. здесь , здесь и здесь . Еще один способ реализации пользовательских кнопок вы найдете здесь .

ОБНОВЛЕНО : для отправки дополнительной информации во время операции удаления можно использовать delData параметр delGridRow метод:

be = "... onclick=\"jQuery('#list').deleteRow('" + cl +
  ",{delData:{Navn:'"+ jQuery("#list").jqGrid('getCell',cl,'Navn')+ "'});\"  />";

Выражение jQuery("#list").jqGrid('getCell',cl,'Navn') получит значение из столбца 'Navn', а {delData:{Navn:'NavnValue'} добавит параметр Navn=NavnValue к данным, отправляемым на сервер.

ОБНОВЛЕНО 2 : Ваша основная проблема заключалась в том, что вы использовали в демонстрационном проекте другую версию кода, которую вы разместили в своем вопросе . Ваше демо имеет

... onclick=\"jQuery('#list').jqGrid('delGridRow','" + rows + "',

вместо

... onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "',

что является первой важной ошибкой. Переменная rows, установленная как var rows = jQuery("#list").jqGrid('getGridParam','selrow'); внутри gridComplete. В то время как строка не выбрана, rows = null и вы помещаете onclick=\"jQuery('#list').jqGrid('delGridRow','null' для всех ваших кнопок.

Следующая важная проблема: вам следует переименовать

public ActionResult deleteRow(String ProductId)

до

public ActionResult deleteRow(String id)

или используйте prmNames: {id: 'ProductId'} в качестве дополнительного параметра jqGrid.

Другие распространенные проблемы:

• Вам следует изменить _Layout.cshtml файл. Вы должны удалить <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>, потому что вы включили другую версию jQuery (jquery-1.5.2.min.js) в Index.cshtml
• Вы должны закрыть <table id="list"> (добавить) в Index.cshtml.
• Если вы хотите иметь пейджер в сетке (вы использовали jQuery("#list").jqGrid('navGrid', "#page", ...), вам следует 1) добавить <div id="page"></div> в Index.cshtml и добавить параметр pager: '#page' в jqGrid.
• Вы должны очистить разметку HTML, которую вы используете. Например, вы должны удалить </div> с конца Index.cshtml. Еще один </div> в конце @RenderSection("Main", required: false)</div> (в файле _Layout.cshtml) также должен быть удален.

• Чтобы увидеть пейджер правильной ширины, вы должны включить в файл _Layout.cshtml следующее исправление

  <style type="text/css">input.ui-pg-input { width: auto; }</style>

• Вы должны включить как минимум jQuery UI CSS и ui.jqgrid.css, например, в файл _Layout.cshtml:

Я бы порекомендовал вам заменить jquery-1.5.2.min.js на jquery-1.6.2.min.js. Последняя версия vsdoc файлов, которую вы всегда можете загрузить из здесь . Точно так же рекомендуется последняя версия (в настоящее время 1.8.16) интерфейса jQuery.

Я бы порекомендовал вам загрузить демонстрационный проект VS2010 , который я создал для ответ , и использовать его в качестве шаблона для вашего проекта. Вы можете легко изменить код для использования Razor.

Answer 2

попробуй

$("#classOfYourButton").click(function(e){

e.stopPropagation();
$(this).closest("tr").remove();
});