如何重新设置jqGrid过滤器工具栏的宽度

我的网格只有一列，因此搜索工具栏非常宽（只要整个页面）。我添加了一个CSS元素，以减少宽度：如何重新设置jqGrid过滤器工具栏的宽度

.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的宽度？

来源

2014-09-24 Terry

要解决该问题，您可以在需要更改搜索字段选项的列中添加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/

来源

2014-09-24 14:24:34 Oleg

我爱的 “清除”（ “X”）的功能。现在距离搜索框非常远。我想保留它在搜索框旁边。我怎样才能做到这一点？ – Terry 2014-09-24 15:01:51

@Terry：查看** UPDATED **部分我的答案。 – Oleg 2014-09-24 15:53:28

它的工作原理，谢谢。这个网格实际上是当我点击一个更大的主网格中的一行时显示的，但我遇到了以下问题：当我双击主网格中的一行时，新网格会打开正确对齐的clearSearch“x”，但是大网格中的过滤框会完全收缩，因为CSS .ui-jqgrid .ui-search-table .ui-search-clear {width：100％; }在较小的电网覆盖主电网的电网。如何确保这个CSS只影响较小的网格？ – Terry 2014-09-25 09:51:46

如何重新设置jqGrid过滤器工具栏的宽度

回答

相关问题