0

我有一个非常简单的 slickGrid 示例，我试图通过 ADODB 从 MS Access 填充。我已将 Table 转换为类似 JSON 的对象（生成实际显示正常的原始数据的精确副本）：

    <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>

任何帮助表示赞赏...谢谢

4

2 回答 2

1

好的，这是我正在使用的连接字符串以及它如何将数据映射到列中：

$(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();

如您所见，db 文件被映射到物理 HD 位置……这听起来是对的，因为否则它可能违反安全规定（浏览器通常无法访问从客户端计算机读取/写入到客户端计算机）。

于 2012-08-01T16:15:00.150 回答
0

给你的网格一个明确的高度。例如：

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

当我遇到类似问题时，这就是为我解决的问题。从那以后，我开始使用基于窗口大小的 jQuery 设置高度并使用调整大小回调，这很好地满足了我的需求。

于 2012-07-30T18:25:08.380 回答