首先，我已经看到了这样一个问题的很多答案，没有示例代码似乎适用于我。我浏览了项目维基页面上的示例，似乎没有一个我可以看到适用于我。我不是要求这个懒惰，但三天后，我真的很茫然......
我在表单中实例化一个网格，然后在提交时，我需要将表单数据保存到序列化的隐藏输入字段（或将其转换为模态，但不知道如何执行此操作，尽管它听起来像完美溶液...
的 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() );获取一个对象，我似乎无法用它做任何事情，或者它是null，甚至不确定如何将它显示到屏幕上以查看调试内容。
firebug控制台输出
myGrid data1: null
myGrid data2: [object Object]
myGrid data3:
data is undefined
注意，虽然我是一个相当高级的程序员，但是javascript / jQuery的一些语法/属性对我来说非常困惑。因此，您可以花费更多的时间来解释出现问题，如何做得更好，参考链接，这将是非常棒的，因为我真的想要更好地使用这种语言。再次，对于这篇很长的帖子感到抱歉，如果你来到这里，我真的很感谢你的时间。我试图尽可能地彻底，以便其他人在遇到像我一样麻烦的时候有一个彻底的参考点......
答案 0 :(得分：1)
您正在尝试从网格中获取数据。别。数据位于data JavaScript变量中（尽管您也可以通过grid.getData()获取）。使用您喜欢的任何机制来序列化全部或部分数据并将其发送到服务器。
另外，不要尝试使用SlickGrid，就好像它是一个jQuery小部件 - 它不是。所有SlickGrid的API都是通过您创建的JavaScript对象var grid = new Slick.Grid(...)公开的，而不是通过jQuery小部件语义公开的（例如$("#myGrid").xxx()）。