Question

使用jqGrid 5.0.1，我在用C＃编写的asp.net webforms项目中有一个正常运行的网格。编辑功能通过网格导航栏中的按钮进行控制。为了使页面符合项目中的其他页面，我想从表单上的按钮调用编辑功能 - 与jqGrid分开。关于这一点，我没有在SO上找到很多，但有一个主题涉及添加行功能。所以我实现了代码，当我点击按钮时，编辑表单会暂时显示然后消失。

我真的很难过。我查看了文档并尝试了很多组合，但还没有让这个工作，我甚至没有开始编辑和删除功能 - 并且在删除时，我需要在帖子数据中发送附加信息到我的编辑网址。我的网格代码如下，包括注释掉的导航按钮编辑。还有其他人这样做吗？

        $(function () {
        $('#statusGrid').jqGrid({
            url: 'Handler2.ashx?id=' + id.toString(), 
            datatype: 'json',
            mtype: 'POST',

            colNames: ['ProjNum', 'Status', 'Status Date', 'Status Time', 'User ID', 'Memo Text', 'Memo Number', 'Status Number'],
            colModel: [
                        { name: 'ProjNum', index: 'ProjNum', hidden: true, editable: true, editoptions: { defaultValue: $('#tbxProjNum').val() } },
                        { name: "Status", width: 155,
                            editable: true, edittype: "select",
                            editoptions: {
                                dataUrl: "Handler3.ashx",
                                buildSelect: function (data) {
                                    data = $.parseJSON(data);
                                    var select = '<select>', i, l = data.length, item;
                                    for (i = 0; i < l; i++) {
                                        item = data[i];
                                        //select += '<option value="' + item.value + '">' + item.name + '</option>';
                                        select += '<option>' + item.name + '</option>';
                                    }
                                    return select + '</select>';
                                }
                            } },
                        { name: 'Status Date', index: 'Status Date', width: 90, editrules: { required: true }, editable: true, editoptions: { dataInit: function (elem) { $(elem).datepicker({changeYear: true, changeMonth: true}); } } },
                        { name: 'Status Time', index: 'Status Time', width: 90, editrules: { required: true }, editable: true, editoptions: { dataInit: function (elem) { $(elem).timepicker({ timeFormat: 'HH:mm:ss' }); } } },
                        { name: 'User ID', index: 'User ID', width: 90, editrules: { required: true }, editable: true },
                        { name: 'Memo Text', index: 'Memo Text', hidden: true, editrules: { required: true, edithidden: true }, editable: true, edittype: 'textarea', editoptions: { rows: "10", cols: "30", defaultValue: "" } },
                        { name: 'Memo Number', index: 'Memo Number', editable: true, hidden: true },
                        { name: 'Status Number', index: 'Status Number', editable: true, hidden: true }
            ],
            //loadonce: true,
            scrollOffset:0,
            //autowidth: true,
            height: "260",
            onSelectRow: function (rowId) {
                var grid = $('#statusGrid');
                $('#tbxStsDesc').val(grid.jqGrid('getCell', rowId, 'Memo Text'));
            },
            pager: '#pager',
            rowNum: 10,
            rowList: [10, 20, 30, "10000:All"],
            viewrecords: true,
            gridview: true,
            autoencode: true,
            loadComplete: function () {
                $('#statusGrid').setSelection(1);
                $('#tbxStsDesc').val($('#statusGrid').jqGrid('getCell', 1, 'Memo Text'));
            },
            caption: 'Status Detail',
            editurl: 'Handler4.ashx', 
        });

        jQuery("#statusGrid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false, refresh: false });

        //jQuery("#statusGrid").navGrid("#pagingGrid", {
        //    edit: true,
        //    add: true,
        //    del: true,
        //    save: true,
        //    cancel: true,
        //    search: false,
        //    refresh: false
        //},
        //{
        //    closeAfterEdit: true,
        //    reloadAfterSubmit: true
        //},
        //{
        //    closeAfterAdd: true,
        //    reloadAfterSubmit: true
        //},
        //{
        //    onclickSubmit: function (options, delId) {
        //        return {
        //            memNum: $(this).jqGrid('getCell', delId, 'Memo Number'),
        //            stsNum: $(this).jqGrid('getCell', delId, 'Status Number'),
        //            prjNum: $(this).jqGrid('getCell', delId, 'ProjNum')
        //        };
        //    }
        //});

        $("#btnAdd").on("click", function () {
            $("#statusGrid").editGridRow("new"); 
        });

    })

    var grid = jQuery("#statusGrid"),
    ids = grid.jqGrid("getDataIDs");
    if (ids && ids.length > 0)
    grid.jqGrid("setSelection", ids[0]);

Answer 1

问题似乎是我在表单上使用了asp按钮。无论我尝试了什么属性，点击它都会重新加载页面。

用简单的html按钮替换这些按钮解决了这个问题：

<input type="button" class="button" id="btnAdd" value="Add Status" />

而不是：

<asp:Button class="button" ID="btnAdd" runat="server" Text="Add Status" />

使用表单按钮用于jqGrid编辑功能

1 个答案: