最近做的乙個專案裡的某個小功能,主要是為了方便選擇資料
效果圖如下:
解決思路:
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**
//ajax請求後返回儲存的資料
varkey =""
;var
id =""
;//
---------------------樣式設定------------------//
vardivid ="
selectdata"//
說明第4步
vartxtvalueid ="
selectvalue
";
//說時第2步
varfieldnames
=new
array(
3);
//單擊某行取值是,每列值前新增乙個該值列名
varisshowfieldnames
=true
;
//取值時,是否要顯示列名 true為顯示,false不顯示
fieldnames[0]
="
編號:"
;fieldnames[1]
="
使用者名稱:";
fieldnames[2]
="
密碼:"
;var
pagesize =10
;
//每頁顯示行數
varonmouseoverbg ="
#ddffec
";
//滑鼠移上去該行的背景顏色
varonmouseoutbg ="
#ffffff
";
//滑鼠離開後該行的背景顏色
//表頭列名根據需要修改
vartablehead ="
";
tablehead +="
編號"
;tablehead +="
使用者名稱"
;tablehead +="
密碼"
;tablehead +="
";
//資料繫結欄位名,修改datafld裡的的欄位名
vardatafiled ="
";
datafiled +="
";
datafiled +="
";
varrequestfile ="
getxml1.aspx
";
//請求頁面
//-------------------外部呼叫--------------------------//
//顯示選擇
//productid是下拉框id,請根據需要修改
function
show()
//分類改變時隱藏
function
changeid()
//---------------------內部方法,一般不用修改---------------------------//
//選擇某行的值,顯示到文字框
function
getcurrentrowdata(tr);if
(i !=
tds.length -1
)//
是否是最後一列
else
}$(txtvalueid).value
=result;
hide();}//
顯示內容
function
showdata()
//得到總頁
function
getpages()}//
首頁時得到當前頁
function
firstpage()
//上頁時得到當前頁
function
previouspage()}//
下頁時得到當前頁
function
nextpage()}//
尾頁時得到當前頁
function
lastpage()
//翻頁操作
function
gotopage(page)
case
"previous":
case
"next":
case
"last":
}}
//搜尋
function
search()
requestxml();}//
根據id得到物件
function
$(id)
//隱藏選擇
function
hide()
//建立xmlhttprequest
請求function
requestxml()
//接收
function
getxmlresult()
}else}
getxml.aspx 服務端資料來源
javascript之ajax請求資料demo
demo 如下 html的demo 如下 php的demo 如下 key post name stararr array 1 array 1.jpg 我是狗狗1號 6 array 6.jpg 我是狗狗2號 9 array 9.jpg 我是狗狗3號 下面是只返回乙個值時的 value stararr ...
ajax請求資料
ajax 方法是jquery底層的ajax實現，通過http請求載入遠端資料。1 2345 6789 1011 1213 1415 1617 18 ajax async true,datatype json success function returneddata error function e...
ajax請求資料原理
首先要了解什麼是ajax？1.ajax就是非同步的xml和js 注 ajax本身不支援跨域請求，需要在伺服器端處理。工作原理 1.ajax的技術核心是 xmlhttprequest 物件 2.ajax請求過程 建立xmlhttprequest 連線伺服器 傳送請求 伺服器做出響應 接收響應資料 aj...