0

ADODBを介してMSAccessからデータを入力しようとしている非常に単純なslickGridの例があります。テーブルを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 に答える