列表循環

在頁面(miàn)中循環顯示列表數據是頻繁使用的功能(néng)，如獲取某個欄目下的内容列表，或者在導航欄顯示欄目列表等等。

主要的列表循環标簽有以下幾種(zhǒng)：

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

元素與實體

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

列表标簽使用實體的寫法時(shí)，标簽將(jiāng)解析爲JSON數組，數組内的項爲列表項的JSON對(duì)象，例如：

var arr = {stl:contents};

解析後(hòu)的代碼爲：

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

列表标簽可以通過(guò)設置屬性來控制所有列表項的顯示方式，同時(shí)列表标簽還(hái)可以通過(guò)<stl:itemTemplate> 子元素控制具體某一項的顯示方式，下面(miàn)依次加以說(shuō)明。

通過(guò)屬性控制列表

totalNum 一共顯示多少項

設置列表一共顯示多少條信息，默認值爲 0，代表顯示所有信息。

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

startNum 從第幾項開(kāi)始顯示

設置列表從第幾條信息開(kāi)始顯示，默認值爲 1，代表從第一條信息開(kāi)始顯示。

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

pageNum 每頁顯示多少項

設置分頁列表每一頁顯示的列表項數目，默認值爲 25。

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

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

maxPage 最多顯示多少頁

設置分頁列表最多顯示多少頁，默認值爲 0，代表不控制顯示頁數。

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

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

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

layout 列表布局

列表布局屬性用于控制列表循環中每一項的顯示方式，默認值爲 none，即直接循環，不控制列表項顯示。

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

<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 屬性決定要顯示的列的數量。比如，如果要在列表中顯示四列的項，那麼(me)可以把這(zhè)個屬性設爲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 屬性隻有當列表布局爲表格 layout="table" 時(shí)才起(qǐ)作用。

direction 方向(xiàng)

direction屬性用于确定列表是按水平方向(xiàng)還(hái)是或垂直方向(xiàng)來重複。

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

如果將(jiāng)此屬性設置爲vertical，列表中的項顯示在從上到下加載的列中，然後(hòu)從左到右，直到呈現所有項。例如，如果將(jiāng)columns屬性設置爲3，列表中的項顯示在三列中，如下表所示。

1	4	7
2	5	8
3	6	9

如果將(jiāng)此屬性設置爲horizontal，列表中的項以從左到右加載的行顯示，然後(hòu)從上到下，直到呈現所有項。例如，如果將(jiāng)columns屬性設置爲3，列表的項將(jiāng)以每行三項的形式顯示，如下表所示。

1	2	3
4	5	6
7	8	9

提示

即使 direction 值爲 vertical，還(hái)是顯示爲 4 個列。columns 永遠是指重複的列的數量，而不是行的數量。

注意

irection 屬性隻有當列表布局爲表格 layout="table" 且設置了列數 columns 時(shí)才起(qǐ)作用。

height - 整體高度

設置列表的整體高度。

注意

height 屬性隻有當列表布局爲表格 layout="table" 時(shí)才起(qǐ)作用。

width - 整體寬度

設置列表的整體寬度。

注意

width 屬性隻有當列表布局爲表格 layout="table" 時(shí)才起(qǐ)作用。

align - 整體對(duì)齊

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

• "center" 居中對(duì)齊。
• "left" 居左對(duì)齊。
• "right" 居右對(duì)齊。
• "justify" 向(xiàng)頁面(miàn)的左右邊緣對(duì)齊。
• "notSet" 不設置。此值是默認的，如果沒(méi)有指定屬性的話。

注意

align 屬性隻有當列表布局爲表格 layout="table" 時(shí)才起(qǐ)作用。

itemHeight - 項高度

列表中每一項的高度。

注意

itemHeight 屬性隻有當列表布局爲表格 layout="table" 時(shí)才起(qǐ)作用。

itemWidth 項寬度

列表中每一項的寬度。

注意

itemWidth 屬性隻有當列表布局爲表格 layout="table" 時(shí)才起(qǐ)作用。

itemAlign 項水平對(duì)齊

列表中每一項的水平對(duì)齊方式。

• "center" 居中對(duì)齊。
• "left" 居左對(duì)齊。
• "right" 居右對(duì)齊。
• "justify" 向(xiàng)頁面(miàn)的左右邊緣對(duì)齊。
• "notSet" 不設置。此值是默認的，如果沒(méi)有指定屬性的話。

注意

itemAlign 屬性隻有當列表布局爲表格 layout="table" 時(shí)才起(qǐ)作用。

itemVerticalAlign 項垂直對(duì)齊

列表中每一項的垂直對(duì)齊方式。

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

注意

itemVerticalAlign 屬性隻有當列表布局爲表格 layout="table" 時(shí)才起(qǐ)作用。

itemClass 項Css類

列表中每一項的 Css 類

注意

itemClass 屬性隻有當列表布局爲表格 layout="table" 時(shí)才起(qǐ)作用。

通過(guò)列表子元素項控制列表

在列表标簽中設置屬性可以控制列表中每一項的顯示方式，但如果我們需要控制列表中具體某一項的顯示方式，就(jiù)要用到<itemTemplate> 列表項子元素标簽了。請參考：<stl:itemTemplate> 列表項元素。

下面(miàn)的例子顯示的内容列表采用不同的顔色交替顯示。

<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>