0
首先，我看到很多這樣的問題的答案，沒有示例代碼似乎適用於我。我瀏覽了項目wiki頁面上的例子，似乎沒有一個適用於我，我可以看到。我不是問這是懶惰的，但三天後，我真的很茫然......不能讓slickgrid將數據保存到隱藏字段
我實例化一個表格內的網格，然後提交，我需要保存表單數據到序列化隱藏的輸入字段（或將其轉換爲模態的，但不知道如何做到這一點，雖然聽起來像是一個完美的解決方案......
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> 正如你所看到的，我一直在嘗試從網格中獲取數據，所有的警報和控制檯日誌測試都試圖實現我發現的各種答案。然而，沒有人發佈了這個工作應用程序的最終代碼示例。一旦我得到它的工作，我打算將它提交給mbielman的exxamples頁面，以嘗試幫助許多用戶遇到。此外，如果有人可以告訴我如何實例化網格作爲一種模式，這將是很好的信息:)
目前，我的日誌回覆以下內容，請參閱命令寫入日誌提交功能在腳本。看來我可以從console.log (' myGrid data2: '+ $('#myGrid').data());得到一個對象，我似乎無法用它做任何事情，否則爲空，甚至不知道如何將它顯示在屏幕上看到的調試內容...
螢火控制檯輸出
myGrid data1: null
myGrid data2: [object Object]
myGrid data3:
data is undefined
注，而我在許多語言中一個相當高級程序員，一些語法/ JavaScript的性能/ jQuery的是非常混亂給我。因此，任何額外的時間，你可以用來解釋什麼是錯誤的，如何做得更好，參考鏈接，將是非常棒的，因爲我真的想更好地使用這種語言。再次，非常抱歉，如果你來到這裏，我非常感謝你的時間。我試圖儘可能地徹底，以便其他人有一個徹底的參考點，當他們有我一樣多的麻煩...