Question

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

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

要实现这一点，点击编辑图像按钮，我需要与行数据对象一起调用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 });

Answer 1

您可以在gridComplete的每一行的actions列中添加自定义图标。见下面的例子。

$('#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();
}

如何在单击内嵌图像图标时打开自定义编辑对话框？

1 个答案: