xml分页+ajax请求数据源+dom取结果

最近做的一个项目里的某个小功能,主要是为了方便选择数据

演示地址:由于有恶意程序，所以去掉地址

效果图如下:

解决思路:

1.单击[选择]时,根据当前选择(下拉框)的分类ID,使用ajax请求,取得数据源(服务端使用dataSet.getXml()输出,因为数据量不是很大,所以就偷懒了)

2.客户端使用xml数据岛分页显示(使用数据岛分页比较简单,不用写太多的代码)

3.搜索时,根据当前选择(下拉框)的分类ID,和搜索关键字,重新使用ajax请求(好像也可以使用xml的结果过滤,但为了方便,重新请求算了),跳到第2步显示

4.取数据时,单击某行时,使用onclick事件,把当前行的tr做为参数,使用dom操作就可以得到tr里的td的值

附:由于没考虑到其它细节的问题,所以代码有点乱,希望各位能多多指导,各位的批评就是我进步的最好的捷径.谢谢

贴出全部代码,希望能和大家相互交流一下

index.html  显示页面:

        <select id="productID" onchange="changeID()" NAME="productID">
            <option value="1" selected>1111</option>
            <option value="2">2222</option>
            <option value="3">3333</option>
        </select><br>
        <table>
            <tr>
                <td><input id="selectValue" type="text" size="40"></td><td><a href='#' onclick='show()'><img src='img/btnSelect.gif' /></a></td>
            </tr>
        </table>        
        <div id="selectData"></div>
        <input id="abc" type="text" size="50%" />

data.js   所有操作js代码

var xmlHttp;
var xmlContent;                                    //ajax请求后返回保存的数据
var key = "";
var id  = "";

//---------------------样式设置------------------//
    var divid = "selectData"                    //说明第4步
    var txtValueID = "selectValue";                //说时第2步
    var fieldNames = new Array(3);                //单击某行取值是,每列值前添加一个该值列名
    var isShowFieldNames = true;                //取值时,是否要显示列名 true为显示,false不显示
    fieldNames[0]="编号:";
    fieldNames[1]="用户名:";
    fieldNames[2]="密码:";
    
    var pageSize = 10;                            //每页显示行数
    var onmouseoverBG = "#DDFFEC";                //鼠标移上去该行的背景颜色
    var onmouseoutBG  = "#ffffff";                //鼠标离开后该行的背景颜色

    //表头列名根据需要修改
    var tableHead = "<thead style='background: #DDFFEC;'>";

        tableHead += "<th>编号</th>";
        tableHead += "<th>用户名</th>";
        tableHead += "<th>密码</th>";

        tableHead += "</thead>";

    //数据绑定字段名,修改DATAFLD里的的字段名
    var dataFiled = "<td style='border-top: 1px solid #B9E2CC;'><div DATAFLD='F_id'></div></td>";
    dataFiled += "<td style='border-top: 1px solid #B9E2CC;'><div DATAFLD='F_userName'></div></td>";
    dataFiled += "<td style='border-top: 1px solid #B9E2CC;'><div DATAFLD='F_passWord'></div></td>";

    var RequestFile = "getXml1.aspx";            //请求页面

//-------------------外部调用--------------------------//

//显示选择
//productID是下拉框ID,请根据需要修改
function show()
{    
    $(divid).style.display = ''
    $(divid).style.position="absolute"
    $(divid).style.backgroundColor="#FFFFFF"
    key = "";
    id = productID.options[productID.selectedIndex].value;
    RequestXML();
}

//分类改变时隐藏
function changeID()
{
    hide();
}

//---------------------内部方法,一般不用修改---------------------------//    

//选择某行的值,显示到文本框
function getCurrentRowData(tr)
{
  var tds = tr.getElementsByTagName("td")        //得到所有列
  var result="";
    
  for(var i = 0; i < tds.length; i++)
  { 
    if(isShowFieldNames){result += fieldNames[i]};
    if(i != tds.length -1 )//是否是最后一列
    {
        
        result += tr.getElementsByTagName("div")[i].firstChild.nodeValue + ",";    //得到第i列的值 + ","
    }
    else
    {
        result += tr.getElementsByTagName("div")[i].firstChild.nodeValue;        //得到第i列的值
    }    
  }  
  $(txtValueID).value = result;
  hide();
}

//显示内容
function ShowData()
{
    var data =    $(divid);
    var content = "<div id=\"main\" style='border: 1px solid #009966;width:300px;font-size:13px';>";
        content += "<div id=\"searchMain\">";
            content += "<table><tr><td><input style='border: 1px solid #B9E2CC;' id=\"key\" type=\"text\" /></td><td><a href='#' onclick='Search()'><img style='border:0px;' src='img/btnSearch.gif' /></a></td><td><a href='#' onclick='hide()'><img style='border:0px' src='img/btnCancel.gif' /></a></td></tr></table>";
        content += "</div>";
        content += "<xml id=\"data_souce\">" + xmlContent + "</xml>";
        content += "<div id='resultxml'>"
            
            //----------------翻页操作-----------------------//
            content += "<table CELLPADDING=0 CELLSPACING=0 width='100%'><tr><td>"
            content += "<a href=\"#\" onclick=\"GotoPage('first')\"><img style='border:0px;' src='img/btnFirst.gif'/></a> ";
            content += "<a href=\"#\" onclick=\"GotoPage('previous')\"><img style='border:0px;' src='img/btnPrevious.gif'/></a> ";
            content += "<a href=\"#\" onclick=\"GotoPage('next')\"><img style='border:0px;' src='img/btnNext.gif'/></a> ";
            content += "<a href=\"#\" onclick=\"GotoPage('last')\"><img style='border:0px;' src='img/btnLast.gif'/></a>";
            content += "</td>"

            content += "<td align='rigth' style='font-size:13px'><span style='color:red' id='page'>1</span><span id='compart'></span><span id='pages'></span>"
            content += "</td></tr></table>"

            //----------------数据源-----------------------//
            content += "<table style='text-align:center;font-size:13px;border: 1px solid #B9E2CC;' width='300px' CELLPADDING=0 CELLSPACING=0 id=\"datas\" DATASRC=\"#data_souce\" DATAPAGESIZE=" + pageSize + ">";
            
            //----------------列名-----------------------//
            content += tableHead;
            content += "<tr style=\"cursor:hand\" onmouseover=\"this.bgColor='" + onmouseoverBG + "'\" onmouseout=\"this.bgColor='" + onmouseoutBG + "'\" onclick=\"getCurrentRowData(this)\">";
            content += dataFiled;            
            content += "</tr>";
            content += "</table>";      
        content += "</div>"
    content += "</div>"    
    data.innerHTML = content;
    GetPages();
}

//得到总页
function GetPages()
{
    var rowCount = $("data_souce").getElementsByTagName("Table");        //得到所有table节点,得到总记录数
    $("pages").innerHTML = Math.ceil(rowCount.length / pageSize);
    $("compart").innerHTML = "/";
    if(rowCount.length == 0)
    {
        $("resultxml").innerHTML = "找不到相关数据";
    }
}

//首页时得到当前页
function firstPage()
{
    $("page").innerHTML = 1;
}

//上页时得到当前页
function previousPage()
{
    if($("page").innerHTML != "1")
    {
        $("page").innerHTML = parseInt($("page").innerHTML) - 1;
    }
}

//下页时得到当前页
function nextPage()
{
    if($("page").innerHTML != $("pages").innerHTML)
    {
        $("page").innerHTML = parseInt($("page").innerHTML) + 1;
    }
}

//尾页时得到当前页
function lastPage()
{
    $("page").innerHTML = $("pages").innerHTML;
}

//翻页操作
function GotoPage(page)
{
    switch(page)
    {
        case "first":
        {
            datas.firstPage();
            firstPage();
            break;
        }
        case "previous":
        {
            datas.previousPage();
            previousPage();
            break;
        }
        case "next":
        {
            datas.nextPage();
            nextPage();
            break;
        }
        case "last":
        {
            datas.lastPage();
            lastPage();
            break;
        }
    }
}

//搜索
function Search()
{
    key = $("key").value;
    if(key == "")
    {
        alert("请输入搜索关键字");
        return;
    }
    RequestXML();
}

//根据ID得到对象
function $(id)
{
    return document.getElementById(id);
}

//隐藏选择
function hide()
{
    $(divid).style.display ="none";
}

//创建XMLHttpRequest
function CreateXMLHttpRequest()
{
    if(window.ActiveXObject)
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
    }
}

//请求
function RequestXML()
{
    var url = RequestFile + "?id=" + id + "&key=" + key;
    CreateXMLHttpRequest();    
    xmlHttp.open("get",url);
    xmlHttp.onreadystatechange = GetXMLResult;
    xmlHttp.send(null);
}

//接收
function GetXMLResult()
{
    if(xmlHttp.readyState == 4)
    {
        if(xmlHttp.status == 200)
        {
            xmlContent = xmlHttp.responseText;
            ShowData();
        }
    }
    else
    {
        $(divid).innerHTML = "正在读取数据中";
    }
}

getXml.aspx  服务端数据源

        private void Page_Load(object sender, System.EventArgs e)
        {
            Response.Write(GetData());
            Response.End();
        }

        private string GetData()
        {
            string id = Request.QueryString["id"];
            string key = Request.QueryString["key"];

            string sql = "select * from T_user where F_id = " + id;
            if (key.Length > 0){sql += " and F_id like '%" + key + "%'or F_passWord like '%" + key + "%' or F_userName like '%" + key + "%'";}

            StringBuilder sb = new StringBuilder();
            sb.Append("<?xml version=\"1.0\"?>");
            SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=sa;database=WebTest");
            conn.Open();
            SqlDataAdapter da = new SqlDataAdapter(sql,conn);
            DataSet ds = new DataSet();
            da.Fill(ds);
            conn.Close();
            sb.Append(ds.GetXml());
            return sb.ToString();
        }