Question

我正在使用jqgrid而我的js cod是

jQuery(document).ready(function () {

    var grid = jQuery("#grid");

    grid.jqGrid({
        url: '/Admin/GetUserForJQGrid',
        datatype: 'json',
        mtype: 'Post',
        cellsubmit: 'remote',
        cellurl: '/Admin/GridSave',

        //formatCell: emptyText,
        colNames: ['Id', 'Privileges', 'First Name', 'Last Name', 'User Name', 'Password', 'Password Expiry', 'Type', 'Last Modified', 'Last Modified By', 'Created By', ''],
        colModel: [
            { name: 'Id', index: 'Id', key: true, hidden: true, editrules: { edithidden: true } },
            { name: 'Privileges', index: 'Privileges', width: "130", resizable: false, editable: false, align: 'center', formatter: formatLink, classes: 'not-editable-cell' },
            { name: 'FirstName', index: 'FirstName', align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
            { name: 'LastName', index: 'LastName', align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
            { name: 'UserName', index: 'UserName', align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
            { name: 'Password', index: 'Password', align: "left", sorttype: 'text', resizable: true, editable: false, editrules: { required: true }, classes: 'not-editable-cell' },
            {
                name: 'Password_Expiry', index: 'Password_Expiry', align: "left", resizable: true, editable: true, editoptions: {
                    size: 20, dataInit: function (el) {
                        jQuery(el).datepicker({
                            dateFormat: 'yy-mm-dd', onSelect: function (dateText, inst) {

                                jQuery('input.hasDatepicker').removeClass("hasDatepicker")                               
                                return true;
                            }
                        });
                    }
                }
            },


            {
                name: 'Type', width: "100", index: 'Type', sorttype: 'text', align: "left", resizable: true, editable: true, editrules: { required: true }, edittype: 'select', editoptions: {
                    value: {
                        'Normal': 'Normal',
                        'Sales': 'Sales',
                        'Admin': 'Admin',
                        'SuperAdmin': 'SuperAdmin'
                    },
                    dataEvents: [
                            {
                                type: 'change',
                                fn: function (e) {

                                    var row = jQuery(e.target).closest('tr.jqgrow');
                                    var rowId = row.attr('id');
                                    jQuery("#grid").saveRow(rowId, false, 'clientArray');
                                }
                            }
                    ]
                }
            },
            { name: 'Modified', index: 'Modified', sorttype: 'date', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
            { name: 'ModifiedBy', index: 'ModifiedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
            { name: 'CreatedBy', index: 'CreatedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
            { name: 'Delete', index: 'Delete', width: 25, resizable: false, align: 'center', classes: 'not-editable-cell' }

        ],
        shrinkToFit: true,
        delete: true,

        pager: '#pager',
        height: '100%',
        width: "703",


        **afterSubmitCell: function (serverStatus, rowid, cellname, value, iRow, iCol) {

            var response = serverStatus.responseText;
            var rst = 'false';
            debugger;
            if (response == rst) {
                debugger;               

                return [false, "User Name Already Exist"];

            }
            else {

                return [true, ""];

            }
        },**



        rowNum: 10,
        rowList: [10, 20, 50, 100],
        sortable: true,
        loadonce: false,
        ignoreCase: true,

        caption: 'Administration',

        search: false,

        del: true,
        cellEdit: true,
        hidegrid: false,
        viewrecords: true,
        gridComplete: function () {

            var ids = grid.jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var isDeleted = grid.jqGrid('getCell', ids[i], 'Delete');
                if (isDeleted != 'true') {
                    grid.jqGrid('setCell', ids[i], 'Delete', '<a href="#" onclick="deleteUser(' + ids[i] + ');"><img src="/Images/delete.png" alt="Delete Row" /></a>');
                }
                else {
                    grid.jqGrid('setCell', ids[i], 'Delete', ' ');
                }
            }
        }
    }

    );

请参阅aftercellsubmit我将返回错误值和错误消息。此对话框出现在页面左侧（错误的位置）我需要在jqgrid上使用此对话框。任何人都可以帮助我....提前感谢:)我也想改变那个对话框的外观，我在document.ready事件的页面中尝试了$("#info_id").css('background-image', 'url("/Scripts/jqueryui/smoothness/images/ui-bg_flat_75_ffffff_40x100.png")');，但它没有用。

Answer 1

最简单的方法是添加像

这样的代码

setTimeout(function () {
    $("#info_dialog").css({
        left: "30px", // new left position of ERROR dialog
        top: "10px"   // new top position of ERROR dialog
    });
}, 50);

在afterSubmitCell回调内部（return语句之前的某个地方）。 rowid回调和jQuery UI Position方法的afterSubmitCell参数为您提供了在编辑行下移动错误对话框的简单方法。您只需将上面代码中使用的css替换为position：

即可

setTimeout(function () {
    $("#info_dialog").position({
        of: $("#" + $.jgrid.jqID(rowid)),
        my: "top",
        at: "bottom"
    });
});

我没有测试过代码，但我希望它能够正常运行。

更新： The dummy demo（服务器上没有任何真正保存数据的代码）演示$("#info_dialog").position({...})的使用情况。只需尝试编辑某个单元格，然后按 Enter 保存数据。您将在编辑的行后直接看到错误消息。

Answer 2

我建议检查你的页面并获取对话框容器的元素id并将它的css设置为你想要的位置。

更新

这可能不起作用，因为'#info_id'还不存在。您应该附加一个侦听器到“DOMSubtreeModified”事件，如

document.addEventListener("DOMSubtreeModified", function (e) {
  if(e.target.id == 'info_id'){
    $('#info_id').css('your css info here');
   }

  }, false);

请注意，DOMSubtreeModified已被弃用，但如果这是一个内部工具而您只是以非常有限的方式使用它，那么这应该不是问题。

如何设置jqgrid的错误对话框的位置？

2 个答案: