新闻预览,动态生成层级ul-li

  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>&nbsp;&nbsp;‘;
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>

原文地址:https://www.cnblogs.com/Steven5007/p/8879909.html

时间: 2024-10-10 13:25:25

新闻预览,动态生成层级ul-li的相关文章

jquery - ul li click 无响应

搞了很久, 发现对应jquery来说, 动态产生的ul li(其实不只是这个, 还有 table td等), 直接使用 $("#ul_div>li").click(function() {}); 是不起作用的. 解决方案是 $("#ul_div").on("click", "li", function() {}); ref: http://stackoverflow.com/questions/14418451/clic

小书匠预览操作说明

小书匠预览操作说明 预览小书匠 概述 预览 小书匠编辑器提供了边写作边预览功能. 打开预览 可以点击编辑器右侧中间按钮打开预览.需要注意的是如果当前窗口太小,系统会强制关闭边预览边写作功能,在编辑器侧边也就无法看到该按钮.只需要把窗口宽度调大一些,该按钮就会自动出现. 快捷键ctrl+shift+p 打开预览 关闭预览 点击预览区左侧中间按钮,就可以关闭预览功能. 关闭预览 实时同步预览 小书匠的边预览边写作支持实时同步,用户每次在编辑区输入的文字都会及时在预览区显示结果. 实时同步预览 双向精

富文本编辑器handyeditor,上传和预览图片的host地址不一样

使用富文本编辑器(官网)时,大多时候都会用到图片上传,但是下载的富文本编辑器的默认配置是只有一个上传地址的host的. var he = HE.getEditor('editor', { autoHeight: true, autoFloat: false, topOffset: 0, uploadPhoto: true, uploadPhotoUrl: uploadDomain, uploadPhotoHandler: "", uploadPhotoSize: 200, upload

for循环动态生成一组新闻以及cssText的应用

在说今天的知识点之前,先说一下cssText的属性应用,关于cssText是给标签添加行内样式,比如我们要给一个原有的div动态添加了宽高500px:然后又通过cssText给动态添加了一个宽200px,那么最后这个div上的样式就只有最后你添加的这个200px:而宽度就没有了,看代码: 1 window.onload= function(){ 2 var oBox=document.getElementById("box"); 3 oBox.onclick=function(){ 4

动态PDF在线预览

实战动态PDF在线预览及带签名的PDF文件转换 开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3,4天的时间,熬了两个凌晨3,4点,其中的艰辛.以及各中的曲折.压力只有自己能体会,项目上线后心里想着我要写一篇博文,一是总结一下经验,其次就是和大家分享自己这一路走来的的心得体会,欢迎吐槽!,废话不多说,来点干货! PDF在线预览实现: 8个实现在线

实战动态PDF在线预览及带签名的PDF文件转换

开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3,4天的时间,熬了两个凌晨3,4点,其中的艰辛.以及各中的曲折.压力只有自己能体会,项目上线后心里想着我要写一篇博文,一是总结一下经验,其次就是和大家分享自己这一路走来的的心得体会,欢迎吐槽!,废话不多说,来点干货! PDF在线预览实现: 8个实现在线浏览PDF文件的实用插件,笔者选择pdf.js,

第三百三十四节,web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻,爬取Ajax动态生成的信息

第三百三十四节,web爬虫讲解2-Scrapy框架爬虫-Scrapy爬取百度新闻,爬取Ajax动态生成的信息 crapy爬取百度新闻,爬取Ajax动态生成的信息,抓取百度新闻首页的新闻标题和rul地址 有多网站,当你浏览器访问时看到的信息,在html源文件里却找不到,由得信息还是滚动条滚动到对应的位置后才显示信息,那么这种一般都是 js 的 Ajax 动态请求生成的信息 我们以百度新闻为列: 1.分析网站 首先我们浏览器打开百度新闻,在网页中间部分找一条新闻信息 然后查看源码,看看在源码里是否有

MWeb 1.2 版更新说明和用 wkhtmltopdf 生成带目录的 PDF 和自定预览 CSS

新增 可选择在输入时是否自动插入列表编号,可以在 Preferences --> General --> Auto insert list and blockquote prefix 开启和关闭. 分享功能的 Copy as image.Save as image.Save as PDF 等现在统一都用HTML的样式了,另外还专门为分享到微薄等SNS生成的图片做了优化,比如说如果有代码,会强制换行. 新增把文档库里的单个或多个文档导出为HTML或者PDF.使用方法为:选择要导出的文档(可多选)

JS动态增加删除UL节点LI

JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);">del</a></li> <li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li>