Question

我使用以下代码片段创建了一个网格：

var grid_type = 'grid_agreement';
var status_action;
var lastSel;
$(function () {
    $.extend($.fn.fmatter, {
        GridAgreementActions: function (cellvalue, options, rowdata) {
            var data = cellvalue.split('|');
            var actions = '';
            if (data[1] == 1) {
                actions += "<a class='actionimage' href='/sf/agreement/show/" + data[0] + "' title='View' onClick='load_start();'><img src='/images/icons/16x16/document_view.png' width='16' height='16' alt='' /></a>";
            }
            if (data[2] == 1) {
                actions += "<a id='cedit" + options.rowId + "' href='javascript:updateAgreement(" + data[0] + ");' onClick='load_start();' title='Edit'><img src='/images/icons/16x16/document_edit.png' width='16' height='16' alt='' /></a>";
            }
            $('#exportlink_link_form_grid_agreement').attr('action', data[5]);
            $('#permexportlink_link_grid_agreement').html('<a href="' + data[6] + '"><img src="/images/icons/16x16/document_out.png" width="16" height="16" alt="" />Permission Export List</a>');

            return actions;
        }
    });

    $("#grid_agreement").jqGrid({
        url: "/sf/agreement/",
        datatype: "json",
        mtype: "post",
        colModel: [{
            "name": "actions",
            "width": 60,
            "fixed": true,
            "sortable": false,
            "resize": true,
            "formatter": "GridAgreementActions",
            "formatoptions": "",
            "index": "actions",
            "align": "left",
            "hidden": false,
            "edittype": "",
            "classes": false,
            "editable": false,
            "label": "Actions",
            "key": "",
            "autoResizable": false,
            "frozen": true,
            "resizable": false,
            "search": false,
            "hidedlg": false,
            "viewable": true
        }, {
            "name": "agreement.id",
            "width": 100,
            "fixed": false,
            "sortable": true,
            "resize": true,
            "formatter": "",
            "formatoptions": "",
            "index": "agreement.id",
            "align": "left",
            "hidden": true,
            "edittype": "",
            "classes": false,
            "editable": false,
            "label": "ID",
            "key": true,
            "autoResizable": true,
            "frozen": true,
            "resizable": true,
            "search": false,
            "hidedlg": false,
            "viewable": true
        }, {
            "name": "agreement.AgreementNumber",
            "width": 109,
            "fixed": false,
            "sortable": true,
            "resize": true,
            "formatter": "",
            "formatoptions": "",
            "index": "agreement.AgreementNumber",
            "align": "left",
            "hidden": false,
            "edittype": "",
            "classes": false,
            "editable": false,
            "label": "AgreementNumber",
            "key": "",
            "autoResizable": true,
            "frozen": true,
            "resizable": true,
            "search": false,
            "hidedlg": false,
            "viewable": true
        }],
        postData: {},
        rowNum: 50,
        rowList: [50, 100, 150, 200, 250],
        pager: "grid_agreement-gridpager",
        toppager: true,
        hoverrows: true,
        ajaxRowOptions: {async: true},
        sortname: "",
        sortorder: "desc",
        sortable: {
            options: {
                items: ">th:not(:has(#jqgh_grid_agreement_cb,#jqgh_grid_agreement_rn,#jqgh_grid_agreement_actions),:hidden)"
            }
        },
        rownumbers: true,
        viewrecords: true,
        caption: "",
        multiselect: true,
        height: "auto",
        width: 3991,
        editurl: "",
        shrinkToFit: true,
        cellEdit: true,
        cellsubmit: "remote",
        cellurl: "/sf/agreement/cell/1",
        resizeStop: function (width, index) {
            saveColumnConfiguration($("#grid_agreement"), "/sf/agreement/", 1);
        },
        onSortCol: function (index, iCol, sortorder) {
            $("#msg_msg").html("Sorting...");
            var content = {sortname: index, sortorder: sortorder};
        },
        loadComplete: function (data) {
            $("#msg_msg").html("");
            if (data.records === 0) {
                $("#grid_agreement-gridpager").parent().find(".loading").removeClass("error_msg success_msg").addClass("info_msg").html($("<span>", {
                    "class": "grid-empty",
                    "text": "No results were found."
                }));
                $("#grid_agreement-gridpager").parent().find(".loading").delay(800).fadeIn(400);
            }
        },
        beforeRequest: function () {
            $("#grid_agreement-gridpager").parent().find(".loading").removeClass("error_msg success_msg").addClass("info_msg").html("Loading...");
        },
        afterEditCell: function (rowid, cellname, value, iRow, iCol) {
            $(".gridcalendar").datepicker({dateFormat: ""});
        },
        beforeSubmitCell: function (rowid, cellname, value, iRow, iCol) {
            var cm = $(this).jqGrid("getGridParam", "colModel")[iCol];
            return {
                table: cm.table, //tableField[0],
                field: cm.field, // tableField[1],
                fieldvalue: value
            };
        },
        afterSubmitCell: function (serverresponse, rowid, cellname, value, iRow, iCol) {
            if (serverresponse.responseText) {
                if (serverresponse.responseText == "reload") {
                    $("#grid_agreement").trigger("reloadGrid");
                    return [true, ""];
                }

                try {
                    var obj = $.parseJSON(serverresponse.responseText);
                    if (typeof(obj) != "undefined" && parseInt()) {
                        reloadDetailsHeader();
                        if (obj.customer_price) {
                            $("#grid_agreement").jqGrid("setCell", rowid, "customer_price", obj.customer_price);
                        }

                        if (obj.reseller_price) {
                            $("#grid_agreement").jqGrid("setCell", rowid, "reseller_price", obj.reseller_price);
                        }
                        return [true, ""];
                    }
                } catch (err) {
                }

                return [false, serverresponse.responseText];
            } else {
                return [true, ""];
            }
        },
        subGrid: false
    });

    $('#grid_agreement').jqGrid('navGrid', '#grid_agreement-gridpager', {
        edit: false,
        add: false,
        del: false,
        search: false,
        refresh: true
    });

    $('#grid_agreement').jqGrid('navButtonAdd', '#grid_agreement-gridpager', {
        caption: 'Columns | ',
        title: 'Remove or Add Columns',
        onClickButton: function () {
            jQuery('#grid_agreement').jqGrid('columnChooser', {
                done: function (perm) {
                    if (perm) {
                        $('#grid_agreement').jqGrid('remapColumns', perm, true, false);
                    }

                    saveColumnConfiguration($('#grid_agreement'), '/sf/agreement/', 1);
                    $('#grid_agreement').trigger("reloadGrid");
                }
            });
        }
    });

    $('#grid_agreement').jqGrid('navButtonAdd', '#grid_agreement-gridpager', {
        caption: 'Save Settings | ',
        title: 'Save Grid Columns',
        onClickButton: function () {
            saveColumnConfiguration($('#grid_agreement'), '/sf/agreement/', 1);
        }
    });

    $('#grid_agreement').jqGrid('navButtonAdd', '#grid_agreement-gridpager',
        {
            caption: 'Edit | ',
            title: 'Edit',
            onClickButton: function () {
                var gsr = $('#grid_agreement').jqGrid('getGridParam', 'selarrrow');
                if (gsr.length > 0 && gsr[0] != '') {
                    $('#edit_agreement_dialog #agreements_id').val(gsr);
                    $('#form_message').addClass('hidden');
                    $('#edit_agreement_dialog').dialog('open');
                }
                else {
                    alert('Please select at least one item.');
                }
            }
        });

    $('#gbox_grid_agreement').bind('sortstop', function () {
        saveColumnConfiguration($('#grid_agreement'), '/sf/agreement/', 1);
    });
    $('#grid_agreement-gridpager_left').addClass('navigationcontrols');
    $('#grid_agreement-gridpager_left').clone(true).insertBefore('#grid_agreement_toppager_left');
    $('#grid_agreement_toppager_left').remove();
    $('#grid_agreement_toppager_right').html('<div class="quicksearchsection"><input type="text" id="grid_agreement-quicksearchtext" placeholder="Search" /><input type="button" class="search_button" style="position: relative; left: -1px" value="&nbsp;" id="grid_agreement-quicksearchbutton" /> <a id="grid_agreement-quicksearchreset" href="javascript:void(0);" style="text-decoration:underline;">X</a></div>');
    $('#grid_agreement_right').clone(true).insertAfter('#grid_agreement_toppager_right');
    $('#grid_agreement-quicksearchbutton').click(function () {
        var value = $('#grid_agreement-quicksearchtext').val();
        $('#grid_agreement').jqGrid('setGridParam', {
            postData: {
                'quicksearch': 1,
                'val': value
            }
        }).trigger('reloadGrid', [{page: 1}]);
    });

    $('#grid_agreement-quicksearchtext').on('keydown', function (key) {
        if (key.keyCode === 13) {
            $('#grid_agreement-quicksearchbutton').click();
        }

    });
    $('#grid_agreement-quicksearchreset').click(function () {
        $('#grid_agreement-quicksearchtext').val('');
        $('#grid_agreement-quicksearchbutton').click();
    });
});

但是第一列看起来像是图像上的那一列：

当然，如果我将鼠标移到数字上会弹出，但是如果可能的话我想让这个列自动调整大小。有什么帮助吗？

Answer 1

您可以使用rownumWidth选项，默认情况下为25.最好首先查阅文档

有没有办法让自由jQgrid中的第一列更宽？

1 个答案: