SlickGrid ADODB（MS Access）示例

我有一個非常簡單的slickGrid示例，我試圖通過ADODB從MS Access進行填充。我已經轉換表成JSON狀對象（導致原始數據的精確副本，實際上顯示精細）：SlickGrid ADODB（MS Access）示例

<script type="text/javascript"> 
var pad = "C:\\wamp\\www\\Test\\db1.mdb"; 
var cn = new ActiveXObject("ADODB.Connection"); 
var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + pad; 
cn.Open(strConn); 
var rs = new ActiveXObject("ADODB.Recordset"); 
var SQL = "SELECT * FROM Parts"; 
rs.Open(SQL, cn); 
    if(!rs.bof) { 
     rs.MoveFirst(); 
    } 

// Build JSON for SlickGrid... set first instance to '' 
var JSONobj=''; 


var i=1; 
// while(!rs.eof) { 
while(i<3) { 
JSONobj=JSONobj+"{id:" + i + ", "+"PartID:'" + rs.fields(1).value + "', "+"Date:'" + rs.fields(2).value + "', " + "Project:'" + rs.fields(3).value + "', " + "Product:'" + rs.fields(4).value + "', " + "First_Name:'" + rs.fields(5).value + "', " + "Last_Name:'" + rs.fields(6).value + "', " + "Firm:'" + rs.fields(7).value + "', " + "Role:'" + rs.fields(8).value +"'},"; 
    i=i+1 
    rs.MoveNext(); 
} 

// Remove last comma on JSON 
var strLen = JSONobj.length; 
JSONobj = JSONobj.slice(0,strLen-1); 

JSONobj = JSONobj.replace(/null/g, " "); 

//else { 
//document.write("No data found"); 
//}; 
rs.Close(); 
cn.Close(); 
</script>

網格沒有錯誤呈現但是我沒有數據。這裏就是整個源代碼（除上述轉換方法）：

 >    <!DOCTYPE HTML> 

<html> 
<head> 

<title>test</title> 

<!-- Load initial styles/js --> 
<link rel="stylesheet" href="css/slickgrid/slick.grid.css" type="text/css" media="screen" charset="utf-8" /> 
<link rel="stylesheet" href="css/slickgrid/examples.css" type="text/css" media="screen" charset="utf-8" /> 

<script language="javaScript" src="js/jquery-1.4.3.min.js"></script> 

</head> 
<body> 

<div id="pageContainer"> 
<div id="myGrid" class="grid"></div> 
</div> 

<!-- SlickGrid dependant files --> 
<script language="javascript" src="js/jquery/jquery-1.4.3.min.js"></script> 
<script language="javascript" src="js/jquery/jquery-ui-1.8.5.custom.min.js"></script> 
<script language="javascript" src="js/jquery/jquery.event.drag-2.0.min.js"></script> 
<script language="javascript" src="js/slickgrid/slick.core.js"></script> 
<script language="javascript" src="js/slickgrid/plugins/slick.rowselectionmodel.js"></script> 
<script language="javascript" src="js/slickgrid/slick.grid.js"></script> 
<script language="javascript" src="js/slickgrid/slick.groupitemmetadataprovider.js"></script> 
<script language="javascript" src="js/slickgrid/slick.dataview.js"></script> 

<!-- XXXXXXXXXXXXXXX jQ Date/Calendar XXXXXXXXXXXXX --> 
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script> 

<script type="text/javascript"> 
var dataView; 
var grid; 
var data = []; 
var rows = []; 
var initialSortOrder = {}; 

var options = { 
    enableCellNavigation:true, 
    enableColumnReorder:true, 
    editable:false, 
    sortable:true, 
    rowHeight:25 
    // rowHeight:23 
}; 

initialSortOrder.sortBy = "symbol"; 
initialSortOrder.sortDirection = "ASC"; 

var columns = [ 
{id:"PartID", name:"Part ID", field:"PartID", width:86, sortable:true}, 
{id:"Date", name:"Date", field:"Date", width:80, sortable:true}, 
{id:"Project", name:"Project", field:"Project", width:140, sortable:true}, 
{id:"Product", name:"Product", field:"Product", width:115, sortable:true}, 
{id:"First_Name", name:"First Name", field:"First_Name", sortable:true}, 
{id:"Last_Name", name:"Last Name", field:"Last_Name", width:75, sortable:true}, 
{id:"Firm", name:"Firm", field:"Firm", width:140, sortable:true}, 
{id:"Role", name:"Role", field:"Role", width:140, sortable:true}, 
{id:"Action", name:"Action", field:"Action", width:140, sortable:true} 
]; 

$(function() { 

data = [JSONobj]; 

     dataView = new Slick.Data.DataView(); 

    grid = new Slick.Grid($("#myGrid"), data, columns, options); 


// wire up model events to drive the grid 
    dataView.onRowCountChanged.subscribe(function(e,args) { 
    grid.updateRowCount(); 
    grid.render(); 
    }); 

    dataView.onRowsChanged.subscribe(function(e,args) { 
    grid.invalidateRows(args.rows); 
    grid.render(); 
    }); 

    grid.setSelectionModel(new Slick.RowSelectionModel()); 


// initialize the model after all the events have been hooked up 
    dataView.beginUpdate(); 
    dataView.setItems(data); 
    dataView.endUpdate(); 
    }) 
</script> 

</body> 
</html>

讚賞任何幫助...謝謝

來源

2012-07-30 user1415445

給您的網格中的顯式高度。例如：

<div id="myGrid" class="grid" style="height:400px"></div>

這是什麼修復它，當我有類似的問題。我後來轉向使用基於窗口大小的jQuery設置高度，並使用調整大小的回調，這很適合我的需求。

來源

2012-07-30 18:25:08 Edward

謝謝......高度很好。我看到帶有列標題的網格（單獨定義）和11個空行（我有ALT行着色）..這是正確的，因爲我的表中有10行數據。我沒有看到的是應該填充行的實際數據。 – user1415445 2012-07-31 10:22:29

您是否嘗試明確設置高度？或者你認爲這是確定的，因爲你看到渲染網格單元格？我相信slickgrid根據幾個高度計算決定填充哪些單元格。（對不起，但我不得不問）'：）'） – Edward 2012-07-31 15:48:33

如果不是高度，請在沒有日期列的情況下嘗試。 JSON日期令我頭痛不已。 – Edward 2012-07-31 15:48:59

好了，這裏是我使用的連接字符串，以及如何將數據映射到列：

$(function() { 
// Open DB & dump data into SlickGrid 

var pad = "C:\\wamp\\www\\Test\\db1.mdb"; 
    var cn = new ActiveXObject("ADODB.Connection"); 
    var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + pad; 
    cn.Open(strConn); 
    var rs = new ActiveXObject("ADODB.Recordset"); 
    var SQL = "SELECT * FROM Table1"; 
    rs.Open(SQL, cn); 
     if(!rs.bof) { 
      rs.MoveFirst(); 
     } 

     var i=0; 
     while(!rs.eof) { 
     var d = (data[i] = {}); 
     d["id"]  = "id_" + i; 
     d["PartID"] = rs.fields(1).value; 
     d["Date"] = rs.fields(2).value; 
     d["Project"] = rs.fields(3).value; 
     d["Product"] = rs.fields(4).value; 
     d["First_Name"] = rs.fields(5).value; 
     d["Last_Name"] = rs.fields(6).value; 
     d["Firm"] = rs.fields(7).value; 
     d["Role"] = rs.fields(8).value; 
     i=i+1 
     rs.MoveNext(); 
     } 
    rs.Close(); 
    cn.Close();

正如你所看到的，數據庫文件被映射到物理HD位置......這聽起來是正確的，因爲否則可能是安全違規（瀏覽器通常不能訪問讀/寫客戶端機器）。

來源

2012-08-01 16:15:00 user1415445

SlickGrid ADODB（MS Access）示例

回答

相關問題