如何重新设置jqGrid过滤器工具栏的宽度 [英] How to redice the width of a jqGrid filter toolbar
本文介绍了如何重新设置jqGrid过滤器工具栏的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的网格只有一列，因此搜索工具栏非常宽（只要整页）。我添加了一个css元素来减小宽度：
My grid has only one column, therefore the search toolba very wide (as long as the whole page). I added a css element to reduce the width:
.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;
}
这是我的代码：
This is my code:
<%@ 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：。
如何减少过滤器tooolbar的宽度？
but it does not work. See my jsfiddle here: Fiddle. How can I reduce the width of the filter tooolbar?
推荐答案
要解决这个问题，您可以添加 searchoptions.attr 属性，其中包含需要更改搜索字段选项的列中的其他属性。例如
To solve the problem you can add searchoptions.attr property with additional attributes in the column where you need to change options of the searching field. For example
searchoptions: { attr: {size:18, maxlength: 18, style: "width:130px;margin-top:1px;"}
查看更新演示 http://jsfiddle.net/97j49Lot/7/ 。
我建议你另外添加CSS规则
I would recommend you additionally to add CSS rule
/* to remove "clear" ("x") part in IE */
.ui-jqgrid .ui-search-table .ui-search-input>input::-ms-clear {
display: none;
}
在IE10及更高版本中具有相同的输入框宽度。
to have the same width of input box in IE10 and higher .
更新：要使用jqGrid的清除功能，可以使用 searchoptions.clearSearch 选项。结合在输入框中设置 width 样式，可以使用
UPDATED: To use "clear" functionality of jqGrid one can use searchoptions.clearSearch option. In combination with setting width style on the input box one can use
.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过滤器工具栏的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
