まず第一に、私に当てはまると思われるサンプルコードなしで、このような質問に対する非常に多くの回答を見てきました。私はプロジェクトのwikiページの例を調べましたが、私が見ることができるものはどれも私には当てはまらないようです。私はこれを怠惰にするように求めているのではありませんが、3日後、私は本当に途方に暮れています...
フォーム内のグリッドをインスタンス化し、送信時に、フォームデータをシリアル化された非表示の入力フィールドに保存する必要があります（またはモーダルに変換しますが、これを行う方法がわかりませんが、完璧な解決策のように聞こえます。 。
HTML
<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:997;visibility:hidden;"><p><label for="datepicker">Date: </label><input type="text" id="datepicker" name='datepicker'size="30"/></p>
<!-- jQuery DatePicker shows here -->
</div>
<div id="myGrid" style="height:400px;width:902px; float:left;" >
<!-- #myGrid.slickGrid goes here -->
</div>
</div>
<div class="options-panel">
<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>
<h2>Options:</h2>
<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">Submitter</button></div>
<a href="javascript: submitform()">Search</a>
</div>
</form>
ロードされている.jsスクリプト
js/slickGrid/lib/firebugx.js
js/jquery-ui-1.8.20.custom.min.js.php
js/json2.js.php
js/slickGrid/plugins/slick.cellrangedecorator.js
js/slickGrid/plugins/slick.cellrangeselector.js
js/slickGrid/plugins/slick.cellselectionmodel.js
js/slickGrid/slick.formatters.js
js/slickGrid/slick.editors.js
グリッドをインスタンス化してから表示するようにコーディングします（依存関係を解決するためにネストされます）
<script>
var grid; // initalize grid globally so it can be accessed outside of this function
$.getScript("js/slickGrid/jquery.event.drag-2.0.min.js",function(){
$.getScript("js/slickGrid/slick.core.js",function(){
$.getScript("js/slickGrid/slick.grid.js",function(){
$.holdReady(false);
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
};
// grid = new Slick.Grid($("#acs-work"), returnObj.source, columns, options);
//var $tabs = $('#tabset').tabs();
//var selected = $tabs.tabs('option', 'selected') + 1; // => 0[edit]
//var panelstr = "#panel" + selected;
//to load dynamic data
// PROTO: grid = new Slick.Grid($(panelstr), returnObj.source, columns, options);
grid = new Slick.Grid("#myGrid", data, columns, options);
$('#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");
}).fail(function(jqxhr, settings, exception) { document.write('FAILED: '+exception); });
}).fail(function(jqxhr, settings, exception) { document.write('FAILED: '+exception) });//console.log( textstatus );
}).fail(function(jqxhr, settings, exception) { document.write('FAILED: '+exception) });//console.log( textstatus );
$.getScript("js/jquery.calendarPicker.js");
</script>
ページの最後にある最終的なスクリプト（フッター）
<script>
$.holdReady(true);
console.log('json2 Loadstatus: '+json2Loaded);
</script>
<? //Instantiate slickGrid jQueryUI widget ?>
<script>
$(document).ready(function(){
$(function() {
$( "#datepicker" ).datepicker({ numberOfMonths: [2, 3] });
$( "#datepicker" ).datepicker( "option", "showAnim", "clip");
});
});
//Hide loading image div and show loaded jQuery modules
$('#myGridForm').submit(function() {
//var gridDtaHolder = $('#myGrid').getData();
//alert ($('input').val( $('myGridForm').serialize() ) );
//alert ($('#myGrid').serialize() );
//gridDtaHolder = JSON.stringify();
//grid.getEditController().commitCurrentEdit();
//$('#myGridData').val( $('grid-canvas').serialize() );
console.log ( ' myGrid data1: '+ $('grid').data() );
console.log ( ' myGrid data2: '+ $('#myGrid').data() );
var datum = $('#myGrid').data();
console.log ( ' myGrid data3: '+ $('datum').serialize() );
//$("#myGridData").val( $('datum').serialize() );
$("input[name='gridData']").val($.JSON.encode(data));
// stops submit ie. return false;
});
</script>
ご覧のとおり、私はしばらくの間、グリッドからデータを取得しようとしてきましたが、すべてのアラートとコンソールログテストで、SOで見つけたさまざまな回答を実装しようとしています。ただし、これを使用したアプリケーションの最終的なコードサンプルは誰も投稿していません。動作するようになったら、mbielmanの例のページに送信して、非常に多くのユーザーが遭遇していることを支援する予定です。また、誰かがグリッドをモーダルとしてインスタンス化する方法を教えてくれるなら、それも素晴らしい情報になるでしょう:)
現在、私のログは次のように応答します。スクリプトの最後にある送信機能でログに書き込むコマンドを参照してください。オブジェクトを取得できるようですが、オブジェクトを使用console.log ( ' myGrid data2: '+ $('#myGrid').data() );して何もできないようです。そうでない場合はnullであり、デバッグ用のコンテンツを表示するために画面に表示する方法さえわかりません...
Firebugコンソールの出力
myGrid data1: null
myGrid data2: [object Object]
myGrid data3:
data is undefined
私は多くの言語でかなり高度なプログラマーですが、javascript/jQueryの構文/プロパティのいくつかは私にとって非常に混乱していることに注意してください。ですから、何がうまくいかないのか、それをより良くする方法、参照リンクを説明するためにあなたが費やすことができる追加の時間は、私がこの言語での作業を本当に上手にしたいと思っているので素晴らしいでしょう。繰り返しになりますが、非常に長い投稿について申し訳ありません。ここに到着した場合は、本当にありがとうございました。私はできるだけ徹底的に努力しているので、他の人が私と同じくらい多くの問題を抱えているときに徹底的な基準点を持っています...