Question

我对Jqrid很新，虽然关于Jqgrid的stackoverflow线程非常好，但我有一些问题。

1 - 我想要一个带有可编辑列的网格，其中包含添加，编辑，删除，取消功能。

2 - 之后我需要一些事件绑定Like：行选择的事件来加载它的孩子
记录。

3 - 然后当我点击提交然后用整个页面保存记录就像我有其他我的实体的细节也是。

为此，我做了一些事情，搜索不同的解决方案，但到目前为止我无法做到。

这是我的努力：）

function JSMethod() {
        var grid = $("#table");
        var ids = grid.getDataIDs();
        for (var i = 0; i < ids.length; i++) {
            grid.editRow(ids[i], true);
        };
    }

    $.ajax({
        type: "GET",
        url: '<%= ResolveClientUrl("~/WebService.asmx/GetLookup") %>',
        dataType: "text",
        success: function (result) {
            alert('Success');
            lookup = result;


        },
        async: false
    });

    $(function () {


        var lookup = "";



        $("#table").jqGrid({
            datatype: function (pdata) { getData(pdata); },
            height: 250,
            editurl: 'default.aspx',
            gridview: true,
            colNames: ['ID', 'First Name', 'Last Name', 'Buttons'],
            colModel: [
            { name: 'ID', width: 60, sortable: false, hidden: true },
            { name: 'FirstName', width: 200, sortable: false },
            { name: 'LastName', width: 200, sortable: false, editable: true, edittype: 'select', stype: 'select', formatter: 'select', editoptions: { value:GetData, size: 30, maxlength: 20} },
            { name: 'Buttons', width: 200, sortable: false }

        ],
            onSelectRow: function (rowId) {
                if (rowId && rowId !== lastRowId) {
                    if (lastRowId != null) {
                        var a = $('#list').saveRow(lastRowId, false, 'clientArray');
                        changedRows[lastRowId] = $('#list').getRowData(lastRowId);
                    }
                    jQuery('#list').editRow(rowId, true);
                }
                lastRowId = rowId;
            },
            imgpath: '<%= ResolveClientUrl("~/styles/redmon/images") %>',
            caption: "Sample JSON data retrieved from ASMX web services"
        });
    });
    function getData(pData) {
        $.ajax({
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveClientUrl("~/WebService.asmx/GetListOfPersons") %>',
            data: '{}',
            dataType: "json",
            success: function (data, textStatus) {
                if (textStatus == "success")
                    ReceivedClientData(JSON.parse(getMain(data)).rows);
            },
            error: function (data, textStatus) {
                alert('An error has occured retrieving data!');
            }
        });
    }
    function ReceivedClientData(data) {
        var thegrid = $("#table");
        thegrid.clearGridData();
        for (var i = 0; i < data.length; i++)
            thegrid.addRowData(i + 1, data[i]);
    }
    function getMain(dObj) {
        if (dObj.hasOwnProperty('d'))
            return dObj.d;
        else
            return dObj;
    }

Answer 1

我得到了答案 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing 如果您浏览此链接，我相信您将能够创建可编辑的网格。

具有自定义功能的可编辑JQGrid

1 个答案: