无法获取光滑网格将数据保存到隐藏字段

首先，我看到了很多关于此类问题的答案，但没有似乎适用于我的示例代码。 我浏览了项目维基页面上的示例，似乎没有一个适用于我。 我不是要求这个偷懒，但三天后，我真的不知所措......

我在表单中实例化一个网格，然后在提交时，我需要将表单数据保存到序列化的隐藏输入字段（或将其转换为模态，但不知道如何执行此操作，尽管这听起来像是完美的解决方案......

.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 的 exxamples 页面，以尝试帮助这么多用户遇到的问题。 此外，如果有人可以向我展示如何将网格实例化为模态，那将是很好的信息:)

目前，我的日志回复以下内容，请参阅脚本末尾提交功能中写入日志的命令。 看来我可以从console.log ( ' myGrid data2: '+ $('#myGrid').data() );中获取一个对象，我似乎无法对它做任何事情，否则它是空的，甚至不确定如何将其显示在屏幕上以查看调试内容......

Firebug 控制台输出

myGrid data1: null
myGrid data2: [object Object]
myGrid data3:
data is undefined

请注意，虽然我是一个相当高级的程序员，但javascript/jQuery的一些语法/属性对我来说非常混乱。 因此，您可以花在解释出了什么问题，如何做得更好，参考链接上的任何额外时间都很棒，因为我真的很想更好地使用这种语言。 再次，对不起，真的很长的帖子，如果你到了这里，我真的很感谢你的时间。 我试图尽可能彻底，以便其他人在遇到和我一样多的麻烦时有一个彻底的参考点......