如何实现自定义jqGrid删除按钮？

问题描述

我已将每行的删除按钮添加到我的jqGrid中。现在我需要为这些按钮添加功能。每个按钮都必须删除它所在的行并从服务器中删除数据。我怎样才能做到这一点？这是我到目前为止的代码：

I have added a delete button for each row into my jqGrid. Now I need to add functionality to those buttons. Each button has to delete the row which it is in and remove data from the server. How can I do this? Here is my code so far:

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"
    });
});

推荐答案

你可以使用方法前例。为此，您只需在代码中替换 jQuery（'#list'）。deleteRow（ to jQuery（'#list'）。jqGrid（ 'delGridRow'，

You can use delGridRow method fore example. To do this you can just replace in your code jQuery('#list').deleteRow( to jQuery('#list').jqGrid('delGridRow',

您可以考虑使用 formatter：'actions'：请参阅，和。另一种实现自定义按钮的方法是。

You can consider to use formatter:'actions': see here, here and here. One more way to implement custom buttons you will find here.

更新：要在删除操作期间发送其他信息，您可以使用参数方法：

UPDATED: To send additional information during Delete operation you can use delData parameter of delGridRow method:

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 发送到服务器的数据参数。

The expression jQuery("#list").jqGrid('getCell',cl,'Navn') will get the value from the 'Navn' column and {delData:{Navn:'NavnValue'} will add Navn=NavnValue parameter to the data send to the server.

更新2 ：您的主要问题是您在演示项目中使用了您在问题中发布的其他版本的代码。你的演示有

UPDATED 2: Your main problem was that you used in the demo project another version of the code as you posted in your question. Your demo has

... 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'用于所有按钮。

which is the first important error. The rows variable you set as var rows = jQuery("#list").jqGrid('getGridParam','selrow'); inside of gridComplete. At the time no row is selected, rows = null and you place onclick=\"jQuery('#list').jqGrid('delGridRow','null' in for all your buttons.

下一个重要问题：你应该重命名

The next important problem: you should rename

public ActionResult deleteRow(String ProductId)

to

public ActionResult deleteRow(String id)

或使用 prmNames：{id：'产品ctId'} 作为额外的jqGrid参数。

or use prmNames: {id: 'ProductId'} as additional jqGrid parameter.

其他常见问题：

• 您应该修改 _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） c>


• 你应该在中关闭< table id =list> （add） Index.cshtml 。


• 如果你想在网格中有寻呼机（你使用 jQuery（＃list）。jqGrid（ 'navGrid'，＃page，... ）你应该1）添加< div id =page>< / div> 在 Index.cshtml 中，并将参数 pager：'＃page'添加到jqGrid。


• 您必须清理您使用的HTML标记。例如，您应该从 Index.cshtml 的末尾删除< / div> 。在 @RenderSection（Main，必需：false）< / div> < / div> 还应该删除$ c>（在 _Layout.cshtml 文件中）。



• 要正确查看寻呼机您应该在 _Layout.cshtml 文件中包含以下修复的宽度

• You should modify _Layout.cshtml file. You should remove <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> because you include another version of the jQuery (jquery-1.5.2.min.js) in the Index.cshtml
• You should close <table id="list"> (add ) in the Index.cshtml.
• If you want to have pager in the grid (you used jQuery("#list").jqGrid('navGrid', "#page", ...) you should 1) add <div id="page"></div> in the Index.cshtml and add parameter pager: '#page' to the jqGrid.
• You have to clean the HTML markup which you use. For example you should remove </div> from the end of Index.cshtml. One more </div> at the end of @RenderSection("Main", required: false)</div> (in the _Layout.cshtml file) should be also removed.

• To see the pager in the correct width you should include in the _Layout.cshtml file the following fix

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

您应该至少包含jQuery UI CSS和 ui.jqgrid。 css 例如在 _Layout.cshtml 文件中：

You should include at least jQuery UI CSS and ui.jqgrid.css for example in the _Layout.cshtml file:




我建议你更换 jquery-1.5.2.min.js 到 jquery-1.6.2.min.js 。您可以随时从。同样推荐jQuery UI的最后一个版本（目前是1.8.16）。

I would recommend you to replace jquery-1.5.2.min.js to jquery-1.6.2.min.js. The last version of vsdoc files you can always load from here. In the same way the last version (currently 1.8.16) of jQuery UI is also recommended.

我建议你下载并将其用作项目的模板。您可以轻松更改代码以使用Razor。

I would recommend you to download the VS2010 demo project which I created for the answer and use it as the template for your project. You can easy change the code to use Razor.

这篇关于如何实现自定义jqGrid删除按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！