Asp.net mvc 如何在单击内联图像图标时打开自定义编辑对话框？

我需要用于编辑和删除功能的内联图像按钮

但是，我不需要默认的内联编辑或内置对话框弹出窗口，我的设计如下。 “添加/编辑表单”将首先显示，然后，在该部分下方，将显示-grid。 单击“行内联编辑图像”按钮，需要在上面的表单上填充行数据

要实现这一点，单击edit image按钮，我需要调用javascript函数和row数据对象。 如何做到这一点？有谁能和我分享一下能让我实现这一点的列代码和函数吗

以下是jqgrid的内容：

            $('#CategoriesGrdList').jqGrid({
            ajaxGridOptions: {
                error: function () {
                    $('#CategoriesGrdList')[0].grid.hDiv.loading = false;
                    alert('An error has occurred.');
                }
            },
            url: '@Url.Action("GetAllCategoriesList", "Categories")/' + 0,
            gridview: true,
            autoencode: true,
            postData: { categoryId: 1 },
            datatype: 'json',
            jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
            mtype: 'GET',
            colNames: ['Id', 'Code', 'Description', 'IsActive', "actions"],
            colModel: [
                  { name: 'Id', index: 'Id', hidden: true, key: true },
                { name: 'Code', index: 'Code', width: 170 },
                { name: 'Description', index: 'Description', width: 170 },
            { name: 'IsActive', index: 'IsActive', width: 170 },
            {
                name: 'actions', index: 'actions', formatter: 'actions',
                formatoptions: {
                    keys: true,
                    editbutton: false,
                    delOptions: { url: '@Url.Action("DeleteCategory", "Categories")' }
                }
            }
            ],
            pager: $('#CategoriesGrdPager'),
            sortname: 'Code',
            rowNum: 3,
            rowList: [3, 6, 9],
            width: '725',
            height: '100%',
            viewrecords: true,

            beforeSelectRow: function (rowid, e) {

                return true;
            },
            sortorder: 'desc'
        }).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true });

---

您可以将自定义图标添加到gridComplete上每行的“操作”列中。见下面的例子

$('#CategoriesGrdList').jqGrid({
    ...
    sortorder: 'desc',
    gridComplete: function () {
        var ids = $("#CategoriesGrdList").jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
            var id = ids[i];
            var editIcon = "<div style='float: left;' class='ui-pg-div' onclick='myEditRow(\"" + id + "\");'><a class='ui-icon ui-icon-pencil'></a></div>";
            var deleteIcon = "<div style='float: left;' class='ui-pg-div' onclick='myDeleteRow(\"" + id + "\");'><a class='ui-icon ui-icon-trash'></a></div>";
            $("#gridDocs").jqGrid('setRowData', ids[i], { actions: editIcon + deleteIcon });
        }
    }
}).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true });


function myEditRow(rowId) {
    var rowData = $("#CategoriesGrdList").jqGrid('getRowData', id);
    //do something with the data i.e.
    $('#nameEditInput').val(rowData.Code);
}

function myDeleteRow(rowId) {
    //your delete code...
    $("#" + id).hide();
}