首先，我已经看到了很多这样的问题的答案，但没有似乎适用于我的示例代码。我浏览了项目 wiki 页面上的示例，但似乎没有一个适用于我，我可以看到。我不是求这个偷懒，而是三天后，我真的很茫然……
我在表单中实例化一个网格，然后在提交时，我需要将表单数据保存到序列化的隐藏输入字段（或将其转换为模态，但不知道如何执行此操作，尽管这听起来像是完美的解决方案.. .
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() );，我似乎无法对它做任何事情，否则它为空，甚至不知道如何将它显示到屏幕上以查看调试内容...
萤火虫控制台输出
myGrid data1: null
myGrid data2: [object Object]
myGrid data3:
data is undefined
请注意，虽然我是许多语言的相当高级的程序员，但 javascript/jQuery 的一些语法/属性让我非常困惑。因此，您可以花任何额外的时间来解释出了什么问题，如何做得更好，参考链接，这将是非常棒的，因为我真的想更好地使用这种语言。再一次，很抱歉这篇文章很长，如果你到了这里，我真的很感谢你的时间。我试图尽可能彻底，以便其他人在遇到与我一样多的麻烦时有一个彻底的参考点......