תיבות רשימה מקושרות – חלק ב'

BuildHome ‏ • 18 באוגוסט, 2005

בחלק הראשון של המאמר יצרנו תיבות בחירה דינאמיות עם מידע סטאטי.
בחלק זה של המאמר נשלב מידע מתוך מסד נתונים בעזרת ASP.

מסד הנתונים

ניצור את מסד הנתונים שלנו ונתבסס על אותו מידע מהחלק הראשון של המאמר.
אנחנו זקוקים ל-2 טבלאות, אחת של היצרנים (manufacturer) והשנייה של הדגמים (model).

בואו נתחיל…

ראשית נתחיל עם כתיבת הקוד ההתחלתי ב-JavaScript של ערך ברירת המחדל בעמוד בתיבת הבחירה הדינאמית שלנו.

1
2
3

נמשיך להגדרת משתנים, רקורדסט וחיבור למסד הנתונים:

1
2
3
4
5
6
7
8
9

בקוד הגדרנו את המשתנים שלנו, הגדרנו רקורדסט עם חיבור למסד הנתונים וגם פתחנו אותו. rsManufacturer יהווה הרקורדסט של טבלת היצרנים ו- rsModel יהווה הרקורדסט של טבלת הדגמים.

רשימת יצרנים

נריץ את השאילתה שלנו על טבלת היצרנים על מנת לשלוף את כל היצרנים וכן כדי לשלוף לאחר מכן את רשימת הדגמים לכל יצרן בתוך לולאה.

1
2
3
4
5

manSQL = "SELECT manufacturer.manufacturer_ID,manufacturer.manufacturer_name FROM manufacturer"
rsManufacturer.Open manSQL, Conn
Do while not rsManufacturer.EOF
man_list = man_list & "<option value="""&rsManufacturer("manufacturer_id")&""">"&rsManufacturer("manufacturer_name")&"</option>"
Response.Write "arrList["&rsManufacturer("manufacturer_id")&"] = new Array("

בשורה 3 ניתן לראות כי התחלנו את הלולאה על כל רשימת היצרנים.
בשורה 4 אנחנו יוצרים את רשימת היצרנים ומציבים את כל המידע וה-HTML בתוך המשתנה man_list.
לאחר מכן נדפיס את רשימת היצרנים (man_list) במקום הנכון על מנת להציג את הרשימה למשתמש.
בשורה 5 אנחנו מדפיסים את ההתחלה של דינאמיות תיבות הבחירה שלנו.
בכל מערך אנחנו מציבים במספר האלמנט שלו את ID היצרן ובהמשך יציב את כל רשימת הדגמים של אותו יצרן בתוך המערך הנוכחי של היצרן.

רשימת הדגמים

אנחנו נמצאים בתוך הלולאה וזה הזמן להריץ לולאה שתשלוף לנו את כל הדגמים של אותו יצרן שבו אנחנו נמצאים בלולאה עפ"י ID היצרן שנמצא בתוך השדה model_mID בטבלת הדגמים שלנו.

1
2
3
4
5

modelSQL = "SELECT model.model_name,model.model_ID FROM model WHERE model.model_mID="&rsManufacturer("manufacturer_id")
    rsModel.Open modelSQL, Conn
    modelList = rsModel.GetString(2,-1,"','","','")
    Response.Write "'"&Mid(modelList,1,Len(modelList)-2)
    rsModel.Close

בשורה 3 אנחנו מציבים את כל המידע ששלפנו בשאילתה של רשימת הדגמים במשתנה modelList בעזרת GetString (מאמר על GetString).
הגדרנו בשיטת GetString שההפרדה של התאים והשורות יהיו ע"י גרש יחיד, פסיק וגרש יחיד (',').
בשורה 4 אנחנו משתמשים בפונקציה Mid על מנת לשלוף את כל המידע אך להשמיט את ה-2 תווים האחרונים. 2 התווים האחרונים הינם גרש יחיד ופסיק שהינם מיותרים מהשיטה GetString ועל מנת שהקוד שלנו יהיה תקין ויעבוד נצטרך להשמיט אותם מהמשתנה שלנו.
הערה: אפשר להשתמש בפונקציה Left במקום Mid אך בכל הנוגע לעברית יש להשתמש ב-Mid כיוון שקיימת בעיה של זיהוי שליפת מידע צדדי בעברית ולכן Left ולא יעבוד היטב על עברית.
בשורה 5 נסגור את הרקורדסט שלנו על מנת שנוכל לפתוח אותו שנית ביצרן הבא.

סיום הלולאה

1
2
3
4

Response.Write ");"&vbcrlf
rsManufacturer.MoveNext
Loop
rsManufacturer.Close

בשורה הראשונה אנחנו מדפיסים את סגירת המערך של היצרן שפתחנו בתחילת הלולאה של רשימת היצרנים.
בשורות 2-3 אנחנו עוברים לרשומה הבאה וחוזרים חזרה לתחילת הלולאה על מנת לעבור ליצרן הבא בטבלת היצרנים.
בשורה 4 אנחנו סוגרים את רקורדסט היצרנים.

סגירת ואיפוס אובייקטים

1
2
3
4

Set rsModel = Nothing
Set rsManufacturer = Nothing
Conn.Close
Set Conn = Nothing

איפסנו את האובייקט של הדגמים,יצרנים וסגרנו ואיפסנו את אובייקט החיבור שלנו ( למה לסגור אובייקטי חיבור? ).

הקוד במלואו

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<%
Dim Conn,manSQL,rsManufacturer
Dim man_list,modelList,modelSQL,rsModel

Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="& Server.MapPath("dymList-ASP.mdb")

Set rsManufacturer = Server.CreateObject("ADODB.RecordSet")
Set rsModel = Server.CreateObject("ADODB.RecordSet")

manSQL = "SELECT manufacturer.manufacturer_ID,manufacturer.manufacturer_name FROM manufacturer"
rsManufacturer.Open manSQL, Conn
Do while not rsManufacturer.EOF
    man_list = man_list & "<option value="""&rsManufacturer("manufacturer_id")&""">"&rsManufacturer("manufacturer_name")&"</option>"
    Response.Write "arrList["&rsManufacturer("manufacturer_id")&"] = new Array("
    modelSQL = "SELECT model.model_name,model.model_ID FROM model WHERE model.model_mID="&rsManufacturer("manufacturer_id")
    rsModel.Open modelSQL, Conn
    modelList = rsModel.GetString(2,-1,"','","','")
    Response.Write "'"&Mid(modelList,1,Len(modelList)-2)
    rsModel.Close
    Response.Write ");"&vbcrlf
rsManufacturer.MoveNext
Loop
rsManufacturer.Close

Set rsModel = Nothing
Set rsManufacturer = Nothing
Conn.Close
Set Conn = Nothing
%>

סיום הסקריפט

כעת נצטרך להעתיק את הפונקציה מהמאמר הקודם ולסגור את הסקריפט שלנו.

1
2
3
4
5
6
7
8
9
10
11

function makeDymList(selectedID,currListNumber) {
    if(selectedID==0) selectedID=1;
    var list = arrList[currListNumber];
    var selList = document.getElementById("model");
    selList.options.length = 0;
    for(var i=0;i<list.length;i+=2) {
        selList.options[i/2] = new Option(list[i],list[i+1]);
        if((selectedID–1)==(i/2)) selList.options[i/2].selected=true
    }
}
</script>

הדפסת רשימת יצרנים

אחרי שסיימנו את הכל, נותר לנו רק להדפיס את רשימת היצרנים שהצבנו במשתנה man_list במקום הנכון ולהגדיר את הקוד של שתי תיבות הבחירה.

1
2
3
4
5
6

<select name="manufacturer" id="manufacturer" OnChange="makeDymList(0,this.value);">
<option value="0">כל היצרנים</option>
<%=man_list%>
</select>

<select name="model" id="model"></select>

הקוד במלואו

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<html>
<head>
<title>תיבות בחירה דינאמיות</title>
<script type="text/javascript">
var arrList = new Array();
arrList[0] = new Array('כל הדגמים','0');
<%
Dim Conn,manSQL,rsManufacturer
Dim man_list,modelList,modelSQL,rsModel

Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="& Server.MapPath("dymList-ASP.mdb")

Set rsManufacturer = Server.CreateObject("ADODB.RecordSet")
Set rsModel = Server.CreateObject("ADODB.RecordSet")
manSQL = "SELECT manufacturer.manufacturer_ID,manufacturer.manufacturer_name FROM manufacturer"
rsManufacturer.Open manSQL, Conn
Do while not rsManufacturer.EOF
    man_list = man_list & "<option value="""&rsManufacturer("manufacturer_id")&""">"&rsManufacturer("manufacturer_name")&"</option>"
    Response.Write "arrList["&rsManufacturer("manufacturer_id")&"] = new Array("
    modelSQL = "SELECT model.model_name,model.model_ID FROM model WHERE model.model_mID="&rsManufacturer("manufacturer_id")
    rsModel.Open modelSQL, Conn
    modelList = rsModel.GetString(2,-1,"','","','")
    Response.Write "'"&Mid(modelList,1,Len(modelList)-2)
    rsModel.Close
    Response.Write ");"&vbcrlf
rsManufacturer.MoveNext
Loop
rsManufacturer.Close

Set rsModel = Nothing
Set rsManufacturer = Nothing
Conn.Close
Set Conn = Nothing
%>
function makeDymList(selectedID,currListNumber) {
    if(selectedID==0) selectedID=1;
    var list = arrList[currListNumber];
    var selList = document.getElementById("model");
    selList.options.length = 0;
    for(var i=0;i<list.length;i+=2) {
        selList.options[i/2] = new Option(list[i],list[i+1]);
        if((selectedID–1)==(i/2)) selList.options[i/2].selected=true
    }
}
</script>
</head>

<body onload="makeDymList(0,0);">

<select name="manufacturer" id="manufacturer" OnChange="makeDymList(0,this.value);">
<option value="0">כל היצרנים</option>
<%=man_list%>
</select>

<select name="model" id="model"></select>

</body>
</html>

לחץ כאן להרצת הדוגמא
לחץ כאן להורדת הדוגמא

בהצלחה!

תגיות: ASP, JS, linked, listbox, מקושרות, תיבות רשימה

תיבות רשימה מקושרות – חלק ב'

מסד הנתונים

בואו נתחיל…

רשימת יצרנים

רשימת הדגמים

סיום הלולאה

סגירת ואיפוס אובייקטים

הקוד במלואו

סיום הסקריפט

הדפסת רשימת יצרנים

הקוד במלואו

עוד בנושא זה

תגובות בפייסבוק

תגיות