jsp结合ajax开发grid，免费原创控件

我喜欢DELHI，尤其喜欢DELPHI中的DBGRID,但是在网页上做出这样的DBGRID实在困难。
我查了很多资料，买了很多书，一旦涉及这方面的内容，大家都轻描淡写，一笔带过。
最近因为有个WEB的项目，我就用AJAX和JSP开发了一个这样的网上GRID，我起名字：annygrid
目前后台数据库采用的是sql server

下面把代码帖出来，希望对大家有所帮助

《
如要转贴请声明出处
http://blog.csdn.net/szliszt/archive/2007/07/13/1687905.aspx
效果图
http://www.lhsoft.com.cn/service/annygrid.jpg
》


//-----------------------------------------------------------------
//javascipt 文件 dbgrid.js
//-----------------------------------------------------------------

// JavaScript Document
//本文用到了一些ajax技术
var path=self.parent.location.href;
path=path.substring(path.indexOf("=")+1,path.length);
//path=path.substring()
//alert(tbname);
//var tbname=path;
//"bd_itemgroup";
//<%=tbname%>;
//alert(path);
//alert(tbname);
//self.document.title
//alert(window.document.form1.textfield.value);
//alert(window.status);

//.document.form1.textfield.value
//alert(window.opener.document.all.textfield.innerText);
//alert(parent.document.form1.textfield.value);
//self.opener.document.forms.length


function dbclick(){

var sel=event.srcElement.name;
document.getElementById(sel).readOnly =false;
//document.getElementById(sel).value="abcd";
//alert(document.getElementById(sel).name);
//readonly="true"
}
///

function savedata(){

//alert("saved ok!");
var sel=event.srcElement.name;
var newv=sel+"|"+document.getElementById(sel).value;
//alert(newv);


var xmlhttp;
try{
    xmlhttp=new ActiveXObject('Msxml2.XMLHTTP');
} catch(e){
                try{
                        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
                    } catch(e){
                                    try{
                                            xmlhttp=new XMLHttpRequest();
                                        }catch(e){}
                            }
            }
           
var rrr="";           
xmlhttp.open("get","../comm/savedata.jsp?s="+newv,true);
xmlhttp.onreadystatechange=function(){

        if (xmlhttp.readyState==4)
        //404 代表 没有发现该文件
        if (xmlhttp.status==200)
        {
            rrr=xmlhttp.responseText;   
            //得到插入行的IID值
            //var sel=event.srcElement.name;
            var iidcontrol=sel.substring(0,sel.indexOf("."))+".iid"+sel.substring(sel.lastIndexOf("."),sel.length);
            //alert(iidcontrol);
            //if (iidcontrol!=null)
            //document.getElementById(iidcontrol).value=rrr;

            //table1.rows[i].cells[1].innerHTML;
           
            //alert(rrr);
            //
            /*if (rrr="ok"){
                    alert("ok");                   
                } else
                {
                    alert("error");
                }
                */

        } else
        {
            //alert("发生错误："+xmlhttp.status);
        }
}

xmlhttp.send(null);

}

function insertRows(){
//guid();

//alert(table1.rows.length);

var xmlhttp;
try{
    xmlhttp=new ActiveXObject('Msxml2.XMLHTTP');
} catch(e){
                try{
                        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
                    } catch(e){
                                    try{
                                            xmlhttp=new XMLHttpRequest();
                                        }catch(e){}
                            }
            }
           
var rrr="";           
var rd="1"+parseInt(Math.random()*1000);
//alert("../comm/guid.jsp?temp="+rd);
//通过JSP来计算出一个新的CUID值
xmlhttp.open("get","../comm/guid.jsp?temp="+rd,true);
xmlhttp.onreadystatechange=function(){

        if (xmlhttp.readyState==4)
        //404 代表 没有发现该文件
        if (xmlhttp.status==200)
        {
            rrr=xmlhttp.responseText;   
            //
            if (rrr>""){
                    var cuid="";   
                    cuid = rrr;
                   
                    var tempRow=0;
                    var maxRows=0;                   
                    //计算当前表格有几行
                    tempRow=table1.rows.length-1;
                    maxRows=tempRow;
                    tempRow=tempRow+1;
                    var Rows=table1.rows;//类似数组的Rows
                    //table1.rows.length
                    var newRow=table1.insertRow(-1);//插入新的一行
                    var Cells=newRow.cells;//类似数组的Cells
                    var cl=document.form1.columnlist.value;
                    var cll=cl.split(",");
                   
                    //设置整行的颜色属性
                    //newRow.setAttribute('bgColor',"#cccccc");
                   
                    // bgcolor=
                    //document.form1.cuid.value=cuid;
                    //System.out.println("新增cuid="+cuid);
                    //alert("新增cuid="+cuid);
                    //alert(cuid);
                    //此版本只能在windows上运行
                    //var   x  =   new   ActiveXObject("Scriptlet.TypeLib"); 
                    //var cuid = x.GUID; 

                    //插入行号
                    var newCell0=Rows(newRow.rowIndex).insertCell(Cells.length);
                    newCell0.align="left";                   
                    newCell0.innerHTML=maxRows;
                    //只设置首列的颜色属性
                    newRow.childNodes[0].bgColor="#cccccc";
                   
                    //每行的几列数据
                    for (i=0;i<cll.length;i++)
                    {
                        var newCell=Rows(newRow.rowIndex).insertCell(Cells.length);
                        newCell.align="center";
                        //cb2e40b4-1ab3-4bbe-8e05-9106bc65f39f
                        //newCell.innerHTML="<td><input name='detailObject.seq' id='_Seq' type='text' size='2' maxlength='2' value='"+tempRow+"'></td>";
                        //tbname ="bd_item";
                        // replace(/(^/s*)|(/s*$)/g, ""); 相当于 .trim;
                        var cellname=tbname+"."+cll[i].replace(/(^/s*)|(/s*$)/g,"")+"."+cuid.replace(/(^/s*)|(/s*$)/g,"");
                        //alert("cellname="+cellname);
                        var datavalue="";
                        // readOnly="+"'"+"false"+"'"+"
                        newCell.innerHTML="<td nowrap  scope='row'  bgcolor="+"'"+"#98BD86"+"'"+"><input type="+"'"+"text"+"'"+" name="+"/'"+cellname+"/'"+"  id="+"'"+cellname+"'"+"  value="+"'"+datavalue+"'"+"   onDblClick="+"'"+"dbclick()"+"'"+" onChange="+"'"+"savedata()"+"'"+" ></td>";
                       
                    }
                   
                    var newCell00=Rows(newRow.rowIndex).insertCell(Cells.length);
                    newCell00.align="center";
                    newCell00.innerHTML=
                    "<td><input type='button' value='删除' οnclick='delTableRow()'></td>";
                    //"+"'"+tbname+"."+cuid+"'"+"
                    //"<td οnclick="+"'"+"deleteRow('table1',this.parentElement.rowIndex)"+"'"+">删除本行</td>";
                    //"<td valign='top'><a href='javascript:delTableRow(/""+tempRow+"/")'>删除</a></TD>";
                    maxRows+=1;
                    //alert(table1.rows.length);
                }

        } else
        {
            //alert("发生错误："+xmlhttp.status);
        }
}

xmlhttp.send(null);

}

//<td οnclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
//<td>第2行</td><td οnclick="deleteRow('mxh',)">删除本行</td>
//table1.deleteRow(this.parentElement.rowIndex);
function delTableRow(){
//alert(s);
//要找到根数据库关联的关键字和值，就可以跟着删除数据了。当然还是必须用JSP来删除的，因为此处的JAVASCRIPT代码是可以被看到的。
var i=event.srcElement.parentNode.parentNode.rowIndex;
//table1.rows(i).values
//alert(i);
//alert(table1.rows[i].cells[1].innerHTML);
var cuid=table1.rows[i].cells[1].innerHTML;
//alert("要删除的precuid="+cuid);
cuid=cuid.substring(cuid.indexOf("="),cuid.lenth);
cuid=cuid.substring(1,cuid.indexOf(" "));
cuid=cuid.substring(cuid.lastIndexOf(".")+1,cuid.length);
//alert(tbname+"."+cuid);
//if (table1.rows.length >i){
//        table1.deleteRow(i);
//    }       

//alert("要删除的cuid="+cuid);

var xmlhttp;
try{
    xmlhttp=new ActiveXObject('Msxml2.XMLHTTP');
} catch(e){
                try{
                        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
                    } catch(e){
                                    try{
                                            xmlhttp=new XMLHttpRequest();
                                        }catch(e){}
                            }
            }
           
var rrr="";           
//tbname+"."+cuid
//传参数给一个JSP文件来删除数据，知道是哪个表，知道是哪一行了，还不好删除吗？
xmlhttp.open("get","../comm/deldata.jsp?s="+tbname+"."+cuid,true);
xmlhttp.onreadystatechange=function(){

        if (xmlhttp.readyState==4)
        //404 代表 没有发现该文件
        if (xmlhttp.status==200)
        {
            rrr=xmlhttp.responseText;   
            //alert(rrr);
            if (table1.rows.length >i){
                table1.deleteRow(i);
            }       
   
            //
            /*
            if (rrr=="ok"){
                    alert("ok");   
                    //if (table1.rows.length >i){
                    //    table1.deleteRow(i);
                    //}               
                } else
                {
                    alert("error");
                }
                */
               

        } else
        {
            //alert("发生错误："+xmlhttp.status);
        }
}

xmlhttp.send(null);

}


///表格初始化，暂不启用

//--------------------------------------------------------------------------------------------------
//使用这个js文件的 annygrid.jsp
//-----------------------------------------------------------------------------------------------------
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>数据表格</title>
<%
String tbname=request.getParameter("tbname");
//"bd_bank";
out.write("<SCRIPT language="+"'"+"JavaScript"+"'"+">var tbname="+"'"+tbname+"'"+";</SCRIPT>");
%>

<script language="JavaScript" src="../comm/dbgrid.js"></script>
<jsp:useBean id="bb" scope="page" class="lh.LHDBconnection"/>
</head>
<body>




<form name="form1" method="post" action="">
  <p>&nbsp;</p>
  <p>&nbsp;  </p>
  <table align="center" border="0">
    <tr>
      <td><table  width="115" border="0">
        <tr>
          <td width="105"><input name="Submit2" type="button" id="Submit25"  onClick="insertRows()" value="增加行">            </td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td><input name="columnlist" type="hidden" id="columnlist2" value="">      </td>
    </tr>
    <tr>
      <td>
      <%


     
String WriteString="";
ResultSet sqlrst=bb.executeQuery1("select count(*) cnt from  "+tbname+"    ");
String cnt="0";
if (sqlrst.next())
{
    cnt=sqlrst.getString(1) ;
}
sqlrst.close();

///
//

WriteString="<form name="+"'"+"form2"+"'"+" method="+"'"+"post"+"'"+" action="+""+">"
//+"<table width=400 height=40 border=0  align=center cellPadding=0 borderColor=#808000"+"style=BORDER-COLLAPSE: collapse"+"  id="+"'"+"table1"+"'"+" >";
+"<table border=1 cellspacing=0  width=100% bordercolorlight=#333333 bordercolordark=#efefef id="+"'"+"table1"+"'"+" >";
WriteString=WriteString+"<tr bgcolor=#cccccc>";
String ssql="select top 100 percent  *  from   "+tbname+"    ";
ResultSet sqlrst1=bb.executeQuery1("select *  from  "+tbname+"    ");
int col=0;
String cllist="";
//画标题
try{
ResultSetMetaData data=sqlrst1.getMetaData();
col=data.getColumnCount();
// bgcolor='"+"#98BD86"+"'
WriteString=WriteString+"<th class="+"'"+"style_table"+"'"+"  nowrap  scope='"+"row"+"'  >行号</th>";                   
    for (int j=1;j<=col;j++)
        {
        if (j<=col){
                    String s=data.getColumnName(j);
                    if (s.equals("iid")||s.equals("cuid")||s.equals("tref")) {    }
                    else
                    {
                            // bgcolor='"+"#98BD86"+"'
                            WriteString=WriteString+"<th class="+"'"+"style_table"+"'"+"  nowrap  scope='"+"row"+"'  >";                   
                            ResultSet sqlrstcol=bb.executeQuery("select isnull((select top 1 strs from languages where     strcode="+"'"+data.getColumnName(j)+"'"+"),"+"'"+data.getColumnName(j)+"'"+" ) strs ");
                           
                            //本来就只有一行记录
                            if (sqlrstcol.first()){
                                WriteString=WriteString+sqlrstcol.getString(1);   
                            }
                            WriteString=WriteString+"</th>";       
                            cllist=cllist+","+s;
                            //WriteString=WriteString+"|";           
                    }
                }
        }
        // bgcolor='"+"#98BD86"+"'
        WriteString=WriteString+"<th class="+"'"+"style_table"+"'"+"  nowrap  scope='"+"row"+"'  >操作</th>";                   

        cllist=cllist.substring(1,cllist.length());
        out.println("<script language="+"'"+"javascript"+"'"+">document.form1.columnlist.value="+"'"+cllist+"'"+";</script>");
       
    String ss="";
    ResultSet sqlrst2=bb.executeQuery1("select  *  from  "+tbname+"    ");
    System.out.println("select  *  from  "+tbname+"    ");
    String id="";
    String personcode="";
    String personname="";
    String dept="";
    sqlrst2.beforeFirst();
    WriteString=WriteString+"</tr><tr bgcolor=#cccccc>";
    //WriteString=WriteString+"<hr>";
    int rownum=1;
    while (sqlrst2.next()){
            System.out.println("第"+Integer.toString(rownum)+"行");
           
            String cuid="";
            //sqlrst2.getString(2);
            //WriteString=WriteString+"<td>"++"<td>";
            WriteString=WriteString+"<td>"+Integer.toString(rownum)+"</td>";
           
            for (int j=1;j<=col;j++)           
            {
                String cldsca=data.getColumnName(j);
                if (cldsca.equals("iid")||cldsca.equals("tref")) {    }
                else if (cldsca.equals("cuid")){    cuid=sqlrst2.getString("cuid");    }
                        else
                        //if (cuid!=null)
                        {
                            String cellname=tbname+"."+cldsca+"."+cuid;
                            //System.out.println(cellname);
                            String datavalue="";
                            try{
                                 datavalue=sqlrst2.getString(j);
                            } catch(SQLException e)
                            {
                                System.out.println("found error="+e.getMessage());
                                //+e.message
                            }
                            //System.out.println(sqlrst2.getString(j));
                            if (datavalue==null){datavalue="";}
                            //System.out.println(datavalue);
                            //WriteString=WriteString+"<tr >";
                           
                            WriteString=WriteString+"<td nowrap  scope='"+"row"+"'  bgcolor='"+"#98BD86"+"'>";
                            WriteString=WriteString+"<input type="+"'"+"text"+"'"+" name="+"'"+cellname+"'"+"  id="+"'"+cellname+"'"+"  value="+"'"+datavalue+"'"+"  readonly="+"'"+"true"+"'"+" onDblClick="+"'"+"dbclick()"+"'"+" onChange="+"'"+"savedata()"+"'"+" >";
                            WriteString=WriteString+"</td>";

                           
                            //WriteString=WriteString+"</tr>";
                        }
            }
           
            WriteString=WriteString+"<td><input type='button' value='删除'οnclick='delTableRow()'></td>"+"</tr><tr bgcolor=#cccccc>";
            //"+"'"+tbname+"."+cuid+"'"+"
            //WriteString=WriteString+"<br>";
           
           
            rownum++;
    }
       
} catch(SQLException e)       
{
}
WriteString=WriteString+"</tr>";
//WriteString=WriteString+"<hr>";
WriteString=WriteString+"</table></form>";
WriteString=WriteString+"总记录数为："+cnt;
out.write(WriteString);


%> 
     
      </td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <p>&nbsp;
  </p>
  <p>


</p>
</form>
</body>
</html>

//----------------------------------------------------
//deldata.jsp 删除行的代码
//---------------------------------------------------
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*,java.util.*" errorPage="" %>
<jsp:useBean id="bb" scope="page" class="lh.LHDBconnection"/>
 
<%


String fs=request.getParameter("s");

String[] a=fs.split("//.");
//System.out.println(a[1]);
String tbnm=a[0].trim();
String pkvl=a[1].trim();

String ssql="delete  "+tbnm+" where cuid="+"'"+pkvl+"'"+" select @@rowcount cnt ";

String r="";   
System.out.println("要执行的SQL:"+ssql);
try{
ResultSet sqlrst=bb.executeQuery(ssql);
if (sqlrst.next()){
    r=sqlrst.getString(1);
}       
} catch(SQLException e){

r="error";
}


if (r.equals("1")){
r="ok";
} else
{
r="error";
}

out.print(r);
//out.print(ssql);

%>

//-------------------------------------------------
//guid.jsp  生成cuid的jsp
//------------------------------------------------
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*,java.util.*" errorPage="" %>
<jsp:useBean id="bb" scope="page" class="lh.LHDBconnection"/>
 
<%

//response.setHeader("Pragma","No-cache"); 
//response.setHeader("Cache-Control","no-cache"); 
//response.setDateHeader("Expires",   0); 
String p=request.getParameter("temp");

String r="";   
ResultSet sqlrst=bb.executeQuery("select newid() cuid,"+"'"+p+"' as kkk ");
if (sqlrst.next()){
    r=sqlrst.getString(1);
}       
out.print(r);

%>


//----------------------------------------------------
//savedata.jsp  保存数据
//----------------------------------------------------
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*,java.util.*" errorPage="" %>
<jsp:useBean id="bb" scope="page" class="lh.LHDBconnection"/>
 
<%


String fs=request.getParameter("s");
String newv=fs.substring(fs.indexOf("|")+1,fs.length());
newv=new String(newv.getBytes("ISO-8859-1"),"GB2312");

fs=fs.substring(0,fs.indexOf("|"));

String[] a=fs.split("//.");
//System.out.println(a[1]);
String tbnm=a[0].trim();
String clnm=a[1].trim();
String pkvl=a[2].trim();
pkvl=new String(pkvl.getBytes("ISO-8859-1"),"GB2312");

//String ssql="if exists(select * from "+tbnm+" where cuid="+"'"+pkvl+"'"+") update "+tbnm+" set "+clnm+"="+"'"+newv+"'"+" where cuid="+"'"+pkvl+"'"
//+" else insert into "+tbnm+"(cuid,tref,"+clnm+") values("+"'"+pkvl+"'"+",getdate(),"+"'"+newv+"' ) select @@rowcount cnt ";

String ssql="if exists(select * from "+tbnm+" where cuid="+"'"+pkvl+"'"+") update "+tbnm+" set "+clnm+"="+"'"+newv+"'"+" where cuid="+"'"+pkvl+"'"
+" else insert into "+tbnm+"(cuid,tref,"+clnm+") values("+"'"+pkvl+"'"+",getdate(),"+"'"+newv+"' ) select IID FROM   "+tbnm+"  where cuid="+"'"+pkvl+"'"+" ";


String r="";   
System.out.println("save data sql=:"+ssql);
try{
        ResultSet sqlrst=bb.executeQuery(ssql);
        if (sqlrst.next()){
            r=sqlrst.getString(1);
        }       
} catch(SQLException e){

r="-1";
}

/*
if (r.equals("1")){
r="ok";
} else
{
r="error";
}
*/
out.print(r);
//out.print(ssql);

%>



//------------------------------------------------------
//通过include来使用这个annygrid.jsp
//-------------------------------------------------------

<jsp:include page="annygrid.jsp">
<jsp:param name="tbname" value="<%=tbname1%>"/>
</jsp:include>