风之石的Web ListView (DataGrid)

做了几个B/S结构的东东，一直在寻找一个功能类似常规软件里边的ListView或DataGrid的东东。
刚开始是用DIV和TABLE结合JS，CS来实现的，基本功能都已实现，不过就是效率太低。

最近见到一篇关于ActiveX控件讲ListView的帖子，一下子让我的思想变的开阔了，于是我这个类似
于常规软件里的Web ListView (DataGrid)原型就出来了。

代码如下：
<% Response.buffer = true
   on error resume next
   err.number=0

   dsn = "Driver=SQL Server;Server=localhost;UID=sa;PWD=123456789;Database=Northwind"
   Set conn = Server.CreateObject("Adodb.Connection")
   conn.Open dsn

   'sql ="select * from products order by productid asc"
   sql = "select * from shippers"
   Set rs = Server.CreateObject("Adodb.Recordset")
   rs.open sql,conn,1,1

   If err.number<>0 then
      ed = err.description
      ed = replace(ed,"'","")
      ed = replace(ed,"[","")
      ed = replace(ed,"]","")
      ed = replace(ed,"(","")
      ed = replace(ed,")","")
      ed = replace(ed,chr(10),"")
      ed = replace(ed,chr(13),"") %>

      <script language="javascript">
       alert('错误：<%=err.number%>/n源：<%=err.source%>/n描述：<%=ed%>');
      </script>

<% '获得数据源
   err.Clear
   response.end
   end if

   fc = rs.fields.count-1
   dim colname,colvalue2,colvalue
   for i = 0 to fc
       colname = colname & "<td>" & rs.fields(i).name & "</td>" & chr(13)
       colvalue2 = colvalue2 & "<td>&nbsp;&nbsp;</td>" & chr(13)
   next
   colname = "<tr id='TableHead'>" & chr(13) & colname & "<td>key</td></tr>" & chr(13)
   colvalue2 = "<tr>" & chr(13) & colvalue2 & "<td>0</td></tr>" & chr(13)

   If Not rs.eof then

      rs.pagesize=50 '定义分页
      dim page
      page=1
      If request("rqpage")<>"" then
         page=request("rqpage")
         If IsNumeric(page) then
            page=cint(page)
            If page<1 then
               page=1
            end if
            If page>rs.pagecount then
               page=rs.pagecount
            end if
         else
            page=1
         end if
      end if
      rs.absolutepage=page

      pagecount=rs.pagecount
      rc = rs.recordcount-1

      dim n
      n=0
      do while not rs.eof and n<=rs.pagesize-1
      cv = "<tr id='rmKey"&n&"'>"
   for m = 0 to fc
                cv = cv & "<td>"
                if isNull(rs.fields(m)) then
   cv = cv & "&nbsp;"
  else
   cv = cv & rs.fields(m)
  end if
                cv = cv & "</td>" & chr(13)
   next
      cv = cv + "<td>"&n&"</td></tr>" & chr(13)
      cv = cv + "<DIV ID=""rmoctKey"&n&""" STYLE=""display:none"">" & chr(13) '定义右键菜单内容
      cv = cv + "<DIV STYLE=""position:relative; top:0; left:0; border:1px solid #424142;  border-top:1px solid #cccccc; border-left:1px solid #cccccc; background:#424142; height:20px; width:160px"" onContextMenu=""return false"">" & chr(13)
      cv = cv + "<DIV STYLE=""position:relative; top:0; left:0; background:#FFFBF7; border-right:1px solid #848284; border-top: 1px solid white; border-left:1px solid white; border-bottom:1px solid #eeeeee; height:20px; color:black; font-family:verdana; padding:2px; padding-left:10px; font-size:8pt; cursor:hand"" οnmοuseοver=""this.style.background='#B5BACE'"" οnmοuseοut=""this.style.background='#FFFBF7'"" οnclick=""parent.location.reload();parent.rmopo.hide();"" onContextMenu=""return false"">" & chr(13)
      cv = cv + "&nbsp;&nbsp;添加记录</DIV>" & chr(13)
      cv = cv + "<DIV STYLE=""position:relative; top:0; left:0; background:#FFFBF7; border-right:1px solid #848284; border-top: 1px solid white; border-left:1px solid white; border-bottom:1px solid #eeeeee; height:20px; color:black; font-family:verdana; padding:2px; padding-left:10px; font-size:8pt; cursor:hand"" οnmοuseοver=""this.style.background='#B5BACE'"" οnmοuseοut=""this.style.background='#FFFBF7'"" οnclick=""parent.location.reload();parent.rmopo.hide();"" onContextMenu=""return false"">" & chr(13)
      cv = cv + "&nbsp;&nbsp;修改记录</DIV>" & chr(13)
      cv = cv + "<DIV STYLE=""position:relative; top:0; left:0; background:#FFFBF7; border-right:1px solid #848284; border-top: 1px solid white; border-left:1px solid white; border-bottom:1px solid #eeeeee; height:20px; color:black; font-family:verdana; padding:2px; padding-left:10px; font-size:8pt; cursor:hand"" οnmοuseοver=""this.style.background='#B5BACE'"" οnmοuseοut=""this.style.background='#FFFBF7'"" οnclick=""parent.location.reload();parent.rmopo.hide();"" onContextMenu=""return false"">" & chr(13)
      cv = cv + "&nbsp;&nbsp;删除记录</DIV>" & chr(13)
      cv = cv + "<DIV STYLE=""position:relative; top:0; left:0; background:#FFFBF7; border-right:1px solid #848284; border-top: 1px solid white; border-left:1px solid white; border-bottom:1px solid #848284; height:20px; color:black; font-family:verdana; padding:2px; padding-left:10px; font-size:8pt; cursor:hand"" οnmοuseοver=""this.style.background='#B5BACE'"" οnmοuseοut=""this.style.background='#FFFBF7'"" οnclick=""parent.location.reload();parent.rmopo.hide();"" onContextMenu=""return false"">" & chr(13)
      cv = cv + "&nbsp;&nbsp;刷新记录</DIV>" & chr(13)
      cv = cv + "</DIV>" & chr(13)
      rs.MoveNext
      colvalue = colvalue & cv
      n = n + 1
      loop
   else
      colvalue = colvalue2
   end if
   rs.close
   Set rs = Nothing 
   conn.close
   Set conn = Nothing %>

<html>
<head>
<title>DATAGRID</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Author" content="DuHuan;dh20156@126.com;V-EC Net Community;www.v-ec.com">
<style>
body     { font-size: 10px; border:none; }
table    { font-size: 12px }
</style>
</head>
<body scroll = "no" bgcolor = "buttonface" topmargin="0" leftmargin="0">

<table border='0' cellpadding='0' cellspacing='0' style='border-collapse: collapse' width='100%' height='100%'>
<tr>
  <td valign="top" nowrap>

    <!--加载ListView控件-->
    <object classid="clsid:BDD1F04B-858B-11D1-B16A-00C0F0283628" style="width:expression(document.body.clientWidth); height:expression(document.body.clientHeight-30);" id="DataList"></object>

    <!--定义翻页、查找工具栏-->
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <form name="vp" method="get">
   <td height="30" valign="middle">
     <input type="button" name="fp" value="9" style="font-size:12px;width:50px;font-family:webdings;height:25px;" align="absmiddle" title="Go to the first page" οnclick="window.location='?rqpage=1'">
     <input type="button" name="pp" value="3" style="font-size:12px;width:50px;font-family:webdings;height:25px;" align="absmiddle" title="Go to the previous page" οnclick="window.location='?rqpage=<%=page-1%>'">
     <input type="button" name="np" value="4" style="font-size:12px;width:50px;font-family:webdings;height:25px;" align="absmiddle" title="Go to the next page" οnclick="window.location='?rqpage=<%=page+1%>'">
     <input type="button" name="lp" value=":" style="font-size:12px;width:50px;font-family:webdings;height:25px;" align="absmiddle" title="Go to the last page" οnclick="window.location='?rqpage=<%=pagecount%>'">
     <select name="rqpage" οnchange="document.all.vp.submit();" style="font-size:12px;width:50px;font-family:arial;" align="absmiddle">
     <% for ip= 1 to pagecount %>
       <option value="<%=ip%>"<%If ip=page then %> selected<%end if%>><%=ip%></option>
     <% next %>
     </select>
     <input type="text" value="Search:" style="font-size:12px;width:50px;font-family:arial;height:24px;border:1px solid #D4D0C8;background:transparent;cursor:default;" readonly><input type="text" name="keyword" value="" style="font-size:12px;width:100px;font-family:arial;height:24px;border:1px solid #D4D0C8;" align="absmiddle" onkeyPress="if(event.keyCode==13){findstr(this.value,<%=fc%>);return false;}">
     <input type="button" name="search" value="8" style="font-size:12px;width:50px;font-family:webdings;height:25px;" align="absmiddle" title="Search for the keyword from the records" οnclick="findstr(document.all.vp.keyword.value,<%=fc%>)">
   </td>
        </form>
      </tr>
    </table>
  </td>
</tr>
</table>

<script language="VBScript">
Sub findstr(str,colcount) '定义查找函数
Dim f
f = 0
For i = 1 to DataList.ListItems.Count
    If instr(UCase(DataList.ListItems(i).text),UCase(str))>0 then
       f = f + 1
       Document.all.DataList.ListItems(i).EnsureVisible
       Document.all.DataList.ListItems(i).Selected = True
       fda = MsgBox("Do you want to find next?",36,"DataGrid Search")
       If fda = vbYes then
          For j = 1 to colcount
       If instr(UCase(DataList.ListItems(i).subitems(j)),UCase(str))>0 then
                 f = f + 1
                 Document.all.DataList.ListItems(i).EnsureVisible
                 Document.all.DataList.ListItems(i).Selected = True
                 fdb = MsgBox("Do you want to find next?",36,"DataGrid Search")
                 If fdb = vbNo then
                    Document.all.DataList.focus
      Exit Sub
          End if
              End if
          Next
       Else
          Document.all.DataList.focus
          Exit Sub
       End if
    Else
       For k = 1 to colcount
    If instr(UCase(DataList.ListItems(i).subitems(k)),UCase(str))>0 then
              f = f + 1
              Document.all.DataList.ListItems(i).EnsureVisible
              Document.all.DataList.ListItems(i).Selected = True
              fdc = MsgBox("Do you want to find next?",36,"DataGrid Search")
              If fdc = vbNo then
                 Document.all.DataList.focus
   Exit Sub
       End if
           End if
       Next
       If i = DataList.ListItems.Count then
          MsgBox "No match found",vbinformation,"DataGrid Search"
   Document.all.DataList.focus
          Exit Sub
       End if
    End if
Next
If f = 0 then
   MsgBox "No match found",vbinformation,"DataGrid Search"
End If
End Sub
</script>

<table border="1" id="DataTable" style="display:none">
  <%=colname%>
  <%=colvalue%>
</table>

<script language="javascript">
var rmopo = window.createPopup(); //定义右键菜单
function rm(i,oct,h)
{  
    var i2=eval(i);
    var oct=eval(oct);
    var h=eval(h);
    var lefter = event.x;
    var topper = event.y;
    rmopo.document.body.innerHTML = oct.innerHTML;
    rmopo.show(lefter, topper, 160, h, i2);
}
</script>
<script language = "javascript">
function InitList(theList, theTable, iEnd, iId, checkIt){ //初始listview
 var colWidth = (document.body.clientWidth-5) / iEnd
 with(theList){
  View = 3
  BorderStyle = 0
  GridLines = true
  Checkboxes = checkIt
  FullRowSelect = true
  HideSelection = false
  LabelEdit = 1
  Enabled = true
  FlatScrollBar = false
  HotTracking = false
  MultiSelect = false
  BackColor = "&HFFFFFF"
  ForeColor = "&H000000"
  //绑定数据源
  for(var i = 0; i < iEnd; i ++){
   ColumnHeaders.Add(i + 1, 'Col' + i, theTable.rows[0].cells[i].innerHTML, colWidth) //, 100, myAlign)
  }
  for(var i = 1; i < theTable.rows.length; i ++){
   DataList.ListItems.Add( i, 'Key' + theTable.rows[i].cells[iId -1].innerHTML, theTable.rows[i].cells[0].innerHTML)
   for(var j = 1; j < iEnd; j ++){
    ListItems(i).SubItems(j) = theTable.rows[i].cells[j].innerHTML
   }
  }
  Sorted = false
 }
}
</script>
<script language = "javascript" for = "DataList" event = "ColumnClick(ColumnHeader)">
 if(ColumnHeader.SubItemIndex == DataList.SortKey){//定义表头点击事件
  if(DataList.SortOrder == 0){
   DataList.SortOrder = 1
  }
  else{
   DataList.SortOrder = 0
  }
 }
 else{
  DataList.SortKey = ColumnHeader.SubItemIndex
  if(DataList.SortOrder == 0){
   DataList.SortOrder = 1
  }
  else{
   DataList.SortOrder == 0
  }
 }
</script>
<script language = "javascript" for = "DataList" event = "oncontextmenu">
 //定义鼠标右键事件
 theValue = DataList.SelectedItem.Key
 rm('rm'+theValue,'rmoct'+theValue,'86');
</script>

<script language="javascript">
InitList(DataList,DataTable,<%=fc+1%>,<%=fc+2%>,false);//初始化ListView
DataList.width = document.body.clientWidth;
DataList.height = document.body.clientHeight;
</script>
</body>
</html>

大家有兴趣的话可以C&P以上代码去看看实际效果。

效果如下：

关于ListView控件更多请参见：
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cmctl198/html/vbobjlistview.asp

我会继续把它完善，大家有什么好的意见和建议请给我留言，谢谢！