-
Notifications
You must be signed in to change notification settings - Fork 2
/
48-dinamik-tablo-olusturma.htm
243 lines (166 loc) · 8.34 KB
/
48-dinamik-tablo-olusturma.htm
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html>
<head>
<title>Dinamik Tablo Oluşturma</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- DIŞARIDAN YÜKLENEN KÜTÜPHANE DOSYALARI -->
<link rel="stylesheet" type="text/css" href="kutuphane/basic.css">
<script src="kutuphane/basic.js" type="text/javascript" charset="utf-8"></script>
<script>
/*
Bir veri tabanı, içerisinde bir çok tablo barındırabilir.
Bu örnekteki, dizi değişkeninde tutulan bilgiler, bir veri tabanından da geliyor olabilirdi.
- Bu örnekte, elimizdeki bilgi ile, dinamik bir yapı oluşturuyoruz.
*/
// DEĞİŞKENLER
var table1Titles = [
{name: "Sıra", width: 140, textAlign: "center", contentID: "id"},
{name: "İsim", width: 200, textAlign: "left", contentID: "name"},
{name: "EPosta", width: 240, textAlign: "left", contentID: "email"},
{name: "Test", width: 60, textAlign: "left", contentID: "id"},
{name: "Test2", width: 80, textAlign: "left", contentID: "id"}
]
var table1Contents = [
{id: "001", name: "Ahmet", email: "[email protected]"},
{id: "002", name: "Mehmet", email: "[email protected]"},
{id: "003", name: "Filiz", email: "[email protected]"},
{id: "004", name: "Hasan", email: "[email protected]"},
{id: "005", name: "Duygu", email: "[email protected]"},
{id: "006", name: "Anıl", email: "[email protected]"},
{id: "007", name: "Dilara", email: "[email protected]"},
{id: "008", name: "Alperen", email: "[email protected]"},
]
var tblPeople
// Ortak özellikler
var propTableTitle = {color: "white", round: 4}
var propTableName = {color: "white", round: 4}
// ÖZEL FONKSİYONLAR
// İlk çalışan fonksiyon.
var start = function() {
// Nesne: Tablo
tblPeople = createTable(table1Titles)
that.left = 10
that.top = 50
// Nesnenin yüksekliğini yeniden düzenle.
that.setHeight(450)
// NOT: bu fonksiyonu yazmamın sebebi; nesne yüksekliği
// İki farklı parçayı ilgilendiriyor.
// Tablo oluşturuldab sonra, manuel olarak özelliklerini değiştirelim.
that.title0.color = "lightblue"
// Bilgileri tabloya aktaralım.
that.fill(table1Contents)
// Yeniden yazdığımız fonksiyon ile, her bir satıra basılmasını sağlayalım.
that.onClick(itemClicked)
// Tablonun genişliğine göre ekrana sığdır. Toplam boşluk 20px
page.fit(tblPeople.width + 20, 650)
}
// DİĞER FONKSİYONLAR
var itemClicked = function(self) {
print(self.content.name)
}
// NESNEYİ OLUŞTURAN FONKSİYON:
// Ortak kullanım için başka bir .js dosyasına taşınabilir.
// Dinamik tablo oluşturma fonksiyonu.
var createTable = function(titles) {
// NESNE: Liste ana taşıyıcı
tableObject = createBox(0, 0, 0, 190)
that.border = 0
that.round = 4
// Başlıkların genişliğine göre, toplam genişlik hesaplanacak.
var tableWidth = 0
// Başlıkları oluştur.
for (var i = 0; i < titles.length; i++) {
// NESNE: Başlık
tableObject["title" + i] = createButton(0, 0, titles[i].width, 40)
that.text = titles[i].name
that.buttonElement.style.cursor = "default"
that.prop(propTableTitle)
// Başlıkları yan yana diz.
if (i > 0) {
that.aline(tableObject["title" + (i - 1)], "right")
}
// Başlıkların toplam genişliğini hesapla.
tableWidth += titles[i].width
}
// Taşıyıcı kutunun genişliğini, başlıklara göre ayarla.
tableObject.width = tableWidth
// NESNE: İçeriği taşıyan kaydırılabilir kutu
tableObject.b1 = createBox(0, 40, tableObject.width, tableObject.height - 40)
that.color = "transparent"
that.border = 0
that.scrollY = 1
tableObject.itemCount = 0
// Nesneye temizleme fonksiyonu ekle.
tableObject.clean = function() {
tableObject.b1.text = ""
tableObject.itemCount = 0
}
// Nesneye satır oluşturma fonksiyonu ekle.
tableObject.createItem = function(item, count) {
// NESNE: Satırın taşıyıcı kutusu.
tableObject.b1["b" + count] = createBox(0, (count * 30), tableObject.width, 30)
that.border = 0
that.content = item
//that.onClick(itemClicked)
// Eklenen satır sayısını arttır.
tableObject.itemCount++
// İkiye bölünebilenler satırlar beyaz boyansın
if (count % 2) {
that.color = "white"
}
// Satırın taşıyıcı kutusunun ismi.
var itemObject = tableObject.b1["b" + count]
// Bir satırdaki yan yana içerikleri oluştur.
for( var j = 0; j < titles.length; j++) {
// NESNE: Bir satırdaki içerik taşıyan kare.
itemObject["lbl" + j] = createLabel(tableObject["title" + j].left, 0, tableObject["title" + j].width, itemObject.height)
that.textAlign = titles[j].textAlign
// Sola dayalı olanların başına 10px boşluk koy.
if (titles[j].textAlign == "left") {
itemObject["lbl" + j].left += 15
itemObject["lbl" + j].width -= 15
}
// Nesnenin metnini diziden al.
that.text = item[titles[j].contentID]
}
}
// Nesneyi içerik ile doldur.
tableObject.fill = function(contents) {
// Önce eski eklenmiş tüm içerikleri temizle.
tableObject.clean()
// İçerikleri tek tek ekle.
for( var i = 0; i < contents.length; i++) {
tableObject.createItem(contents[i], i)
}
// İçeriği oluşturma, that değişkenini değiştirecektir.
// Kullanmak istiyorsak, tekrar düzenleyebiliriz.
makeBasicObject(tableObject)
}
// Nesnenin orjinal onClick fonksiyonunu değiştirelim.
tableObject.onClick = function(func) {
// Oluşturulan satır sayısınca tekrar et.
for ( var i = 0; i < tableObject.itemCount; i++) {
// Parametredeki fonksiyonu her bir satırın nesnesine bağla.
tableObject.b1["b" + i].onClick(func)
}
// NOT: Taşıyıcı kutu nesnesine basıldığında yerine,
// Her bir satırın, taşıyıcı nesnesine basıldığında yaptık.
}
// Tablonun yüksekliğini yeniden düzenle.
tableObject.setHeight = function(height) {
tableObject.height = height
// Nesnenin alt nesnesinin de yüksekliğini yeniden düzenle.
tableObject.b1.height = height - 40
}
// Cevap verildikten sonra that olarak kullanılabilsin.
makeBasicObject(tableObject)
// Oluşturulan nesneyi cevap ver.
return tableObject
}
</script>
</head>
<body>
<!-- HTML içeriği -->
</body>
</html>