wie das jqgrid Spaltenbreite, und re-sizable, in einer scrollbaren jqgrid?

ich bin mit jqgrid und das problem mit der Spaltenbreite
hier ist mein js-code

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: "350", resizable: false, editable: false, align: 'center', formatter: formatLink, classes: 'not-editable-cell' },
            { name: 'FirstName', index: 'FirstName', width:350, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
            { name: 'LastName', index: 'LastName',width:350, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
            { name: 'UserName', index: 'UserName', width:300,align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
            { name: 'Password', index: 'Password',width:400, align: "left", sorttype: 'text', resizable: true, editable: false, editrules: { required: true }, classes: 'not-editable-cell' },
            {
                name: 'Password_Expiry',width:250, 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: "250", 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',width:250, index: 'Modified', sorttype: 'date', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
            { name: 'ModifiedBy', width:250, index: 'ModifiedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
            { name: 'CreatedBy', width:250,index: 'CreatedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
            { name: 'Delete',width:50, index: 'Delete', width: 25, resizable: false, align: 'center', classes: 'not-editable-cell' }

        ],
        rowNum: 10,
        rowList: [10, 20, 50, 100],
        sortable: true,
        delete: true,

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


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

            var response = serverStatus.responseText;
            var rst = 'false';
            debugger;
            if (response == rst) {
                debugger;               
                setTimeout(function () {
                    $("#info_dialog").css({
                        left: "644px", //new left position of ERROR dialog
                        top: "380px"   //new top position of ERROR dialog
                    });
                }, 50);
                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,
        pgbuttons : false,
        pginput : 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', ' ');
                }
            }
        }
    }

    );

    grid.jqGrid('navGrid', '#pager',
        { resize: false, add: false, search: false, del: false, refresh: false, edit: false, alerttext: 'Please select one user' }

    ).jqGrid('navButtonAdd', '#pager',
        { title: "Add New users", buttonicon: "ui-icon ui-icon-plus", onClickButton: showNewUsersModal, position: "First", caption: "" });
});

brauche ich ein scrollbares raster , wenn verwenden Sie diese Seite aufrufen, ich muss die ersten 7 Spalten nur gerade sieben in der vollen Seite. ich habe 11 Spalten, die in mein raster restlichen Spalten können gesehen werden durch die Verwendung von Blättern, aber die ersten 7 angezeigt werden soll, wenn der grid lädt. und jeder Spalte muss erneut gross. kann jede Stelle mir helfen, ich werde 100% - Marke ist Ihr Vorschlag, wenn es funktioniert für mich ...danke 😉 . wenn etwas nicht erklärt ist, bin ich hier zu erklären, bitte helft mir
und kann ich die Breite der Spalte dauerhaft, wenn der Benutzer die Größe der Spalte, also wenn das nächste mal grid Holen Sie sich jede Menge sollte die Spalte haben die gleiche Breite gesetzt, die durch den Nutzer durch re-sizing.. ist es möglich ?

InformationsquelleAutor R K Sharma | 2013-12-10
Schreibe einen Kommentar