ASP.NET 2

2012年10月5日星期五

19-4 使用 Prototype.js 來進行 AJAX 網頁設計

本網頁根據 IE 測試，如果你不是使用 IE，可能無法正確呈現唷！

目前在網路上最常被用到的 JavaScript framework，就是 prototype.js，可由下列網址下載：
http://prototype.conio.net 所謂的 framework，可以看成是原先 JavaScript 的應用程式介面（API，或是 Appliation Program Interface），可以根基於基本的 JavaScript 來提供更先進的功能。我們本小節所用的 prototype.js 版本是 1.5.1.1（2007/06/19 發行），所提供的擴充功能如下：

AJAX：提供對於 AJAX 的支援，簡化了使用方式及流程，也提高了 AJAX 在各種不同瀏覽器的相容性。

DOM：延伸了 DOM 的物件和功能。

JSON（JavaScript Object Notation）：支援 JSON 的資料格式，比 XML 易於瞭解與讀寫。

在前一小節我們已經說明了 AJAX 的基本使用方式及範例，本小節將說明如何使用 prototype.js 來進行 AJAX 的網頁設計。首先，我們直接看看一個簡單的範例：

Example（ajax/ajaxViaPrototype01.htm）：
這是一個查詢歌手的網頁，只要你在文字欄位輸入歌手名字，就可以使用 AJAX 的非同步傳輸方式，立即對資料庫 ajax/test.mdb 進行查詢，並將歌手資訊顯示在文字欄位下方。例如，當我們輸入「鄧麗君」並按下「送出」時，就會看到鄧麗君的資訊已經顯示在網頁下方：

Hint

這是一個比較老的資料庫，你也可以輸入其他歌手看看，例如周華健、巫啟賢、林憶蓮、莫文蔚、陶晶瑩等。

而這整個過程並沒有經由網頁的重載來達成。此範例的原始碼如下：
原始檔（ajax/ajaxViaPrototype01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</head>

<body>
<h2 align=center>AJAX Webpage Design Using Prototype.js</h2>
<hr>

<script src="prototype.js"></script>
<script>
// 顯示查詢結果
function showQueryResult(xmlHttpObj){
 Element.update('queryResult', xmlHttpObj.responseText);
}
// 送出對資料庫的查詢
function sendQuery() {
 var url = 'queryDb01.asp';    // 伺服器的程式網頁 
 var queryString = 'singerName=' + $F('singerName'); // 參數列
 var ajax = new Ajax.Request(url, {method:'post', parameters:queryString, onComplete:showQueryResult});
}
</script>

歌手大名：<input type="text" id="singerName" value="鄧麗君">
<input type="button" onClick="sendQuery()" value="送出">
<div id="queryResult"></div>

</body>
</html>
基本上，Prototype.js 只是將 XMLHttpRequest 「包起來」，基本的流程還是沒有變，以上一節所說的三個基本步驟來看，對應檔案及說明如下：
近端的發送函數：sendQuery()
此函數定義了遠端的程式碼網頁（此例為 queryDb01.asp），同時也加入了參數列（此例為 singerName=鄧麗君），最後產生 AJAX 物件並定義相關參數，送到遠端執行。其中有幾點要注意：

「$F('singerName')」是 Prototype.js 所提供的簡化語法，其功能全等於「document.getElementById('singerName').value」。同樣地，我們也可以使用「$('singerName')」來代表 id 為 singerName 的物件，其功能全等於「document.getElementById('singerName')」。

Hint

如果我們在 $() 之內輸入多個 id，此函數會回傳對應這些 id 的物件所成的陣列。

產生 AJAX 物件的第二個參數是「{method:'post', parameters:queryString, onComplete:showQueryResult}」，此參數全等於一個具有三個欄位的物件，因此我們甚至可以將 sendQuery() 函數的第三列敘述：改成下列程式碼：所得到的結果是一樣的。
遠端的程式碼：queryDb01.asp
此程式碼如下：
原始檔（ajax/queryDb01.asp）：（灰色區域按兩下即可拷貝）
<%@language=jscript%>
<%//AJAX remot program in charge of database query%>
<%
// 傳回查詢資料庫的第一筆資料
function getFirstRecordFromQueryResult(database, sql){
 var Conn = Server.CreateObject("ADODB.Connection");
 Conn.ConnectionString = "DBQ=" + Server.MapPath(database) + ";Driver={Microsoft Access Driver (*.mdb)};Driverld=25;FIL=MS Access;";
 Conn.Open();
 var RS = Conn.Execute(sql);
 var out="<p><b>Query Result of <u>"+sql+"</u>:</b><p>";
 if (RS.EOF)
  return(out+"No data found!");
 for (i=0; i<RS.Fields.Count; i++)
  out=out+"<font color=red>"+RS(i).Name+"</font>: <font color=blue>"+RS(i)+"</font><br>";
 RS.Close();
 Conn.Close();
 return(out);
}

database="test.mdb";  // 資料庫名稱
sql="SELECT * from Singer where ChineseName = '"+Request("singerName")+"'"; // 造出 SQL 指令
outStr=getFirstRecordFromQueryResult(database, sql);    // 回傳第一筆查詢結果
Response.write(outStr);  // 印出查詢結果
%>
其功能很簡單，即是接收使用者輸入的歌手名字，造出 SQL 命令，並送入資料庫查詢，並將查詢結果印出來。
近端的接收函數：showQueryResult()
在此函數中，我們只使用一列程式碼：這也是 Prototype.js 所提供的簡化語法，其功能全等於
另外還有一點要特別注意：由於資料庫和網頁編碼的不一致，常會導致亂碼的產生，因此我們這個範例的兩個檔案（ajaxViaPrototype01.htm 和queryDb01.asp），都是採用 UTF-8 的編碼，因此讀者在開啟這些檔案時，要注意你的文字編輯器是否有支援 UTF-8 編碼的檔案編輯功能。

Hint

一般常用的文字編輯器，例如記事本（notepad.exe）及 UltraEdit，都支援 UTF-8 文字檔的檢視和編輯。

事實上，上述的範例還可以更簡單，如果我們只是將查詢結果顯示在網頁上，可以改用另一個 Prototype.js 對於 AJAX 所提供的函數 Ajax.Updater()，使用範例如下：

Example（ajax/ajaxViaPrototype02.htm）：
此範例和前一個範例的功能完全相同，甚至連遠端的程式碼都是放在 queryDb01.asp，唯一不同的是，我們改用了 Ajax.Updater()，所以可以直接指定回傳資料所必須呈現的位置，範例原始碼如下：
原始檔（ajax/ajaxViaPrototype02.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head>

<body>
<h2 align=center>AJAX Webpage Design Using Updater() in Prototype.js</h2>
<hr>

<script src="prototype.js"></script>
<script>
// 送出對資料庫的查詢
function sendQuery() {
 var url = 'queryDb01.asp';    // 伺服器的程式網頁 
 var queryString = 'singerName=' + $F('singerName'); // 參數列
 var ajax = new Ajax.Updater('queryResult', url, {method:'post', parameters:queryString});
}
</script>

歌手大名：<input type="text" id="singerName" value="鄧麗君">
<input type="button" onClick="sendQuery()" value="送出">
<div id="queryResult"></div>

</body>
</html>
在上述原始碼中，Ajax.Updater() 的第一個參數是 'queryResult'，這就是代表回傳資料將會被指定到 document.getElementById('queryResult').innerHTML，因此我們就不必另外在寫一個負責顯示結果的函數，換句話說，和前一個範例比較，我們已經不需要 showQueryResult() 這個函數了，所以整個網頁原始碼看起來更加簡潔。
若要對 AJAX 流程進行進一步的控制，我們可以使用 Ajax.Responders.register 來註冊幾個函數，以便顯示 AJAX 的工作流程。例如，在查詢資料庫時，若時間過久，我們通常希望能夠在網頁顯示「資料處理中...」等字樣，以免讓使用者以為是遠端伺服器當機了。以下這個簡單的範例，就能達到此功能：

Example（ajax/ajaxViaPrototype03.htm）：
當我們點擊「送出」時，網頁會先顯示「資料處理中，請稍後...」等字樣，如下：

等查詢完畢後，所回傳的資料就會顯示在網頁上。此範例的原始碼如下：
原始檔（ajax/ajaxViaPrototype03.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head>

<body>
<h2 align=center>AJAX Webpage Design Using Responders.register in Prototype.js</h2>
<hr>

<script src="prototype.js"></script>
<script>
// 送出對資料庫的查詢
function sendQuery(){
 // 註冊 AJAX 某些事件所對應的函數
 Ajax.Responders.register ({
  onLoading:
   function(){
    Element.update('queryResult', '<font color=red>查詢資料中，請稍候...</font>');
   },
  onComplete:
   function(junk, xmlHttpObj){
    Element.update('queryResult', xmlHttpObj.responseText);
   }
  });
 var url = 'queryDb03.asp';    // 伺服器的程式網頁 
 var queryString = 'singerName=' + $F('singerName'); // 參數列
 var ajax = new Ajax.Request(url, {method:'post', parameters:queryString});
}
</script>

歌手大名：<input type="text" id="singerName" value="鄧麗君">
<input type="button" onClick="sendQuery()" value="送出">
<div id="queryResult"></div>

</body>
</html>
在此範例中，我們使用 Ajax.Responders.regiter() 來註冊了兩個函數，對應到 onLoading 事件的函數可以不斷印出「資料處理中，請稍後...」之訊息，而對應至 onComplete 事件的函數則可以顯示最後查詢結果。

19-3 基本 AJAX 原理與範例

本網頁根據 IE 測試，如果你不是使用 IE，可能無法正確呈現唷！

本小節將說明如何使用基本 AJAX 概念來達成非同步傳輸的功能。AJAX 的使用方式，主要包含三個基本步驟：

近端（用戶端）的發送函數：負責在接收主網頁的事件後，設定 AJAX 物件，並對伺服器發送 request 以啟動伺服器端程式碼的執行。

遠端（伺服器端）的程式碼：通常是一個 ASP 網頁，負責在伺服器執行必要之步驟，例如檢查帳號密碼，或是對資料庫進行查詢等。

近端（用戶端）的接收函數：負責接收伺服器的執行結果，並將結果以非同步的方式顯示在主網頁上。

無論 AJAX 的應用方式如何複雜，上述三個步驟是不會變化的基本要素。以下我們將使用一個簡單的範例來說明這三個基本步驟：

Example（ajax/asyncViaAjax01.htm）：
在上述範例中，當你點選「使用 AJAX 顯示伺服器的時間」後，就會看到伺服器的時間已經顯示在主網頁上，如下：

而這整個過程並沒有經由網頁的重載來達成。此範例的原始碼如下：
原始檔（ajax/asyncViaAjax01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用 AJAX 顯示伺服器的時間</h2>
<hr>

<script>
// 用戶端的接收函數，負責以非同步方式來接收伺服器回傳的資料並顯示在網頁上
function displayTime() {
 if (ajax.readyState==4)
  if (ajax.status==200)
   document.getElementById('showResult').innerHTML = ajax.responseText;
  else
   alert ("伺服器發生錯誤，無法回傳資料！");
}

// 用戶端的發送函數，負責設定 AJAX 物件並觸發伺服器網頁的執行
function getServerTime(url) {
 ajax = new ActiveXObject("Msxml2.XMLHTTP");
 ajax.onReadyStateChange=displayTime; // 設定接收伺服器資料的回應函數
 ajax.open("GET", url, true);  // 設定 ajax 物件的參數
 ajax.send("");    // 執行 ajax
}
</script>

<input type="button" value="使用 AJAX 顯示伺服器的時間" onClick="getServerTime('showTime.asp')">
<div id="showResult"></div>

</body>
</html>
對應於前述的三個基本步驟，我們可以列出相關的函數或網頁，如下：

近端的發送函數：getServerTime()。

遠端的程式碼：showTime.asp。

近端的接收函數：displayTime()。

以下將說明這幾個函數或網頁的流程。
近端的發送函數是 getServerTime()，主要負責當使用者點選按鈕後，產生 AJAX 物件並設定之，然後對伺服器發出 request，說明如下：

首先，我們使用來產生一個 AJAX 物件，利用此物件，我們可以達到非同步傳輸的功能。

Hint
但必須特別注意的是，產生 AJAX 物件的方式，在不同的瀏覽器（如 IE 及 FireFox）有不同的方法，甚至同樣是 IE 瀏覽器，不同的版本也有不同的方式來產生 AJAX 物件，本範例所使用的方式，適用於 IE 6.0 之後的版本。為了處理這些相容性的問題，我們建議直接採用 JavaScript Framework，例如 Prototype.js，有關這些細節，後在下一小節介紹。

產生 AJAX 物件之後，我們即可對此物件設定各種性質。首先，我們使用來設定接收伺服器回應的函數，在此範例中，此接收函數是 displayTime()。

其次，我們使用下列方式來設定 AJAX 物件的其它性質：其中 "GET" 代表資料傳遞的方式，url 代表伺服器程式碼所在的網頁（在此例為 showTime.asp），而 true 則代表使用非同步傳輸。（若是 false，代表使用同步傳輸。）

最後，我們使用來送出 AJAX 的命令，換句話說，此時會先啟動伺服器的程式碼（在此例為 showTime.asp），然後再啟動用戶端的接收函數（在此例為 displayTime()），將結果以非同步的方式顯示在目前網頁內。
遠端的程式碼位於 showTime.asp，以本例而言，其功能相當簡單，只是印出現在的時間，內容如下：
原始檔（ajax/showTime.asp）：（灰色區域按兩下即可拷貝）
<%@language=jscript%>
<%//負責讀取目前時間的 AJAX 遠端程式%>
<%
today=new Date();
time=today.toString();
Response.write("<font color=red>"+time+"</font>");
%>
近端的接收函數是 displayTime()，它的流程稍微複雜一些：

檢查伺服器程式碼是否執行完畢：readyState 代表 ajax 目前的狀態，列表如下：

readyState 的值說明

0 尚未啟始

1 已經建立連結

2 遠端已經收到要求

3 遠端程式碼處理中

4 處理完畢

此外，此函數也必須檢查伺服器回應函數是否執行無誤：也就是說，只有當網頁 showTime.asp 回傳的狀態碼是 200 時，才代表 showTime.asp 的執行無誤。

一切無誤後，我們才將 AJAX 回傳的文字資訊（存放於 ajax.responseText）指定給 id 為 showResult 的區塊內容：此時我們就可以在主網頁看到遠端的時間。

Hint
伺服器程式碼回傳的原始資訊，會原封不動地放到 responseText 此性質中。如果伺服器回傳的資訊是 XML 文件格式，我們可以由另一個性質 responseXML 來讀取 XML 文件內的各個物件。

readyState 的值	說明
0	尚未啟始
1	已經建立連結
2	遠端已經收到要求
3	遠端程式碼處理中
4	處理完畢

asp ajax 範例三

請輸入程式碼

ajax.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5"/>
<title>Ajax check</title>
<script src="jquery.js" type="text/javascript"></script> 
<script language="JavaScript">

checkRegAcc = function (){
 if ($('#text1').val().length >=4) {
  $.ajax( {
      url: 'check.asp',
      type: 'GET',
      data: {
        id: $('#text1').val()
      },
      error: function(xhr) {
        alert('Ajax request 發生錯誤');
      },
      success: function(response) {
          $('#msg').html(response);
          $('#msg').fadeIn();

      }
    } );
  }else{
   $('#msg').html('');
  }
  };
</script>

</head>

<body>
<form>
<input name="text1" id="text1" type="text" onblur="checkRegAcc()" />
<span id="msg"></span>
</form>
</body>

</html>

check.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>check</title>
</head>

<body>
<%
 set Conn = Server.CreateObject("ADODB.Connection")  
 Conn.ConnectionString = "driver={SQL Server};UID=user;Database=user;Server=.;PWD=sa;"
 Conn.Open()
 id=replace(trim(request("id")),"'","")   
 set rs=server.CreateObject("adodb.recordset")   
 rs.Open "Select * from table Where id='" & request("id") & "'" ,conn,1,1
 if not( rs.bof and rs.eof) then   
     ret = "<span style='color:green'>此工號可以使用</span>"  
 else   
     ret = "<span style='color:red'>此工號已經有人使用</span>"  
 end if
 RS.Close()
 Conn.Close()
 response.write(ret)
%>
</body>

</html>

asp ajax 範例二

AJAX會去抓取ASP response.write出來的訊息. 以血型為例：選擇任一血型,會秀出該血型特徵

JavaScript :

<script type="text/javascript">
function showBlood(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","getboold.asp?q="+str,true);
xmlhttp.send();
}
</script>

部分HTML :

<form action="">
血型 : <select name="BloodType" onchange="showBlood(this.value)">
<option value="">請選擇</option>
<option value="A">A型</option>
<option value="B">B型</option>
<option value="AB">AB型</option>
<option value="O">O型</option>
<option value="RH+">RH+型</option>
<option value="RH-">RH-型</option>
</select>
</form>
<br />
<div id="txtHint">BloodType info will be listed here...</div>

ASP程式碼 :

<%
response.CharSet ="utf-8"
session("dsn")="dsn=Northwind;uid=sa;pwd=SQLsys"

   set rs=server.CreateObject ("adodb.recordset")
   sqlstr="select Characteristic from dbo.BloodType where type='" & request("q") & "'"
   rs.Open sqlstr,session("dsn"),3,1,1
   if not rs.EOF then
      response.Write ("特徵：<BR/>" )
      response.Write (trim(rs("Characteristic")))
   end if
   rs.Close
%>

初始畫面：

點選O型畫面：

asp ajax

主程式:ajax.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

</style>
<title>AJAX試驗</title><table width="27%" border="1" cellpadding="0" cellspacing="0">
<tr>
    <td width="9%">ID <div id="loading1" class="loading2">載入中</div></td>
    <td width="91%"> <span class="boder" id="id"> </span></td>
</tr>
<tr>
    <td>Name</td>
    <td> <span class="boder" id="name"></span></td>
</tr>
   <tr>
    <td>Address</td>
    <td> <span class="boder" id="address"></span></td>
</tr>
</table>
<p><a href="javascript:makeRequest('get');">下一則 </a></p>
<p><a href="javascript:makeRequest('post');">指定第三筆Record</a></p>
</body>
</head>
</html>
<script type="text/javascript" language="javascript">
function makeRequest(x) {
    document.getElementById("loading1").style.display="block";
    var http_request = false;
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
      http_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
    }
    if (!http_request) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    // 定義事件處理函數為 alterContents()
    http_request.onreadystatechange = function() {
                                      alertContents(http_request);
//共有五個階段
//0 (尚未初始化;)
//1 (載入中; http_request 已經設定好了，但是還沒呼叫 send())
//2 (載入完成; http_request 已經送給 server 了，server 已經開始處理了，你可以取得 content header 了。)
//3 (可以互動的; http_request 已經部份完成了，所以有可能取得部份處理完的資料)
//4 (完成的; compelte)           };

    switch(x){
case 'get':
http_request.open('GET', "engine.asp", true);
http_request.send(null);
break;
case 'post':
http_request.open('POST', 'engine.asp', true);
//HTTP的方法可用POST或GET,目標網頁(不能跨domain),是否非同步(非同步的意思是代表在跟遠端取得資源的同時，browser 可以繼續執行 Javascript 的內容)因為大都設為true(非同步)
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//如果使用 POST 的方式，我們除了要設定 MIME 的類型
http_request.send('id=3');
//送參數，若有兩個以上參數可用http_request.send('id=3&aa=5');
//若要把變數當成參數可用http_request.send('id='+變數+'&aa='+變數); break;
}
}

對資料庫做查詢的程式:engine.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%'隨機選題目並輸出為XML%>

<%
Response.Expires=-1500
Response.CacheControl="no-cache"
'禁止快取
id=request("id")
set rs=server.CreateObject("ADODB.Recordset")
if id="" then
'若沒帶參數過來便亂數取一筆record
sql="select * from Employees ORDER BY NEWID()"
else
'取第三筆record
sql="select * from Employees where EmployeeID="&id
end if
rs.Open sql , conn , 3 , 1
Response.ContentType="text/xml"
'將文件編碼指定為XML格式，asp產生xml格式時必加
response.write "<?xml version="&chr(34)&"1.0"&chr(34)&" encoding="&chr(34)&"utf-8"&chr(34)&"?>"
response.write "<areas>"
response.write "<id>"&rs("EmployeeID")&"</id>"
response.write "<name>"&rs("FirstName")&"</name>"
response.write "<address>"&rs("Address")&"</address>"
response.write "</areas>"
rs.close
%>

2012年4月11日星期三

VB中使MsFlexGrid和MSHFlexGrid控件支持鼠标滚动操作

將這一段程式放到公共的模組中

Public Declare Function PeekMessage Lib "user32" Alias "PeekMessageA" (lpMsg As Msg, ByVal hWnd As Long, ByVal wMsgFilterMin As Long, ByVal wMsgFilterMax As Long, ByVal wRemoveMsg As Long) As Long

Public Declare Function WaitMessage Lib "user32" () As Long
Public bCancel As Boolean
Public Const WM_MOUSEWHEEL = 522

Public Sub ProcessMessages(sGrid1 As MSFlexGrid)
Dim Message As Msg
Do While Not bCancel
'WaitMessage ‘等待消息
If PeekMessage(Message, sGrid1.hWnd, WM_MOUSEWHEEL, WM_MOUSEWHEEL, PM_REMOVE) Then
If Message.wParam < 0 Then ' 向上
'Me.Top = Me.Top + 240
If sGrid1.TopRow < sGrid1.Rows Then
sGrid1.TopRow = sGrid1.TopRow + 1
End If
Else '向下??
If sGrid1.TopRow > 1 Then
sGrid1.TopRow = sGrid1.TopRow - 1
End If
End If
End If
DoEvents
Loop
End Sub

然後在每一支程式的From_load() 加入此段

'加入此段即可使用滑鼠滾輪的功能了
Me.AutoRedraw = True
Call ProcessMessages(Grid1)

ADO 填入 MSFlexGrid

Title	Use ADO to load data into a FlexGrid control
Keywords	ADO, database, FlexGrid
Categories	Database

Open the database and execute the query. Loop through the recordset's Fields array to get the field names and use them as column headers. For each record in the Recordset, loop through the fields saving their values in the FlexGrid.
Keep track of the largest text width in each column and make each column big enough to display the text.

Private Sub Form_Load()
Dim db_file As String
Dim statement As String
Dim conn As ADODB.Connection
Dim rs As ADODB.Recordset
Dim c As Integer
Dim r As Integer
Dim col_wid() As Single
Dim field_wid As Single

    ' Get the data.
    db_file = App.Path
    If Right$(db_file, 1) <> "\" Then db_file = db_file & _
        "\"
    db_file = db_file & "books.mdb"

    ' Open a connection.
    Set conn = New ADODB.Connection
    conn.ConnectionString = _
        "Provider=Microsoft.Jet.OLEDB.4.0;" & _
        "Data Source=" & db_file & ";" & _
        "Persist Security Info=False"
    conn.Open

    ' Select the data.
    statement = "SELECT * FROM Books ORDER BY Title"

    ' Get the records.
    Set rs = conn.Execute(statement, , adCmdText)

    ' Use one fixed row and no fixed columns.
    MSFlexGrid1.Rows = 2
    MSFlexGrid1.FixedRows = 1
    MSFlexGrid1.FixedCols = 0

    ' Display column headers.
    MSFlexGrid1.Rows = 1
    MSFlexGrid1.Cols = rs.Fields.Count
    ReDim col_wid(0 To rs.Fields.Count - 1)
    For c = 0 To rs.Fields.Count - 1
        MSFlexGrid1.TextMatrix(0, c) = rs.Fields(c).Name
        col_wid(c) = TextWidth(rs.Fields(c).Name)
    Next c

    ' Display the values for each row.
    r = 1
    Do While Not rs.EOF
        MSFlexGrid1.Rows = MSFlexGrid1.Rows + 1

        '將資料RS 中的資料取出來 填入 MSFlexGrid 
        For c = 0 To rs.Fields.Count - 1
            MSFlexGrid1.TextMatrix(r, c) = rs.Fields(c).Value

            ' See how big the value is.

            ' 判斷行中 最長的字串 當成最大欄寬
            field_wid = TextWidth(rs.Fields(c).Value)
            If col_wid(c) < field_wid Then col_wid(c) = _
                field_wid
        Next c

        rs.MoveNext
        r = r + 1
    Loop

    ' Close the recordset and connection.
    rs.Close
    conn.Close

    ' Set the column widths.
    For c = 0 To MSFlexGrid1.Cols - 1
        MSFlexGrid1.ColWidth(c) = col_wid(c) + 240
    Next c
End Sub

訂閱：文章 (Atom)

2012年10月5日 星期五

19-4 使用 Prototype.js 來進行 AJAX 網頁設計

本網頁根據 IE 測試，如果你不是使用 IE，可能無法正確呈現唷！

19-3 基本 AJAX 原理與範例

本網頁根據 IE 測試，如果你不是使用 IE，可能無法正確呈現唷！

2012年4月11日 星期三

2012年10月5日星期五

2012年4月11日星期三