javascript - 如何实现自定义 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' :见here , here和 here .您会发现另一种实现自定义按钮的方法 here .

已更新:要在删除操作期间发送附加信息，您可以使用 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>因为您在 Index.cshtml 中包含了 另一个 版本的 jQuery (jquery-1.5.2.min.js)
• 你应该关闭<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的最新版本您始终可以从 here 加载的文件.同样推荐最新版本(目前1.8.16)的jQuery UI。

我建议您下载 the VS2010 demo project我为 the answer 创建的并将其用作您的项目的模板。您可以轻松更改代码以使用 Razor。