列表循環

在(zài)頁面中循環顯示列表數據是(shì)頻繁使用的(de)功能，如獲取某個(gè)欄目下的(de)内容列表，或者在(zài)導航欄顯示欄目列表等等。

主要(yào / yāo)的(de)列表循環标簽有以(yǐ)下幾種：

列表标簽	說(shuō)明
stl:contents	内容列表
stl:pageContents	分頁内容列表
stl:channels	欄目列表
stl:pageChannels	分頁欄目列表
stl:sites	站點列表
stl:each	字段遍曆列表
stl:sqlContents	數據庫列表
stl:pageSqlContents	分頁數據庫列表

元素與實體

列表标簽使用元素的(de)寫法時(shí)，标簽内必須嵌套 HTML 或者 STL 标簽，列表标簽會逐項解析嵌套的(de)标簽并循環顯示，如果列表标簽内沒有嵌套内容，系統将忽略此标簽。例如<stl:contents></stl:contents>是(shì)無效的(de)。

列表标簽使用實體的(de)寫法時(shí)，标簽将解析爲(wéi / wèi)JSON數組，數組内的(de)項爲(wéi / wèi)列表項的(de)JSON對象，例如：

var arr = {stl:contents};

解析後的(de)代碼爲(wéi / wèi)：

var arr = [{"id":10935,"channelId":1746,"siteId":1739,"addUserName":"admin","lastEditUserName":"admin","writingUserName":"","lastEditDate":"2018-06-13 12:27:00","taxis":6,"groupNameCollection":"","tags":"","sourceId":0,"referenceId":0,"isChecked":"True","checkedLevel":1,"hits":28,"hitsByDay":1,"hitsByWeek":28,"hitsByMonth":28,"lastHitsDate":"2018-06-14 00:00:00","settingsXml":"titleformatstring=False_False_False_&translatecontenttype=Copy","title":"第九屆國(guó)際發明展覽會愛登堡電梯集團榮獲 “發明創業&#8226;項目獎”","isTop":"False","isRecommend":"False","isHot":"False","isColor":"False","linkUrl":"","addDate":"2015-09-30 13:52:00","subTitle":"","imageUrl":"","videoUrl":"","fileUrl":"","content":"<div>近日，第九屆國(guó)際發明展覽會在(zài)昆山國(guó)際會展中心圓滿落幕。作爲(wéi / wèi)我國(guó)發明創新領域對外開放的(de)重要(yào / yāo)窗口、創新思想交流和(hé / huò)發明成果産業化的(de)重要(yào / yāo)平台，國(guó)際發明展覽會自1988年創辦以(yǐ)來(lái)，在(zài)國(guó)内外發明界、産業界産生了(le／liǎo)廣泛影響。在(zài)上(shàng)千個(gè)參展的(de)創新發明項目中，愛登堡電梯集團榮獲三項“發明創業•項目獎”。</div><div>電梯研發部<br/>一(yī / yì ／yí)種用于(yú)高速電梯鋼絲繩補償及漲緊裝置<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 本發明研究轎廂、對重各使用一(yī / yì ／yí)部分緩沖器時(shí)的(de)布置情況，并确保電梯運行過程中補償繩不(bù)對轎廂及對重産生偏載力。高速電梯鋼絲繩補償及漲緊裝置的(de)研發對整個(gè)曳引式電梯市場補償繩系統設計具有重大(dà)意義。按照國(guó)家質檢要(yào / yāo)求，2m/s以(yǐ)上(shàng)的(de)曳引式電梯均應安裝此産品，故鋼絲繩補償及漲緊裝置具有較大(dà)的(de)市場，能夠産生一(yī / yì ／yí)定的(de)生産效益和(hé / huò)社會效益。</div><div>扶梯研發部<br/>一(yī / yì ／yí)種具有安全隔離控制櫃的(de)自動扶梯<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 本發明目的(de)在(zài)于(yú)解決自動扶梯的(de)客戶電源布置不(bù)合理的(de)問題，提供一(yī / yì ／yí)種采用客戶電源與控制櫃一(yī / yì ／yí)體式布置，内部隔離技術的(de)安全隔離型主控制櫃的(de)自動扶梯。本項目在(zài)2009年初設計完成，同年首次使用在(zài)“遼甯省沈陽市鞍山西柳中國(guó)商貿城”項目上(shàng)，完成了(le／liǎo)本系統的(de)初次試驗并取得成功。同年申請發明專利。現在(zài)依然成功的(de)應用在(zài)我司所有項目共計2055台自動扶梯上(shàng)，并取得“零”觸電事故的(de)安全效果。該發明有效地(dì / de)提高了(le／liǎo)企業在(zài)行業内的(de)競争優勢，也(yě)符合國(guó)家對安全扶梯的(de)倡導，具有積極推廣的(de)意義。</div><div>車庫研發部<br/>多台共柱安裝的(de)雙層傾斜式停車裝置（停車寶）<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 本項目的(de)研究主要(yào / yāo)降低了(le／liǎo)對建築空間層高和(hé / huò)柱網間距的(de)要(yào / yāo)求，實現了(le／liǎo)在(zài)較低的(de)空間内雙層停車，實現了(le／liǎo)多車位連續、多台共柱安裝，大(dà)大(dà)提升了(le／liǎo)停車空間利用率。俯仰式簡易升降布置靈活，規模大(dà)到(dào)上(shàng)百車位，小到(dào)幾個(gè)車位，外觀漂亮、結構簡單。<br/>實用性：<br/>1、此産品能廣泛應用在(zài)層高僅爲(wéi / wèi)2800mm的(de)空間，比原3600mm的(de)層高要(yào / yāo)求降低了(le／liǎo)800mm，應用範圍更廣；<br/>2、此産品多台共柱，減少了(le／liǎo)并排安裝時(shí)立柱之(zhī)間預留空間的(de)需求，相同空間可增加更多停車位，提高停車空間利用率。</div><p><br/></p>","summary":"","author":"","source":"","titleformatstring":"False_False_False_","translatecontenttype":"Copy","navigationUrl":"/test19/contents/1746/10935.html"}];

列表标簽可以(yǐ)通過設置屬性來(lái)控制所有列表項的(de)顯示方式，同時(shí)列表标簽還可以(yǐ)通過<stl:itemTemplate> 子(zǐ)元素控制具體某一(yī / yì ／yí)項的(de)顯示方式，下面依次加以(yǐ)說(shuō)明。

通過屬性控制列表

totalNum 一(yī / yì ／yí)共顯示多少項

設置列表一(yī / yì ／yí)共顯示多少條信息，默認值爲(wéi / wèi) 0，代表顯示所有信息。

<stl:contents totalNum="7">
  <stl:a></stl:a><br />
</stl:contents>

startNum 從第幾項開始顯示

設置列表從第幾條信息開始顯示，默認值爲(wéi / wèi) 1，代表從第一(yī / yì ／yí)條信息開始顯示。

<stl:contents startNum="3" totalNum="7">
  <stl:a></stl:a><br />
</stl:contents>

pageNum 每頁顯示多少項

設置分頁列表每一(yī / yì ／yí)頁顯示的(de)列表項數目，默認值爲(wéi / wèi) 25。

此屬性僅針對分頁列表标簽起作用： stl:pageContents、stl:pageChannels 及 stl:pageSqlContents 。

<stl:pageContents pageNum="20">
    <stl:a target="_blank"></stl:a><br />
</stl:pageContents>

maxPage 最多顯示多少頁

設置分頁列表最多顯示多少頁，默認值爲(wéi / wèi) 0，代表不(bù)控制顯示頁數。

此屬性在(zài)列表分頁特别多的(de)時(shí)候可以(yǐ)用來(lái)控制總頁數，比如隻列出(chū)前30頁的(de)内容，從而(ér)提高生成頁面速度。

此屬性僅針對分頁列表标簽起作用： stl:pageContents、stl:pageChannels 及 stl:pageSqlContents 。

<stl:pageContents pageNum="20" maxPage="100">
    <stl:a target="_blank"></stl:a><br />
</stl:pageContents>

layout 列表布局

列表布局屬性用于(yú)控制列表循環中每一(yī / yì ／yí)項的(de)顯示方式，默認值爲(wéi / wèi) none，即直接循環，不(bù)控制列表項顯示。

• "none" 列表不(bù)使用布局，僅循環列表項，不(bù)控制列表項顯示。此值是(shì)默認的(de)，如果沒有指定屬性的(de)話。
• "table" 列表使用表格布局，系統将把列表标簽解析爲(wéi / wèi) HTML <table> 元素，table 标簽的(de)所有屬性（class、style、cellPadding、cellSpacing等）均可用在(zài)列表标簽中。

<stl:contents layout="table" columns="3" width="90%" border="0" cellpadding="2">
    <stl:a><stl:content type="Title"></stl:content></stl:a>
</stl:contents>

columns 列數

columns 屬性決定要(yào / yāo)顯示的(de)列的(de)數量。比如，如果要(yào / yāo)在(zài)列表中顯示四列的(de)項，那麽可以(yǐ)把這(zhè)個(gè)屬性設爲(wéi / wèi)4。

<stl:contents layout="table" columns="3" width="90%" border="0" cellpadding="2">
    <stl:a><stl:content type="Title"></stl:content></stl:a>
</stl:contents>

注意

columns 屬性隻有當列表布局爲(wéi / wèi)表格 layout="table" 時(shí)才起作用。

direction 方向

direction屬性用于(yú)确定列表是(shì)按水平方向還是(shì)或垂直方向來(lái)重複。

• "vertical" 垂直
• "horizontal" 水平

如果将此屬性設置爲(wéi / wèi)vertical，列表中的(de)項顯示在(zài)從上(shàng)到(dào)下加載的(de)列中，然後從左到(dào)右，直到(dào)呈現所有項。例如，如果将columns屬性設置爲(wéi / wèi)3，列表中的(de)項顯示在(zài)三列中，如下表所示。

1	4	7
2	5	8
3	6	9

如果将此屬性設置爲(wéi / wèi)horizontal，列表中的(de)項以(yǐ)從左到(dào)右加載的(de)行顯示，然後從上(shàng)到(dào)下，直到(dào)呈現所有項。例如，如果将columns屬性設置爲(wéi / wèi)3，列表的(de)項将以(yǐ)每行三項的(de)形式顯示，如下表所示。

1	2	3
4	5	6
7	8	9

提示

即使 direction 值爲(wéi / wèi) vertical，還是(shì)顯示爲(wéi / wèi) 4 個(gè)列。columns 永遠是(shì)指重複的(de)列的(de)數量，而(ér)不(bù)是(shì)行的(de)數量。

注意

irection 屬性隻有當列表布局爲(wéi / wèi)表格 layout="table" 且設置了(le／liǎo)列數 columns 時(shí)才起作用。

height - 整體高度

設置列表的(de)整體高度。

注意

height 屬性隻有當列表布局爲(wéi / wèi)表格 layout="table" 時(shí)才起作用。

width - 整體寬度

設置列表的(de)整體寬度。

注意

width 屬性隻有當列表布局爲(wéi / wèi)表格 layout="table" 時(shí)才起作用。

align - 整體對齊

設置列表的(de)整體對齊方式。

• "center" 居中對齊。
• "left" 居左對齊。
• "right" 居右對齊。
• "justify" 向頁面的(de)左右邊緣對齊。
• "notSet" 不(bù)設置。此值是(shì)默認的(de)，如果沒有指定屬性的(de)話。

注意

align 屬性隻有當列表布局爲(wéi / wèi)表格 layout="table" 時(shí)才起作用。

itemHeight - 項高度

列表中每一(yī / yì ／yí)項的(de)高度。

注意

itemHeight 屬性隻有當列表布局爲(wéi / wèi)表格 layout="table" 時(shí)才起作用。

itemWidth 項寬度

列表中每一(yī / yì ／yí)項的(de)寬度。

注意

itemWidth 屬性隻有當列表布局爲(wéi / wèi)表格 layout="table" 時(shí)才起作用。

itemAlign 項水平對齊

列表中每一(yī / yì ／yí)項的(de)水平對齊方式。

• "center" 居中對齊。
• "left" 居左對齊。
• "right" 居右對齊。
• "justify" 向頁面的(de)左右邊緣對齊。
• "notSet" 不(bù)設置。此值是(shì)默認的(de)，如果沒有指定屬性的(de)話。

注意

itemAlign 屬性隻有當列表布局爲(wéi / wèi)表格 layout="table" 時(shí)才起作用。

itemVerticalAlign 項垂直對齊

列表中每一(yī / yì ／yí)項的(de)垂直對齊方式。

• "top" 頂端對齊。
• "middle" 居中對齊。
• "bottom" 底端對齊。
• "notSet" 不(bù)設置。此值是(shì)默認的(de)，如果沒有指定屬性的(de)話。

注意

itemVerticalAlign 屬性隻有當列表布局爲(wéi / wèi)表格 layout="table" 時(shí)才起作用。

itemClass 項Css類

列表中每一(yī / yì ／yí)項的(de) Css 類

注意

itemClass 屬性隻有當列表布局爲(wéi / wèi)表格 layout="table" 時(shí)才起作用。

通過列表子(zǐ)元素項控制列表

在(zài)列表标簽中設置屬性可以(yǐ)控制列表中每一(yī / yì ／yí)項的(de)顯示方式，但如果我們需要(yào / yāo)控制列表中具體某一(yī / yì ／yí)項的(de)顯示方式，就(jiù)要(yào / yāo)用到(dào)<itemTemplate> 列表項子(zǐ)元素标簽了(le／liǎo)。請參考：<stl:itemTemplate> 列表項元素。

下面的(de)例子(zǐ)顯示的(de)内容列表采用不(bù)同的(de)顔色交替顯示。

<stl:contents>
    <stl:itemTemplate type="Item">
        <stl:a><stl:content type="Title"></stl:content></stl:a><br />
    </stl:itemTemplate>
    <stl:itemTemplate type="AlternatingItem">
        <stl:a style="color:red"><stl:content type="Title"></stl:content></stl:a> <br />
    </stl:itemTemplate>
</stl:contents>