私は奇妙な問題を抱えています.SOまたはその他の方法で参照を見つけることができません. 私のグリッドは、2 つの重要な問題と私がやりたい 2 つのことを除いて、あらゆる点でうまく機能しているようです。返信する際、すべての懸念事項に対する回答を期待しているわけではありません。それらの 1 つに関する情報があったとしても、回答として投稿してください。私の問題のビジュアルについては、以下の画像を参照してください。
最初の問題:
データが空の行の ANY フィールドに配置され、タブがクリックされるたびに、新しい行が生成されます。選択したセルがこの行の最後の列にある場合にのみ、この動作が必要です
2 番目の問題:
定義した div の端を超える新しい行が追加され、垂直スクロールバーが表示されるたびに、選択不可の列が追加され、グリッドの下部に水平スクロールバーが作成されます。このバーは、一番下の行の一部を隠しています。この水平バーが表示されないようにするにはどうすればよいですか。
3 番目の要求: グリッドが新しい行を作成するとき、タブ効果で新しい行を追加できるようにする前に、現在の最後の行の各セルにデータが含まれていることを検証する方法を教えてください。
最終要求: セルをクリックしてフォーカスを受け取った後、別のセルが選択されていない限り、フォーカスを失うことはありません。ユーザーがグリッドの外側をクリックすると、フォーカスを失う必要があります。
すべてのセルが満たされていないにもかかわらず、新しい行の追加を示しており、セレクターが最初のセルにある
下部スクロールバーによって提示された問題を表示する
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>