我正在尝试使用找到的代码http://www.jqwidgets.com/display-a-grid-in-a-dropdown/来创建多列选择列表。该列表已创建，但是在文档的初始加载时，文档顶部附近有一个浮动的垂直滚动条，如下图所示：
打开列表后，栏会显示在需要的位置。And when an item is selected, the bar disappears. 我的代码如下：
// Start Multicolume
function generatedata(rowscount) {
// prepare the data
var data = new Array();
if (rowscount == undefined) rowscount = 100;
var firstNames = ["Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
var lastNames = ["Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
var productNames = ["Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Caramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
for (var i = 0; i < rowscount; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["id"] = i;
row["available"] = productindex % 2 == 0;
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
data[i] = row;
}
return data;
}
var data = generatedata(100);
var source = {
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxdropdownbutton").jqxDropDownButton({
width: 150,
height: 25
});
$("#jqxgrid").jqxGrid({
width: 550,
source: dataAdapter,
columns: [{
text: 'First Name',
columntype: 'textbox',
datafield: 'firstname',
width: 90
}, {
text: 'Last Name',
datafield: 'lastname',
columntype: 'textbox',
width: 90
}, {
text: 'Product',
columntype: 'dropdownlist',
datafield: 'productname',
width: 180
}, {
text: 'Quantity',
datafield: 'quantity',
width: 70,
cellsalign: 'right'
}, {
text: 'Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
$("#jqxgrid").bind('rowselect', function(event) {
var args = event.args;
var row = $("#jqxgrid").jqxGrid('getrowdata', args.rowindex);
var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['firstname'] + ' ' + row['lastname'] + '</div>';
$("#jqxdropdownbutton").jqxDropDownButton('setContent', dropDownContent);
});
$("#jqxgrid").jqxGrid('selectrow', 0);
// End Multicolume<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="~/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<script type="text/javascript" src="~/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxdata.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/jqxdropdownbutton.js"></script>
<div id="jqxdropdownbutton">
<div style="border: none;" id="jqxgrid">
</div>
</div>
</body>
</html>我需要启用哪些参数才能在加载时看不到滚动条？