Question

我的网格只有一列，因此搜索工具非常宽（只要整个页面）。我添加了一个css元素来减小宽度：

.ui-jqgrid .ui-search-table .ui-search-input>input,
.ui-jqgrid .ui-search-table .ui-search-input>select
{
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

这是我的代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" media="screen"
          href="${pageContext.request.contextPath}/css/jquery-ui.min.css"/>
    <!--   to remove the vertical scroll bar in column header in chrome -->
    <style type="text/css">
        .ui-jqgrid-hdiv { overflow-y: hidden; },    
        .ui-jqgrid .ui-search-table .ui-search-input>input,
        .ui-jqgrid .ui-search-table .ui-search-input>select
        {
            display: block;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        } 

    </style>          

    <link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/css/ui.jqgrid.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/grid.locale-en.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <title>Shipment Visibility</title>
    <script type="text/javascript">
        jQuery().ready(function () {
            var grid = jQuery("#shipment_grid");
            var mainGridPrefix = "s_";
            grid.jqGrid({
                url: '${pageContext.request.contextPath}/getTruckShipmentJSONAction?truckId=' + <c:out value="${truckId}" />,
                datatype: "json",
                mtype: 'GET',
                loadonce: true,
                colNames: ['Lead Tracking #'],
                colModel: [
                    {name: 'trackingNr', width: 100}
                ],
                rowNum: 10,
                height: "auto",
                width: 750,
                idPrefix: mainGridPrefix,
                autoheight: true,
                rowList: [10, 20, 30],
                pager: jQuery('#shipment_grid_pager'),
                sortname: 'trackingNr',
                sortorder: "desc",
                jsonReader: {
                    root: "records",
                    page: "page",
                    repeatitems: false
                },
                viewrecords: true,
                altRows: false,
                gridview: true,
                multiselect:true,
                hidegrid: false,
                shrinkToFit: true,
                forceFit: true,
                idPrefix: mainGridPrefix,
                caption: "Shipments Overview",
                subGrid: true,
                beforeProcessing: function(data) {  
                //Customise the record text at the right hand side of the pagination
                grid.jqGrid('setGridParam', {recordtext: "{2} Shipment(s) Found. Displaying {0} to {1}"});

                    var rows = data.records, l = rows.length, i, item, subgrids = {};
                    for (i = 0; i < l; i++) {
                        item = rows[i];
                        if (item.shipUnitView) {
                            subgrids[item.id] = item.shipUnitView;
                        }
                    }
                    data.userdata = subgrids;

                },              
                subGridRowExpanded: function (subgridDivId, rowId) {
                    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
                        pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
                        subgrids = $(this).jqGrid("getGridParam", "userData");

                    $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
                    $subgrid.jqGrid({
                        datatype: "local",
                        data: subgrids[pureRowId],
                        colNames: ['Ship Type (Pallet / Carton)', 'Ship Unit (Pallet ID / Cone #)', 'Total Cartons'],
                        colModel: [
                            { name: "shipUnitType"},
                            { name: "reference", sorttype: "integer" },
                         { name: "totalOfCartons", sorttype: "integer" }
                        ],
                        cmTemplate: { align: "center" },
                        sortname: "reference",
                        sortorder: "desc",
                        height: "100%",
                        rowNum: 10,
                        autowidth: true,
                        autoencode: true,
                        gridview: true,
                        idPrefix: rowId + "_"
                    });
                }
            }).navGrid('#shipment_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true})
            .jqGrid("setLabel", "trackingNr", "", {"text-align": "left"}); //align 'Lead Tracking #' column header  to the left;

            grid.jqGrid('filterToolbar', {autoSearch: true});
            //var $search_toolbar = $("tr.ui-search-toolbar", grid[0].grid.hDiv);
            //$search_toolbar.width(50);
        });

    </script>
</head>
<body>
<table id="shipment_grid"></table>
<div id="shipment_grid_pager"></div>
</body>
</html>

但它不起作用。在这里查看我的jsfiddle：Fiddle。如何减小过滤器tooolbar的宽度？

Answer 1

要解决此问题，您可以在需要更改搜索字段选项的列中添加具有其他属性的searchoptions.attr属性。例如

searchoptions: { attr: {size:18, maxlength: 18, style: "width:130px;margin-top:1px;"}

请参阅更新的演示http://jsfiddle.net/97j49Lot/7/。

我建议您另外添加CSS规则

/* to remove "clear" ("x") part in IE */
.ui-jqgrid .ui-search-table .ui-search-input>input::-ms-clear {
    display: none;
}

在IE10及更高版本中具有相同的输入框宽度。

更新：要使用jqGrid的“清除”功能，可以使用searchoptions.clearSearch选项。结合在输入框中设置width样式，可以使用

.ui-jqgrid .ui-search-table .ui-search-clear { width: 100%; }
.ui-jqgrid .ui-search-table .ui-search-clear a { float: left; }

和

searchoptions: {
    clearSearch: true,
    attr: { size:18, maxlength: 18, style: "width:130px;margin-top:1px;" }
}

请参阅http://jsfiddle.net/97j49Lot/8/

如何减小jqGrid过滤器工具栏的宽度

1 个答案: