jQuery 如何在jqgrid中显示水平滚动条

How to show horizontal scroll bar in jqgrid

提问by jstuardo

I have a wide jqgrid that I have narrowed by mean of the width property. When I used that, no horizontal scroll bar appears. How can I show it?

我有一个宽 jqgrid，我通过 width 属性缩小了它。当我使用它时，没有出现水平滚动条。我怎样才能显示它？

Any help will be greatly appreciated,

任何帮助将不胜感激，

Thanks

谢谢

Jaime

海梅

EDIT:

编辑：

This is the current JS code I have. Scrollbar is still not shown:

这是我当前的 JS 代码。滚动条仍未显示：

<script type="text/javascript">
$(function () {
    $("#personal").jqGrid({
        url: "@Url.Action("List")",
        datatype: "json",
        mtype: "GET",
        colNames: ["Departamento",
                   "Nombres",
                   "Apellido Paterno",
                   "Apellido Materno",
                   "RUT",
                   "Contrase?a",
                   "Fecha Nacimiento",
                   "Fotografía",
                   "Estado Civil",
                   "Género",
                   "Dirección",
                   "Cargo",
                   "E-mail",
                   "Fecha Ingreso",
                   "Creación",
                   "Modificación",
                   " "],
        colModel: [
            { name: "departamento", index: "dep_nombre", editable: true, edittype: "select", editoptions: { width: 100, dataUrl: "@Url.Action("GetDepartments","Departamento")" }, width: 250, editrules: { required: true } },
            { name: "per_nombres", index: "per_nombres", editable: true, width: 250, editoptions: { maxlength: 80, size: 32 }, editrules:{ required:true } },
            { name: "per_apellido_paterno", index: "per_apellido_paterno", editable: true, width: 250, editoptions: { maxlength: 80, size: 32 }, editrules: { required: true } },
            { name: "per_apellido_materno", index: "per_apellido_materno", editable: true, width: 250, editoptions: { maxlength: 80, size: 32 } },
            { name: "per_dni", index: "per_dni", editable: true, width: 100, editoptions: { maxlength: 20, size: 17 }, editrules: { required: true } },
            { name: "per_contrasena", editable: true, width: 100, editoptions: { maxlength: 50, size: 17 }, editrules: { required: false } },
            { name: "per_fecha_nacimiento", index: "per_fecha_nacimiento", editable: true, width: 100, editrules: { date: true }, formatter: 'date', formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: { size: 17, dataInit: function (el) { $(el).datepicker({ dateFormat: 'dd-mm-yy' }); } }, },
            { name: "per_fotografia", index: "per_fotografia", editable: true, width: 250, edittype: "file", editoptions: { maxlength: 255, size: 32 } },
            { name: "per_estado_civil", index: "per_estado_civil", editable: true, edittype: "select", editoptions: { value: "S:Soltero; C:Casado; V:Viudo; D:Divorciado" }, width: 100 },
            { name: "per_sexo", index: "per_sexo", editable: true, edittype: "select", editoptions: { value: "M:Masculino; F:Femenino" }, width: 100 },
            { name: "per_direccion", index: "per_direccion", editable: true, width: 250, editoptions: { maxlength: 512, size: 32 } },
            { name: "per_cargo", index: "per_cargo", editable: true, width: 100, editoptions: { maxlength: 50, size: 32 } },
            { name: "per_email", index: "per_email", editable: true, width: 100, editoptions: { maxlength: 80, size: 32 }, editrules: { email: true } },
            { name: "per_fecha_ingreso", index: "per_fecha_ingreso", editable: true, width: 100, editrules: { date: true }, formatter: 'date', formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: { size: 17, dataInit: function (el) { $(el).datepicker({ dateFormat: 'dd-mm-yy' }); } }, },
            { name: "per_creado_el", index: "per_creado_el", editable:false, search:false, width: 100, align: "center", formatter: "date" },
            { name: "per_modificado_el", index: "per_modificado_el", editable:false, search:false, width: 100, align: "center", formatter: "date" },
            { name: 'acciones', width: 58, fixed: true, sortable: false, resize: false, search:false, formatter: 'actions', formatoptions: { keys: true } }
        ],
        jsonReader: {
            repeatitems: false,
            id: "per_id"
        },
        pager: "#pager",
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: "per_apellido_paterno",
        sortorder: "asc",
        viewrecords: true,
        gridview: true,
        autoencode: true,
        multiselect: true,
        shrinkToFit: false,
        caption: "Funcionarios",
        editurl: "@Url.Action("AjaxEdit")",
        height: '100%',
        width: 935,
        rownumbers: true,
        rownumWidth: 40            
    });

    $("#personal").jqGrid('hideCol', ["per_contrasena", "per_fotografia", "per_direccion"]);
    $("#personal").jqGrid('navGrid', '#pager', { edit: false, add: true, del: true, search: false }, { width: 500 }, { width: 500 }, {}, { multipleSearch: false, multipleGroup: false });
    $("#personal").jqGrid('filterToolbar', { searchOperators: false });

    $.jgrid.edit.addCaption = "Agregar Funcionario o Visita";
    $.jgrid.edit.editCaption = "Modificar Funcionario o Visita";
    $.jgrid.edit.saveData = "?El funcionario fue modificado! ?Almacena los cambios?";

    $.jgrid.formatter.date.newformat = 'd-m-Y H:i';
}); 
</script>

回答by JasCav

Without any code, some things you'll need to look at...

没有任何代码，你需要看一些东西......

Do not use autowidthand make sure you are not using shrinkToFit(it needs to be set to false). Other than that, the horizontal scrollbar should appear with just those two changes. In addition to this, you should also make sure you set the width explicitly for each column within the column model.

不要使用autowidth并确保您没有使用shrinkToFit（需要设置为 false）。除此之外，水平滚动条应该只出现这两个变化。除此之外，您还应该确保为列模型中的每一列明确设置宽度。

回答by Pratyush Taraphdar

just add

只需添加

 shrinkToFit : false,

It made the table layout to fixed grow as per the cell size doesn't get shrink as per table's parent width/

它使表格布局根据单元格大小固定增长不会根据表格的父宽度缩小/

回答by RRK

Adding a div with some width and overflow:auto around the table should do the trick.

在桌子周围添加一个具有一定宽度和溢出的 div:auto 应该可以解决问题。

<div style="width:100px;overflow:auto;"><table id="personal"></table><div>

回答by José Gil Ramírez

The horizontal scrollbar works great for me with the following conditions:

在以下条件下，水平滚动条非常适合我：

1. Setting the parameters shrinkToFitand forceFit. For example:

   $('#gridObtenerRegistros').jqGrid({ shrinkToFit:false, forceFit:true,

   and do not using the width parameter.

2. Setting the width property within the colmodel. Example:

   colModel:[ {name:'numEmpleadoCliente',index:'numEmpleadoCliente', width:80, sortable: false, resizable: false}, {name:'nombre',index:'nombre', width:215, sortable: false, resizable: false}, {name:'estatus',index:'estatus', width:50, sortable: false, resizable: false}],

3. Checking the style for .ui-jqgrid .ui-jqgrid-bdivclass has:`

   overflow: auto;

4. Checking the table for the grid does not have a width property.

   In my example: <table id="gridBusquedaRegistros"></table>

1. 设置参数shrinkToFit和forceFit。例如：

   $('#gridObtenerRegistros').jqGrid({ shrinkToFit:false, forceFit:true,

   并且不要使用宽度参数。

2. 在colmodel. 例子：

   colModel:[ {name:'numEmpleadoCliente',index:'numEmpleadoCliente', width:80, sortable: false, resizable: false}, {name:'nombre',index:'nombre', width:215, sortable: false, resizable: false}, {name:'estatus',index:'estatus', width:50, sortable: false, resizable: false}],

3. 检查.ui-jqgrid .ui-jqgrid-bdiv类的样式有：`

   overflow: auto;

4. 检查表格的网格没有宽度属性。

   在我的例子中： <table id="gridBusquedaRegistros"></table>

Hope this helps anyone.

希望这可以帮助任何人。

回答by jstuardo

Finally it was because no data were displayed in the grid. When the grid returns data.the horizontal scrollbar appears.

最后是因为没有数据显示在网格中。当网格返回数据时。水平滚动条出现。

Regards, Jaime

问候， 海梅

回答by Oleg

Probably you have some other CSS defined on the page which make problems. The demowhich just uses your code do displays horizontal scrollbars.

可能你在页面上定义了一些其他的 CSS，这会产生问题。仅使用您的代码的演示会显示水平滚动条。

回答by shasi kanth

You can try like below:

您可以尝试如下：

$('#grid_table').jqGrid({
    .....
    colModel: [
            // you can also set width for individual columns
            { name: "user_name", align:"center", width: "200"},
    .....
    .....

    shrinkToFit: false,
    .....

    gridComplete: function()
    {
     $('#grid_table').jqGrid('setGridWidth', '1000'); // max width for grid
    },
    .....