天恒娱乐平台:xml分页+ajax请求数据源+dom取结果实

标签:行业资讯    日期:2018-02-09 14:53    录入:天恒娱乐平台注册    浏览:

  

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

  

效果图如下:  
  
解决思路:  
1.单击[选择]时,根据当前选择(下拉框)的分类ID,使用ajax请求,取得数据源(服务端使用dataSet.getXml()输出,因为数据量不是很大,所以就偷懒了)  
2.客户端使用xml数据岛分页显示(使用数据岛分页比较简单,不用写太多的代码)  
3.搜索时,根据当前选择(下拉框)的分类ID,和搜索关键字,重新使用ajax请求(好像也可以使用xml的结果过滤,但为了方便,重新请求算了),跳到第2步显示  
4.取数据时,单击某行时,使用onclick事件,把当前行的tr做为参数,使用dom操作就可以得到tr里的td的值  
附:由于没考虑到其它细节的问题,所以代码有点乱,希望各位能多多指导,各位的批评就是我进步的最好的捷径.谢谢  
贴出全部代码,希望能和大家相互交流一下  
index.html 显示页面:  

  

  
  
  
  
  
  
  
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 = "";  
tableHead += "编号";  
tableHead += "用户名";  
tableHead += "密码";  
tableHead += "";  
//数据绑定字段名,修改DATAFLD里的的字段名  
var dataFiled = "
";  
dataFiled += "
";  
dataFiled += "
";  
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 = "
";  
content += "
";  
content += "
天恒娱乐注册
";  
content += "
";  
content += "" + xmlContent + "";  
content += " ★★★小编:天恒娱乐 整理文章,欢迎大家转载 ★★★
上一篇:天恒娱乐:基于jquery封装的一个js分页
下一篇:没有了