jqxsplitter水平分割屏幕。在其中一个分割窗格中有一个宽度= 100％且高度= 100％的jqxgrid，以便使用滚动条自动调整网格大小。
有一个问题，一旦我点击网格面板，它会最大化到完全高度关闭另一个窗格。
window.addEventListener('load', function(e){
$('#tab').jqxSplitter({height:'100%', width: '100%' ,showSplitBar:true,orientation: 'horizontal', panels: [{ size: '50%'},{ size: '50%'}] });
var aliases = {
datatype: 'array',
localdata: [{col:'a'},{col:'b'}],
datafields:[
{name:'col',value:'col',type: 'string'}
]}
var s = new $.jqx.dataAdapter(aliases);
var columns = [
{ text: 'Column', dataField: 'col', width: 150, editable:true}
]
$('#grid').jqxGrid({
selectionmode: 'singlerow',
width: '100%',
height:'100%',
source: s,
pageable: false,
sortable: false,
editable: true,
columns: columns,
autoheight:false})}
,true)
HTM：
<div id='tab'>
<div style="position:relative;">
a div...
</div>
<div id="grid"></div>
</div>
如何在jqWidgets中阻止分割器内网格窗格的最大化？
答案 0 :(得分：0)
这里的一般问题是您的网格高度设置为100％，并且您在其上方有一些额外的内容，这会使得到的高度大于100％。一个简单的解决方案是，如果您的网格高度为90％，而网格上方/下方的其他内容为10％或其他内容。
前：
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this sample is demonstrated how to integrate jqxGrid with jqxSplitter</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'CompanyName', type: 'string' },
{ name: 'ContactName', type: 'string' },
{ name: 'ContactTitle', type: 'string' },
{ name: 'Address', type: 'string' },
{ name: 'City', type: 'string' },
{ name: 'Country', type: 'string' }
],
localdata: data,
updaterow: function (rowid, rowdata, commit) {
commit(true);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: '100%',
height: '90%',
source: dataAdapter,
columnsresize: true,
columns: [
{ text: 'Company Name', datafield: 'CompanyName', width: 250 },
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
{ text: 'City', datafield: 'City', width: 120 },
{ text: 'Country', datafield: 'Country'}
]
});
$("#CompanyName").jqxInput({height: 23});
$("#ContactName").jqxInput({ height: 23});
$("#ContactTitle").jqxInput({ height: 23});
$("#City").jqxInput({ height: 23});
$("#Country").jqxInput({ height: 23});
$("#splitter").jqxSplitter({ width: 680, height: 400, panels: [{ min: 150, size: 330 }, {min: 250}] });
$('#jqxgrid').on('rowselect', function (event) {
// event arguments.
var args = event.args;
// selected row.
var row = event.args.row;
// update inputs.
$("#CompanyName").val(row.CompanyName);
$("#ContactName").val(row.ContactName);
$("#ContactTitle").val(row.ContactTitle);
$("#City").val(row.City);
$("#Country").val(row.Country);
});
$("#Save").jqxButton({ width: 70, height: 23 });
$("#Save").click(function () {
var row = $('#jqxgrid').jqxGrid('getselectedrowindex');
var rowid = $("#jqxgrid").jqxGrid('getrowid', row);
var data = { CompanyName: $("#CompanyName").val(), ContactName: $("#ContactName").val(), ContactTitle: $("#ContactTitle").val(), City: $("#City").val(), Country: $("#Country").val() };
$("#jqxgrid").jqxGrid('updaterow', rowid, data);
});
});
</script>
</head>
<body class='default'>
<div id="splitter">
<div>
<div style="background: blue; height:10%;"></div>
<div style="border: none;" id='jqxgrid'>
</div>
</div>
<div id="ContentPanel">
<form id="Form">
<table style="margin-top: 20px; width: 100%;">
<tr><td style="text-align:right;">Company Name:</td><td style="text-align:left;"><input type="text" id="CompanyName" /></td></tr>
<tr><td style="text-align:right;">Contact Name:</td><td style="text-align:left;"><input type="text" id="ContactName" /></td></tr>
<tr><td style="text-align:right;">Contact Title:</td><td style="text-align:left;"><input type="text" id="ContactTitle" /></td></tr>
<tr><td style="text-align:right;">City:</td><td style="text-align:left;"><input type="text" id="City" /></td></tr>
<tr><td style="text-align:right;">Country:</td><td style="text-align:left;"><input type="text" id="Country" /></td></tr>
<tr><td></td><td style="padding-left: 35px; text-align: left;"><input value="Save" type="button" id="Save" /></td></tr>
</table>
</form>
</div>
</div>
</body>
</html>