如何在可滚动的jqgrid中设置jqgrid列宽和重新调整大小?

时间:2013-12-10 21:20:53

标签: jqgrid

我正在使用jqgrid并面临列宽问题 这是我的js代码

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: "" });
});

我需要一个可滚动的网格,当使用到这个页面时,我必须在整页中只显示前七列。我的网格中有11列可以通过滚动查看其余列,但是当网格加载时应显示第7列。并且每列应该重新调整大小。任何身体可以帮助我,如果它对我有用,我会100%标记你的建议......谢谢;)。如果有什么不解释我在这里解释请帮助我 当用户重新调整列的大小时,我可以永久保存列的宽度,因此当下一次网格加载时,列应该具有相同的宽度,用户通过重新调整大小来设置...是否可能?

1 个答案:

答案 0 :(得分:3)

我不确定你想要什么,但你可以使用JqGrid autowidth和shrinkToFit选项自动调整宽度。

请参阅此帖子jqGrid and the autowidth option. How does it work?

这样就可以了。