新聞預覽,動態生成層級ul-li
阿新 • • 發佈：2018-04-19
scrip dir models 視圖 tool 啟用 check 預覽 text
1 <div class="row" id="add-withinfosortId-row" style="display: none"> 2 <div class="col-md-12" id="add-withinfosortId-divId"></div> 3 </div> 4 <div class="sticky-header"> 5 <div class="mail-box"> 6 <aside class="mail-nav mail-nav-bg-color" id="infosorListId-aside"> 7<div class="mail-nav-body"> 8 <div class="panel"> 9 <div id=‘div_menu‘> 10 <ul id="infosort"></ul> 11 </div> 12 </div> 13 </div> 14</aside> 15 <div class="col-lg-12" id="section-mail-list-table"> 16 <header class="panel-heading custom-tab "> 17 <ul class="nav nav-tabs"> 18 <li class="active" id="section-mail-list-li"><a 19 href="#section-mail-list" data-toggle="tab">新聞預覽</a></li> 20</ul> 21 </header> 22 <div class="panel"> 23 <div class="panel-body"> 24 <div class="col-lg-12"> 25 <table id="infolinkTableId" class="table table-bordered"></table> 26 </div> 27 </div> 28 </div> 29 </div> 30 31 </div> 32 </div> 33 34 <!-- 預覽頁面 --> 35 <div aria-hidden="true" data-backdrop="static" 36 aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" 37 class="modal fade"></div> 38 39 <script th:inline="javascript"> 40 /*<![CDATA[*/ 41 var infosortId=[[${infosortId}]]; 42 var infolinkById; 43 var result = ""; 44 //頁面加載 45 $(function() { 46 //獲取已有的欄目 47 initInfoSortTreeUsed(); 48 49 }); 50 //動態生成層級ul-li 51 function showall(menu_list, parent) { 52 parent.append("<li ><a href=‘###‘ onclick=showInfolink(‘"+menu_list.id+"‘)>"+menu_list.infosortName+"</a>"); 53 if(menu_list.children.length>0){ 54 parent.append("<ul id="+menu_list.id+">"); 55 $.each(menu_list.children, function(i,val){ 56 var parent_this=$(‘#‘+menu_list.id); 57 showall(val,parent_this); 58 }); 59 parent.append("</ul></li>"); 60 }else{ 61 parent.append("</li>"); 62 } 63 } 64 65 /* end */ 66 function initInfoSortTreeUsed(){ 67 $.ajax({ 68 url : "infosort/infosort-ztree-preview.json", 69 dataType : "json", 70 data : {"infosortId":infosortId}, 71 type : "POST", 72 success : function(result) { 73 var data=result.ajaxResultJson.obj; 74 console.log(result); 75 var num=$("#infosort"); 76 infolinkById =data.id; 77 showinfolinkTableId(infolinkById); 78 79 showall(data,num); 80 }, 81 error : function(result) { 82 } 83 }); 84 85 }; 86 87 function showInfolink(id){ 88 89 showinfolinkTableId(id); 90 $(‘#infolinkTableId‘).bootstrapTable(‘refresh‘); 91 } 92 93 //1.初始化Table 94 function showinfolinkTableId(id){ 95 infolinkById=id; 96 $(‘#infolinkTableId‘).bootstrapTable({ 97 url: ‘infosort/getInfoLinkByInfosortId.json‘, 98 method: ‘post‘, //請求方式（*） 99 dataType:‘json‘, 100 contentType: "application/x-www-form-urlencoded", 101 toolbar: ‘#toolbar‘, //工具按鈕用哪個容器 102 undefinedText: "*",//當數據為 undefined 時顯示的字符 103 striped: true, //是否顯示行間隔色 104 cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） 105 pagination: true, //是否顯示分頁（*） 106 pageSize: 5, //每頁顯示的記錄數 107 pageNumber:1, //當前第幾頁 108 pageList: [5,10,15,20,25], //記錄數可選列表 109 sortable: false, //是否啟用排序 110 sortOrder: "asc", //排序方式 111 sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*） 112 ////查詢參數,每次調用是會帶上這個參數，可自定義 113 queryParams: queryParams, 114 search: false, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大 115 strictSearch: false, 116 showColumns: true, //是否顯示所有的列 117 showRefresh: false, //是否顯示刷新按鈕 118 minimumCountColumns: 4, //最少允許的列數 119 responseHandler:responseHandler, 120 // height: 600, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度 121 uniqueId: "id", //每一行的唯一標識，一般為主鍵列 122 showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕 123 cardView: false, //是否顯示詳細視圖 124 detailView: false, //是否顯示父子表 125 columns: [{ 126 checkbox : true 127 }, { 128 field : ‘id‘, 129 title : ‘ID‘, 130 visible : false 131 },{ 132 field: ‘infolinkTitle‘, 133 title: ‘標題‘ 134 }, { 135 field: ‘infolinkType‘, 136 title: ‘類型‘, 137 formatter:function (value,row,index){ 138 var type=row.infolinkType; 139 var str =""; 140 if(type==0){str="編輯組編輯"}; 141 if(type==1){str="普通鏈接"}; 142 if(type==2){str="上傳附件"}; 143 144 return str; 145 } 146 },{ 147 field: ‘keyword‘, 148 title: ‘關鍵字‘ 149 150 },{ 151 field: ‘summary‘, 152 title: ‘摘要‘ 153 }, 154 { 155 field: ‘infolinkState‘, 156 title: ‘狀態‘, 157 formatter:function (value,row,index){ 158 var state=row.infolinkState; 159 var str =""; 160 if(state==0){value="未發布"; 161 text = ‘<span style="color:#FF6600">‘+value+‘</span>‘ 162 }; 163 if(state==1){value="發布"; 164 text = ‘<span style="color:#00CCFF">‘+value+‘</span>‘ 165 }; 166 return text; 167 } 168 }, 169 { 170 field: ‘modifiedDate‘, 171 title: ‘更新時間‘ 172 173 },{ 174 title: ‘操作‘, 175 field: ‘id‘, 176 formatter:function(value,row,index){ 177 var id=row.id; 178 var infolinkType =row.infolinkType; 179 var url=row.infolinkUrl; 180 var e; 181 e=‘<a href ="#" title="預覽"><span class="fa fa-laptop" onclick="previewInfolink(\‘‘+id+‘\‘,\‘‘+infolinkType+‘\‘,\‘‘+url+‘\‘)"></span></a> ‘; 182 return e; 183 }, 184 events: ‘operateEvents‘ 185 }] 186 }); 187 }; 188 function responseHandler(res) { 189 if (res) { 190 return { 191 "rows" : res.list, 192 "total" :res.total 193 }; 194 195 } else { 196 return { 197 "rows" : [], 198 "total" : 0 199 }; 200 } 201 }; 202 203 //設置查詢條件，把分頁，查詢條件，排序等信息拼接成一個models字符串對象傳遞至後臺 204 function queryParams(params) { 205 206 var str={"page":this.pageNumber, 207 "pageSize":this.pageSize, 208 "filter":{"filters":[ {field:"infosortId",value:infolinkById} , {field:"infolinkState",value:1} ]}, 209 "sort":[{"field":"id","dir":"ASC"}] 210 } 211 var baseData = JSON.stringify(str); 212 213 var param = { 214 models :baseData 215 } 216 return param; 217 }; 218 219 220 //預覽 221 function previewInfolink(id,infolinkType,url){ 222 if("1" == infolinkType){ 223 window.location.replace("http://"+url); 224 }else{ 225 load(‘cms/infolink-preview-byinfosort?id=‘+id+‘&infosortId=‘+infosortId); 226 } 227 }; 228 229 230 /*]]>*/ 231 </script>
新聞預覽,動態生成層級ul-li