前言
在項目開發過程中,特別是OA類軟件,會針對郵件/待辦/公告等模塊在主頁面進行快捷查看的元件展示要求,類似效果如下
針對框架層面,我們可以進行後臺的可視化配置,使用mustache.js在主頁面進行動態渲染,避免了對主頁面的繁瑣的硬編碼工作,同時針對每個信息展示的元件進行內部個性化處理
表結構
包含了元件名稱,元件模板路徑,元件列表數據路由,查看更多路由,啓用/禁用等
可視化配置
模板定義
這裏的模板直接使用的html文件,方便css與js的修改,簡單的使用了mustache.js進行模板數據綁定,當然也可以使用其他模板引擎
<div class="cellheadcontainer"> <span class="celltitletext">{{elementtitle}}</span> <div class="celltitleop"> <a style="color:white" class="morebtn" onclick="OpenMore('{{elementmoreurl}}')">更多</a> </div> </div> <div class="cellcontentcontainer"> {{#data}} <div class="notciecell" onclick="OpenDetail('{{title}}')"> <div class="noticeleft"> <span class="noticetitle noticeindex">{{index}}</span> <span class="noticetitle">{{title}}</span> </div> <div class="noticeright"> <span class="noticetip">{{publishuname}}</span> <span class="noticetip">{{publishdate}}</span> </div> </div> {{/data}} </div> <script> var noticeid = "{{elementid}}"; function OpenMore(url) { OpenTopDialog( '消息通知列表', url, 600, 800, BindNotcieList) } function BindNotcieList() { CommonRefresh(noticeid); } function OpenDetail(title) { OpenTopDialog('消息詳情', "frame/demo/notice/noticeDetail", 600, 800, BindNotcieList, title) } </script>
主頁面模板渲染
主要是針對當前配置的模板進行分組,渲染每行每列的元件,模板文字內容在後端處理獲取完成,前端調用Mustache.render方法進行數據的填充,同時需要注意針對每個元件定義局部刷新的方法,避免操作完畢後針對主頁面整體刷新