我有一个奇怪的问题，我找不到在 SO 或其他方面的参考。除了两个关键问题和我想做的两件事外，我的网格似乎在所有方面都运行良好。回复时，我不希望所有问题都能得到回复，即使您有其中一个问题的信息，也请将其作为答案发布。有关我的问题的视觉效果，请参阅下面的图片。
第一个问题：
每当将数据放入空行的任何字段并单击选项卡时，都会生成一个新行。如果所选单元格位于该行的最后一列，我只想要这种行为
第二个问题：
每当添加一个超出我定义的 div 边缘的新行并且出现垂直滚动条时，就会添加一个额外的不可选择的列，它会在我的网格底部创建一个水平滚动条。该栏隐藏了底行的一部分。如何防止出现此水平条。
第三个请求：当网格创建新行时，如何验证以确保当前最后一行中的每个单元格中都有数据，然后才允许选项卡效果添加新行。
最终请求：单击一个单元格并获得焦点后，除非选择另一个单元格，否则它不会失去焦点。如果用户单击网格之外的任何内容，我需要失去焦点。
即使没有填充所有单元格，也显示添加新行，并且选择器位于第一个单元格中
显示底部滚动条提出的问题
HTML
<link type="text/css" rel="stylesheet" href="css/slickGrid/slick.grid.css" />
<link type="text/css" rel="stylesheet" href="css/cupertino/jquery-ui-1.8.20.custom.css" />
<link type="text/css" rel="stylesheet" href="css/slickGrid/slick.grid.darren1.css" />
<form id="myGridForm" action="" method="post">
<div style="position:relative; overflow:visible; margin:25px 0 0 0;">
<div id="loader" style="position:absolute; z-index:997;top: 62px; left:200px;"><img src="images/loading.gif" border="0" /></div>
<div id="dateInput" style="position:relative;z-index:990;visibility:hidden;">
<!-- jQuery DatePicker shows here -->
<p><label for="datepicker">Click to change date:</label><input type="text" id="datepicker" name='datepicker'size="30" readonly="readonly"/></p>
</div>
<div id="myGrid" style="height: 177px; width: 902px; float: left; overflow: hidden; position: relative; visibility: hidden;" >
<!-- #myGrid.slickGrid goes here -->
</div>
</div>
<div class="options-panel" style=" -moz-border-radius: 6px; -webkit-border-radius: 6px; border: 1px solid silver; background: #f0f0f0; padding: 4px; margin: 0 0 220px 0; width: 880px;position: absolute; top: 315px; left: 280px;">
<h2>Instructions:</h2>
<ul>
<li>Select the date by clicking the date image above the table</li>
<li>Enter your event data (you can enter multiple events for that date)</li>
<li>To add another event, hit your <em>TAB</em> key and a new row will be created</li>
<li>When you're all done for this date, click the <em>Commit Changes</em> button to have your events saved to the site</li>
</ul>
<input type="hidden" name="p" id="p" value="<?=$_POST['p']?>" />
<input type="hidden" name="k" id="k" value="<?=$_POST['k']?>" />
<input type="hidden" name="i" id="i" value="<?=$_POST['i']?>" />
<input type="hidden" name="d" id="d" value="<?=$_POST['d']?>" />
<input type="hidden" name="gridData" id="gridData" />
<div id="submitButton" style="visibility:hidden;"> <button type="submit">Commit Changes</button></div>
</div>
</form>
<script>
console.log('json2 Loadstatus: '+json2Loaded);
</script>
<script type="text/javascript" language="javascript" src="js/slickGrid/lib/firebugx.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js.php"></script>
<script type="text/javascript" src="js/json2.js.php"></script>
<script src="js/slickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="js/slickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="js/slickGrid/plugins/slick.cellselectionmodel.js"></script>
<script src="js/slickGrid/slick.formatters.js"></script>
<script src="js/slickGrid/slick.editors.js"></script>
<script src="js/slickGrid/jquery.event.drag-2.0.min.js"></script>
<script src="js/slickGrid/slick.core.js"></script>
<script src="js/slickGrid/slick.grid.js"></script>
<script>
function requiredFieldValidator(value) {
if (value == null || value == undefined || !value.length) {
return {valid: false, msg: "This is a required field"};
} else {
return {valid: true, msg: null};
}
}
var columns = [
{ id: "VisitDate", name: "VisitDate", field: "VisitDate", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
{ id: "VisitTime", name: "VisitTime", field: "VisitTime", width: 100, editor: Slick.Editors.Text },
{ id: "PrimaryComplaint", name: "PrimaryComplaint", field: "PrimaryComplaint", width: 100, cssClass: "cell-right", editor: Slick.Editors.Text },
];
var data = [
{
"VisitDate": "11/30/2009",
"VisitTime": "0117",
"PrimaryComplaint": "General malaise "
},
{
"VisitDate": "02/08/2010",
"VisitTime": "0930",
"PrimaryComplaint": "General malaise "
}
];
var options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
forceFitColumns: true
};
var grid = new Slick.Grid("#myGrid", data, columns, options);
grid.onAddNewRow.subscribe(function (e, args) {
var item = args.item;
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();
});
$('#loader').hide();
$('#dateInput').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
$('#myGrid').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
$('#submitButton').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
$.getScript("js/jquery.calendarPicker.js");
$.getScript("js/jquery.json-2.3.min.js");
</script>
<script>
console.log('json2 Loadstatus: '+json2Loaded);
</script>
<? //Instantiate datepicker jQueryUI widget ?>
<script>
$(document).ready(function(){
$(function() {
$( "#datepicker" ).datepicker({ numberOfMonths: [1, 3] });
$( "#datepicker" ).datepicker( "option", "showAnim", "clip");
$( ".selector" ).datepicker( "option", "showOn", "both" );
}); // end function()
}); // end doc.ready
$('#myGridForm').submit(function() {
console.log ( ' myGrid data1: '+ $('grid').data() );
console.log ( ' myGrid data2: '+ $('#myGrid').data() );
var datum = $('#myGrid').data();
console.log ( ' myGrid data3: '+ $('datum').serialize() );
console.log ( ' myGrid data4: '+ JSON.stringify(data) );
$("input[name='gridData']").val(JSON.stringify(data));
// stops submit /ie. return false;
});
</script>