|
大家好！又見面了！今天我們學(xué)習(xí)另一種非常又有的表單控件－－多級關(guān)聯(lián)類型控件。今天是我這篇教程的最后一天了，首先感謝大家?guī)滋靵淼闹С帧x謝！
不知道你有沒有遇到這種情況，有的時(shí)候，頁面上提供了兩個(gè)下拉選擇給用戶，本來挺簡單的事情，可是，第二個(gè)下拉單中的可選值是根據(jù)用戶在第一個(gè)下拉單的選擇而生成的。做這樣的東西都需要寫很多javascript的代碼，巨麻煩！前些日子看了看NoahWeb，發(fā)現(xiàn)它提供這樣的一種控件，叫做“多級關(guān)聯(lián)類型控件”琢磨了一下發(fā)現(xiàn)挺好用的，今天說給大家聽聽！
說白了，這種控件就是第二個(gè)下拉單是根據(jù)第一個(gè)下拉單中的選項(xiàng)動態(tài)生成的。還是老規(guī)矩，先看看代碼，要不說不清楚！呵呵！
<InputLine Text="SelectLevel" Desc="">
<Input Id="sla" Type="select">
<Label>選擇：</Label>
<LabelClass>label</LabelClass>
<NullErrorString>請選擇1</NullErrorString>
<SelectLevel sla="[select1]" slb="[select2]" >
<LevelOption Text="請選擇" Value="">
<LevelOption Text="請選擇" Value="">
</LevelOption>
</LevelOption>
<LevelOption Text="德國" Value="010">
<LevelOption Text="柏林" Value="0101">
</LevelOption>
<LevelOption Text="慕尼黑" Value="0102">
</LevelOption>
</LevelOption>
<LevelOption Text="澳大利亞" Value="021">
<LevelOption Text="墨爾本" Value="0211">
</LevelOption>
<LevelOption Text="堪培拉" Value="0212">
</LevelOption>
</LevelOption>
</SelectLevel>
</Input>
<Input Id="slb" Type="select">
<Label>選擇：</Label>
<LabelClass>label</LabelClass>
<NullErrorString>請選擇2</NullErrorString>
</Input>
</InputLine>
第一步：先看個(gè)大概……代碼中的一個(gè)InputLine中出現(xiàn)了兩個(gè)Input，一個(gè)叫sla，另一個(gè)是slb。都是Select類型的。這就是過一會兒出現(xiàn)在表單中的那兩個(gè)下拉單。
第二步：即然是“多級關(guān)聯(lián)”，顧名思義就是將這兩個(gè)或更多個(gè)select聯(lián)系起來，實(shí)現(xiàn)要求的功能嘛！我們看一看被我加粗了的那句代碼，也就是
<SelectLevel sla="[select1]" slb="[select2]" >
再找到它的結(jié)束標(biāo)簽，也就是
</SelectLevel>
正是它們中的內(nèi)容將兩個(gè)select關(guān)聯(lián)起來的。SelectLevel標(biāo)簽用來描述多個(gè)控件的選擇級關(guān)聯(lián)。sla是第一個(gè)select的名字，它根據(jù)select1變量的值作為已被選中的值，那么slb自然就是第二個(gè)Select的名字，slb根據(jù)select1變量的值作為已被選中的值！這個(gè)是為了用這個(gè)表單回顯時(shí)而做的。
第三步：接下來我們看看這幾句代碼：
<LevelOption Text="請選擇" Value="">
<LevelOption Text="請選擇" Value="">
</LevelOption>
</LevelOption>
我們看到了LevelOption這個(gè)標(biāo)簽，它用來描述該級相關(guān)的可選值。這里面還存在著一個(gè)包含關(guān)系，就像代碼中那樣，描述第一級Select的LevelOption是外層的，描述第二個(gè)Select的就是里層的LevelOption。這兩句代碼給出了兩個(gè)select的初始值，也就是“請選擇”，人性化一點(diǎn)嘛！
第四步：現(xiàn)在就要實(shí)現(xiàn)“級聯(lián)”功能啦！看代碼，
<LevelOption Text="德國" Value="010">
<LevelOption Text="柏林" Value="0101">
</LevelOption>
<LevelOption Text="慕尼黑" Value="0102">
</LevelOption>
</LevelOption>
這幾句代碼還是一個(gè)包含關(guān)系，和上面一樣，外層的LevelOption用來控制第一個(gè)select，里層的控制第二個(gè)select。先看外層的，在它的參數(shù)Text里面我寫人了“德國”，而參數(shù)Value中是它的值。而里層的LevelOption有兩個(gè)，一個(gè)是“柏林”，另一個(gè)是“慕尼黑”。其實(shí)想想挺簡單的，“德國”是第一個(gè)Select中出現(xiàn)的可選值，當(dāng)選擇了“德國”之后，第二個(gè)select中應(yīng)該自動出現(xiàn)“柏林”和“慕尼黑”兩個(gè)可選值。
第五步：我們接著寫入些代碼：
<LevelOption Text="澳大利亞" Value="021">
<LevelOption Text="墨爾本" Value="0211">
</LevelOption>
<LevelOption Text="堪培拉" Value="0212">
</LevelOption>
</LevelOption>
其實(shí)到了這里我已經(jīng)沒必要解釋什么了！這幾句代碼和上面一模一樣。作用是給兩個(gè)select多添一個(gè)可選值。當(dāng)選擇“澳大利亞”的時(shí)候，第二個(gè)select中應(yīng)該出現(xiàn)“墨爾本”和“堪培拉”這兩個(gè)可選值。
大功告成！試試看！^_^
兩個(gè)select出來了……再試試功能。
沒問題！如果選擇“澳大利亞”的話……
一切正常！如果想在“級聯(lián)”中多添一個(gè)可選值的話，按照第四步或者第五步多寫出一套LevelOption就Ok了！你可以自己試試！另外，還有另一種生成“級聯(lián)”的模式，就是使用數(shù)據(jù)庫獲取方式，兩個(gè)select中的可選值都是查庫返回的，想要生成“級聯(lián)”，第二個(gè)select中的那個(gè)數(shù)據(jù)庫操作集的查詢條件就要使用第一個(gè)select中選擇的值，實(shí)現(xiàn)方法也很簡單的！由于篇幅的問題，這里我就不多說了。需要用到的時(shí)候大家自己去NoahWeb官方的幫助文檔看吧！
本來還想和大家談?wù)劚韱沃械囊恍┦褂眉记�，可是沒時(shí)間了！算了，下面有幾個(gè)鏈接，是我在NoahWeb的官方幫助文檔上看到的一些技巧，大家誰感興趣就去看看……
label類型控件的妙用
使用NewLine標(biāo)簽以及利用空的InputLine標(biāo)簽
關(guān)于在表單中使用HTML標(biāo)簽
好啦！表單的這些簡單的知識就到這里吧！幾天下來我也學(xué)會了不少東西，教程寫得不好，大家多多包涵啦！以后再有什么好東西我爭取寫出更好的教程！謝謝大家！祝好運(yùn)！
出處：藍(lán)色理想
責(zé)任編輯：藍(lán)色
上一頁 第三天 下一頁
◎進(jìn)入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁 
第 4 頁 第四天
