<div class="al-chk-item-border">
<input type="checkbox" value="1" id="lvl_1" checked="checked" name="lvl"/><label for="lvl_1" class="al-chk-item-label">高級(jí)</label>
</div>
<div class="al-chk-item-border">
<input type="checkbox" value="2" id="lvl_2" checked="checked" name="lvl"/><label for="lvl_2" class="al-chk-item-label">中級(jí)</label>
</div>
<div class="al-chk-item-border">
<input type="checkbox" value="3" id="lvl_3" name="lvl"/><label for="lvl_3" class="al-chk-item-label">初級(jí)</label>
</div>
標(biāo)簽實(shí)現(xiàn):
<al:checkbox data="{1:高級(jí),2:中級(jí),3:初級(jí)}" name="lvl" value="1"></al:checkbox>默認(rèn)選中1
<al:checkbox data="{1:高級(jí),2:中級(jí),3:初級(jí)}" name="lvl" value="1,2"></al:checkbox>默認(rèn)選中1,2
<input type="checkbox" id="chk_fn" name="fn" value="1" /><label for="chk_fn">是否開放</label>
標(biāo)簽實(shí)現(xiàn):
<al:checkbox data="{1:是否開放}" name="fn" id="chk"></al:checkbox>
<al:checkbox data="{1:是否開放}" name="fn"></al:checkbox>如果不設(shè)置id則會(huì)根據(jù)name和value生成id="fn_1"
<al:checkbox data="{1:是否開放}" name="fn" id="chk" value="1"></al:checkbox>如果設(shè)置value="1"(與data中的值一致),則生成的checkbox默認(rèn)選中
value與body為空的情況下
如果nvl=true則顯示當(dāng)前日期,如果nvl=false則不輸出
如果nvl=其他值,則直接輸出nvl
如果沒有指定value,body,nvl都為空,同時(shí)def有值,則輸入def
需要注意的是def與nvl=true時(shí),日期都會(huì)參與格式化與運(yùn)算(如增加一天),而nvl=其他值時(shí),直接原樣輸出evl并不執(zhí)行格式化與其他運(yùn)算
def是指如果沒有輸入值,則取默認(rèn)值,默認(rèn)值同樣會(huì)執(zhí)行格式化與其他運(yùn)算
evl/nvl是指如果結(jié)果為empt(null),則直接輸出evl/nvl,不會(huì)執(zhí)行格式化,不會(huì)執(zhí)行運(yùn)算
有一種典型的場(chǎng)景AJAX分頁(yè),
用戶第一次打開列表頁(yè)時(shí)默認(rèn)顯示第1頁(yè)。
用戶在列表頁(yè)中切換到第2頁(yè)后,在第2頁(yè)中打開一個(gè)條目的明細(xì)。操作完明細(xì)后退。返回到到列表
這時(shí)列表頁(yè)需要直接顯示第2頁(yè)數(shù)據(jù)。
如何區(qū)分是后退過(guò)來(lái)的還是頁(yè)面刷新過(guò)來(lái)的。navi是在列表頁(yè)中存放了一個(gè)隱藏的input在切換頁(yè)數(shù)后修改這個(gè)input
刷新過(guò)來(lái)的頁(yè)面這個(gè)input值為空,而后退過(guò)來(lái)的這個(gè)input值為2
根據(jù)瀏覽器加載機(jī)制,在頁(yè)面加載完成之后才會(huì)給input賦值。所以在頁(yè)面加載過(guò)程中取不到這個(gè)input值。
可以把需要取input值的代碼放在setTimeout(function(){取值},0);
al:checkbox設(shè)置data-*屬性
set.add(DataRow.parseJson("{''ID'':''1'',''CODE'':''01'',''NM'':''高級(jí)'',''TITLE'':''高級(jí)工工程師'',''LVL'':''A''}"));
set.add(DataRow.parseJson("{''ID'':''2'',''CODE'':''02'',''NM'':''中級(jí)'',''TITLE'':''中級(jí)工工程師'',''LVL'':''B''}"));
set.add(DataRow.parseJson("{''ID'':''3'',''CODE'':''03'',''NM'':''初級(jí)'',''TITLE'':''初級(jí)工工程師'',''LVL'':''C''}"));
通過(guò)itemExtra設(shè)置data-*
<al:checkbox data="${set}" border="true" itemExtra="id:ID,code:CODE"/>
根據(jù)ID值生成data-id值,執(zhí)行結(jié)果
<input type="checkbox" value="1" id="chk_1" name="chk"data-id="1"data-code="01"/><label for="chk_1" class="">高級(jí)</label>
<input type="checkbox" value="2" id="chk_2" name="chk"data-id="2"data-code="02"/><label for="chk_2" class="">中級(jí)</label>
<input type="checkbox" value="3" id="chk_3" name="chk"data-id="3"data-code="03"/><label for="chk_3" class="">初級(jí)</label>
如果直接指定data-*的值,則通過(guò)extra屬性
<al:checkbox data="${set}" border="false" extra="id:1,code:2" name="chk"/>
執(zhí)行結(jié)果
<input type="checkbox" value="1" id="chk_1" name="chk" data-id="1" data-code="2"/><label for="chk_1" class="al-chk-item-label">高級(jí)</label>
<input type="checkbox" value="2" id="chk_2" name="chk" data-id="1" data-code="2"/><label for="chk_2" class="al-chk-item-label">中級(jí)</label>
<input type="checkbox" value="3" id="chk_3" name="chk" data-id="1" data-code="2"/><label for="chk_3" class="al-chk-item-label">初級(jí)</label>
默認(rèn)情況下生成的標(biāo)簽在最外層有div包圍,如果是多選框則每個(gè)條目外也有div包圍
可以通過(guò)clazz="item"設(shè)置每個(gè)條目外層div的class,通過(guò)borderClazz="border"設(shè)置最外層div的class
如果不需要外層div可以通過(guò)border="false"取消
在根據(jù)集合數(shù)據(jù)源生成多選框時(shí),經(jīng)常需要生成一個(gè)數(shù)據(jù)源中沒有的默認(rèn)項(xiàng),
如數(shù)據(jù)源中只有高級(jí)、中級(jí)、初級(jí)三個(gè)選項(xiàng),但收集數(shù)據(jù)時(shí)需要一個(gè)待定,這時(shí)需要在生成標(biāo)簽時(shí)指定一個(gè)默認(rèn)項(xiàng)
<al:checkbox data="${set }" head="默認(rèn)" name="lvl"></al:checkbox>
如果需要設(shè)置選中項(xiàng),首先要給這一項(xiàng)設(shè)置value值也就是生成的input的value值,再通過(guò)標(biāo)簽的value屬性設(shè)置默認(rèn)選中項(xiàng)
<al:checkbox data="${set }" head="默認(rèn)" headValue="0" name="lvl" value="0"></al:checkbox>
當(dāng)headValue與value中至少一個(gè)值相等時(shí),當(dāng)前項(xiàng)默認(rèn)選中
根據(jù)集合數(shù)據(jù)源確認(rèn)默認(rèn)選中項(xiàng)時(shí),默認(rèn)情況下會(huì)取集合中條目的ID值,選項(xiàng)中的value值在數(shù)據(jù)源中出現(xiàn)時(shí)則選中當(dāng)前項(xiàng)
但數(shù)據(jù)源經(jīng)常是從數(shù)據(jù)庫(kù)中查詢出來(lái)的,列中并不一定有ID,也有可能是CD
這時(shí)需要顯式指定根據(jù)哪一列或哪一個(gè)屬性的值來(lái)確認(rèn)默認(rèn)選中項(xiàng)
<al:checkbox data="${set }" valueKey="CODE" textKey="TITLE" value="${values}" rely="CD"/>
當(dāng)set條目中的CODE值與values條目中的CD值有至少一項(xiàng)相等時(shí),則選中當(dāng)前項(xiàng)
set:用來(lái)生成復(fù)選框的數(shù)據(jù)源
value:用來(lái)確證默認(rèn)選中項(xiàng)的數(shù)據(jù)源
根據(jù)集合數(shù)據(jù)源生成checkbox時(shí),默認(rèn)情況下會(huì)取集合中條目的ID值作為input的value值,取條目的NM值作為label的標(biāo)簽體
但數(shù)據(jù)源經(jīng)常是從數(shù)據(jù)庫(kù)中查詢出來(lái)的,列中并不一定有ID和NM,也有可能是CODE,TITLE或其他情況
這時(shí)需要顯式指定value key與text key
<al:checkbox data="${set }" valueKey="CODE" textKey="TITLE" />
<div class="al-chk-item-border">
<input type="checkbox" value="1" id="lvl_1" checked="checked" name="lvl"/><label for="lvl_1" class="al-chk-item-label">高級(jí)</label>
</div>
<div class="al-chk-item-border">
<input type="checkbox" value="2" id="lvl_2" checked="checked" name="lvl"/><label for="lvl_2" class="al-chk-item-label">中級(jí)</label>
</div>
<div class="al-chk-item-border">
<input type="checkbox" value="3" id="lvl_3" name="lvl"/><label for="lvl_3" class="al-chk-item-label">初級(jí)</label>
</div>
標(biāo)簽實(shí)現(xiàn):、
DataSet set = new DataSet();
set.add(DataRow.parseJson("{''ID'':''1'',''NM'':''高級(jí)''}"));
set.add(DataRow.parseJson("{''ID'':''2'',''NM'':''中級(jí)''}"));
set.add(DataRow.parseJson("{''ID'':''3'',''NM'':''初級(jí)''}"));
DataSet values = new DataSet();
values.add(DataRow.parseJson("{''ID'':''1''}"));
values.add(DataRow.parseJson("{''ID'':''2''}"));
<al:checkbox data="${set }" name="lvl" value="${values }"></al:checkbox>
這里將根據(jù)values中的條目的ID來(lái)確定默認(rèn)選中項(xiàng)
通過(guò)集合數(shù)據(jù)源生成checkbox時(shí),有時(shí)需要根據(jù)某一列表值設(shè)置默認(rèn)選中
如所有級(jí)別為A的條目默認(rèn)選中
DataSet set = new DataSet();
set.add(DataRow.parseJson("{''ID'':''1'',''CODE'':''01'',''NM'':''高級(jí)'',''TITLE'':''高級(jí)工工程師'',''LVL'':''A''}"));
set.add(DataRow.parseJson("{''ID'':''2'',''CODE'':''02'',''NM'':''中級(jí)'',''TITLE'':''中級(jí)工工程師'',''LVL'':''B''}"));
set.add(DataRow.parseJson("{''ID'':''3'',''CODE'':''03'',''NM'':''初級(jí)'',''TITLE'':''初級(jí)工工程師'',''LVL'':''C''}"));
<al:checkbox data="${set}" name="chk" checkedValue="A"/>
條目中ID=A時(shí),當(dāng)前項(xiàng)選中
<al:checkbox data="${set}" name="chk" checkedValue="A" rely="LVL"/>
注意:生成input.value時(shí)還是取ID列的值,rely只是在判斷選中條件時(shí)使用,如果不指定rely則根據(jù)ID=A判斷是否選中
java:
String key ="NM";
DataRow row = new DataRow();
row.put(key,"張三");
DataSet set = new DataSet();
set.add(row);
jsp:
<al:text data="${row}" property="NM"/>
取row中的NM列的值
等同于${row.NM}
在實(shí)現(xiàn)開發(fā)過(guò)程中,NM經(jīng)常需要動(dòng)態(tài)值,此時(shí)才需要text標(biāo)簽
<al:text data="${row}" property="${key}"/>
按下標(biāo)取值
<al:text data="${set}" index="0" property="${key}"/>
AJAX分頁(yè)一般需要
1.結(jié)構(gòu)頁(yè)面
2.數(shù)據(jù)頁(yè)面
每個(gè)頁(yè)面一般對(duì)應(yīng)后臺(tái)的Controller為其提供必要數(shù)據(jù)
大體流程一般是
1.訪問(wèn)結(jié)構(gòu)controller
2.結(jié)構(gòu)controler打到對(duì)應(yīng)的結(jié)構(gòu)頁(yè)面
3.結(jié)構(gòu)頁(yè)面發(fā)起ajax請(qǐng)求到數(shù)據(jù)controller
4.數(shù)據(jù)controller查詢數(shù)據(jù)并調(diào)用數(shù)據(jù)頁(yè)面生成html結(jié)構(gòu)返回到瀏覽器
5.結(jié)構(gòu)頁(yè)接收到html添加到當(dāng)前頁(yè)面中
實(shí)現(xiàn)方式:
在結(jié)構(gòu)頁(yè)面中添加分頁(yè)標(biāo)簽<al:navi page="分頁(yè)下標(biāo)顯示位置" body="生成的HTML結(jié)構(gòu)顯示位置" url="數(shù)據(jù)controller對(duì)應(yīng)的url"/>
navi標(biāo)簽有多個(gè)屬性可以設(shè)置
type:0按下標(biāo)分頁(yè)(默認(rèn)) 1:只在底部顯示“加載下一頁(yè)”(內(nèi)容通過(guò)guide設(shè)置)
param:提供查詢參數(shù)的函數(shù),以json格式返回
creater:方式ajax或html
intime:頁(yè)面加載完成后是否立即執(zhí)行
refresh:生成刷新當(dāng)前頁(yè)的函數(shù)
before:加載數(shù)據(jù)前執(zhí)行
after:加載數(shù)據(jù)后執(zhí)行
function:標(biāo)簽執(zhí)行完后會(huì)生成一個(gè)函數(shù),可以調(diào)用當(dāng)前方法相當(dāng)于重新查詢第一頁(yè)數(shù)據(jù)
auto:瀏覽器滾動(dòng)到底部時(shí)是否自動(dòng)加載下一頁(yè)數(shù)據(jù),一般移動(dòng)瀏覽器使用
jump:是否顯示跳轉(zhuǎn)到第幾頁(yè)
guide:加載下一頁(yè)的文本
empty:查詢無(wú)內(nèi)容時(shí)提示
over:到達(dá)最后一頁(yè)的提示
stat:是否顯示統(tǒng)計(jì)(統(tǒng)計(jì)格式在配置文件中設(shè)置)
style:對(duì)應(yīng)分頁(yè)配置文件中的key
為什么需要數(shù)據(jù)頁(yè)面?
在<c:forEach>中經(jīng)常需要取上一條或下一條的數(shù)據(jù),但jstl中并沒有提供相應(yīng)的標(biāo)簽,可以通過(guò)<al:text>來(lái)實(shí)現(xiàn)
<c:forEach var="item" items="${set}" varStatus="status">
當(dāng)前行姓名:${item.NM}
上一行姓名:<al:text data="${set}" properyt="NN" index="${status.index-1}"></al:text>
</c:forEach>
靜態(tài)屬性一般通過(guò)EL表達(dá)式就可以實(shí)現(xiàn)
如${user.NM}
而實(shí)際開發(fā)過(guò)程中NM屬性經(jīng)過(guò)是動(dòng)態(tài)值,此時(shí)可以通過(guò)<al:text>標(biāo)簽實(shí)現(xiàn)
如:<al:text data="${user}" property="${key}"/>
select等標(biāo)簽中textKey與textValue屬性,用來(lái)生成option標(biāo)簽的value值和標(biāo)簽體
如textValue="NM",生成標(biāo)簽體時(shí)會(huì)調(diào)用集合中條目的getNm(),getString("NM")等方法。
如果需要提取多列值可以通過(guò)textValue="{列名/屬性名}"的形式實(shí)現(xiàn)
如textValue="{ID}-{NM}" text="標(biāo)題{TITLE}"
DataSet set = new DataSet();
set.add(DataRow.parseJson("{''ID'':''1'',''CODE'':''01'',''NM'':''高級(jí)'',''TITLE'':''高級(jí)'',''LVL'':''A''}"));set.add(DataRow.parseJson("{''ID'':''2'',''CODE'':''02'',''NM'':''中級(jí)'',''TITLE'':''中級(jí)'',''LVL'':''B''}"));set.add(DataRow.parseJson("{''ID'':''3'',''CODE'':''03'',''NM'':''初級(jí)'',''TITLE'':''初級(jí)'',''LVL'':''C''}"));<al:checkbox data="${set}" textKey="TITLE"/>
<select>
<option value="1">高級(jí)</option>
<option value="2">中級(jí)</option>
<option value="3">初級(jí)</option>
</select>
<al:checkbox data="${set}" textKey="{CODE}-{TITLE}"/>
<select>
<option value="1">01-高級(jí)</option>
<option value="2">02-中級(jí)</option>
<option value="3">03-初級(jí)</option>
</select>
<al:checkbox data="${set}" textKey="CODE:{CODE} 標(biāo)題:{TITLE}"/>
<select>
<option value="1">CODE:01 標(biāo)題:高級(jí)</option>
<option value="2">CODE:02 標(biāo)題:中級(jí)</option>
<option value="3">CODE:03 標(biāo)題:初級(jí)</option>
</select>
<al:text></al:text>
用來(lái)生成<input id="op" type="checkbox" value="1"/><label>是否開放</label>標(biāo)簽
屬性 | 是否必須 | 說(shuō)明 |
data | true | 數(shù)據(jù)源,一般是從數(shù)據(jù)庫(kù)中查出來(lái)的一個(gè)集合(List,DataSet等),有一些常用數(shù)據(jù)如,是否,開關(guān)等也可以直接寫入data屬性格式如:data="{1:是,0:否}" |
border | false | 是否生成外層div |
checked | false | 是否選中 |
checkedValue | false | 生成多個(gè)多選框時(shí),可以通過(guò)checkedValue設(shè)置默認(rèn)選中的一項(xiàng) |
valueKey | false | 如果是data是一個(gè)集合,需要通過(guò)當(dāng)前屬性來(lái)指定以集合條目中的哪個(gè)屬性為checkbox屬性賦值 |
textKey | false | 如果是data是一個(gè)集合,需要通過(guò)當(dāng)前屬性來(lái)指定以集合條目中的哪個(gè)屬性為label標(biāo)簽賦值,支持多列 {ID}-{NM} |
property | false | value="${list}" property="ID"item.get(valueKey)是在list.items.property 集合中時(shí)選中 |
rely | false | rely="CHK" data.item.CHK = true或1或checkedValue或value時(shí)選中 |
id | false | id |
name | true | name |
clazz | false | class |
style | false | css樣式 |
onclick | false | js事件 |
onchange | false | js事件 |
onblur | false | js事件 |
onfocus | false | js事件 |
head | false | 生成多個(gè)多選框時(shí),可以通過(guò)head設(shè)置第一個(gè)默認(rèn)選項(xiàng) |
headValue | false | 生成多個(gè)多選框時(shí),可以通過(guò)head設(shè)置第一個(gè)默認(rèn)選項(xiàng) |
value | false | value="{1,2,3,4,5}" item.get(valueKey)是在1,3,4,5集合中時(shí)選中 value="${list}" property="ID" item.get(valueKey)是在list.items.property 集合中時(shí)選中 |
disabled | false | disable |
readonly | false | readonly |
encrypt | false | 集合中的value值是否需要加密 |
extra | false | 生成data-*數(shù)據(jù) |
itemExtra | false | 條目生成data-*數(shù)據(jù) |
borderClazz | false | 外層div.class |
labelClazz | false | label.class |
evl | false | value或body值是否取第一個(gè)不為空的值,多個(gè)值之間以逗號(hào)分隔 |
用來(lái)實(shí)現(xiàn)jsp或ajax方式分頁(yè)
url ;//數(shù)據(jù)來(lái)源
param ;//參數(shù)收集函數(shù)
container ;//返回內(nèi)容顯示容器
body ;//返回內(nèi)容顯示容器class或id(如果body與page分開)
cur ;//當(dāng)前頁(yè)
page ;//返回內(nèi)容顯示容器class或id(如果body與page分開)
bodyContainer ;//如果body與page分開(兼容上一版本)
naviContainer ;//如果body與page分開(兼容上一版本)
creater = "ajax" ;//分頁(yè)方式 ajax | html
scroll ;//自動(dòng)翻頁(yè)時(shí) 監(jiān)聽的滾動(dòng)事件源 默認(rèn)window
method = "post" ;
id ;//一個(gè)頁(yè)面內(nèi)多個(gè)標(biāo)簽時(shí)需要id區(qū)分
function ;//指定function后,需主動(dòng)調(diào)用function后加載數(shù)據(jù),查詢條件發(fā)生變化時(shí)可調(diào)用function
refresh ;//刷新當(dāng)前頁(yè)的函數(shù)
before ;//渲染之前調(diào)用
after ;//渲染之后調(diào)用
intime = false ;//實(shí)時(shí)執(zhí)行
auto = null ;//是否加載下一頁(yè)內(nèi)容(swap加載更多typ=1時(shí) 劃屏到底部自動(dòng)加載)
callback ;//回調(diào)函數(shù)
guide ;//加載更多文本提示
empty ;//查詢無(wú)數(shù)據(jù)顯示內(nèi)容
over ;//最后一頁(yè)提示
style = "default" ;//樣式標(biāo)記對(duì)應(yīng)anyline-navi.xml中的config.key
stat = false ;//是否顯示統(tǒng)計(jì)
jump = false ;//是否顯示跳轉(zhuǎn)
vol = true ;//是否顯示每頁(yè)多少條(配置文件開啟的情況下有效)
delay = 0 ;//延遲執(zhí)行時(shí)間
這個(gè)標(biāo)簽用一般來(lái)加密url參數(shù)
原文:<a href="/a.html?id=1">連接</a>
<des:a href="/a.html?id=1">連接</des:a>生成密文<a href="/a.html?id=密文">連接</a>
更多建議: