0

我需要用于 EDIT 和 DELETE 功能的内联图像按钮。

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

为此，在单击编辑图像按钮时，我需要调用 javascript 函数以及行数据对象。如何做到这一点？任何人都可以分享可以让我实现这一目标的列代码和功能吗？

下面是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 });
4

1 回答 1

0

您可以将自定义图标添加到 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();
}
于 2014-09-16T22:00:16.230 回答