xml分页+ajax请求数据源+dom取结果实例代码


Posted in Javascript onOctober 31, 2008

效果图如下:
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();
}

Javascript 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
node.js博客项目开发手记
Mar 16 Javascript
安装vue-cli的简易过程
May 22 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
JS Array对象入门分析
Oct 30 #Javascript
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 #Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 #Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 #Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 #Javascript
JavaScript函数、方法、对象代码
Oct 29 #Javascript
js身份证验证超强脚本
Oct 26 #Javascript
You might like
php中将一个对象保存到Session中的方法
2015/03/13 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python闭包实现计数器的方法
2015/05/05 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
EJB timer的种类
2014/10/28 面试题
化学学院毕业生自荐信范文
2013/12/17 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
费用申请报告范文
2015/05/15 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL