bootstrap动态生成层级ul-li 新闻预览 常用方法

 <div class="row" id="add-withinfosortId-row" style="display: none">
     <div class="col-md-12" id="add-withinfosortId-divId"></div>
 </div>
 <div class="sticky-header">
     <div class="mail-box">
         <aside class="mail-nav mail-nav-bg-color" id="infosorListId-aside">
             <div class="mail-nav-body">
                 <div class="panel">
                     <div id='div_menu'>
                         <ul id="infosort"></ul>
                     </div>
                 </div>
             </div>
         </aside>
         <div class="col-lg-12" id="section-mail-list-table">
             <header class="panel-heading custom-tab ">
                 <ul class="nav nav-tabs">
                     <li class="active" id="section-mail-list-li"><a
                         href="#section-mail-list" data-toggle="tab">新闻预览</a></li>
                 </ul>
             </header>
             <div class="panel">
                 <div class="panel-body">
                     <div class="col-lg-12">
                         <table id="infolinkTableId" class="table table-bordered"></table>
                     </div>
                 </div>
             </div>
         </div>

     </div>
 </div>

 <!-- 预览页面 -->
 <div aria-hidden="true" data-backdrop="static"
     aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal"
     class="modal fade"></div>

 <script th:inline="javascript">
 /*<![CDATA[*/
     var  infosortId=[[${infosortId}]];
     var  infolinkById;
      var result = "";
    //页面加载
     $(function() {
          //获取已有的栏目
           initInfoSortTreeUsed();

     });
    //动态生成层级ul-li
       function showall(menu_list, parent) {
       parent.append("<li ><a href='###' onclick=showInfolink('"+menu_list.id+"')>"+menu_list.infosortName+"</a>");
        if(menu_list.children.length>0){
               parent.append("<ul id="+menu_list.id+">");
             $.each(menu_list.children, function(i,val){
             var parent_this=$('#'+menu_list.id);
             showall(val,parent_this);
             });
               parent.append("</ul></li>");
           }else{
               parent.append("</li>");
           }
     } 

   /* end */
        function initInfoSortTreeUsed(){
            $.ajax({
                  url : "infosort/infosort-ztree-preview.json",
                  dataType : "json",
                  data : {"infosortId":infosortId},
                  type : "POST",
                  success : function(result) {
                     var data=result.ajaxResultJson.obj;
                     console.log(result);
                            var num=$("#infosort");
                            infolinkById =data.id;
                         showinfolinkTableId(infolinkById);

                            showall(data,num);
                      },
                 error : function(result) {
                 }
             }); 

        };

     function   showInfolink(id){

         showinfolinkTableId(id);
         $('#infolinkTableId').bootstrapTable('refresh');
     } 

     //1.初始化Table
     function showinfolinkTableId(id){
         infolinkById=id;
       $('#infolinkTableId').bootstrapTable({
           url: 'infosort/getInfoLinkByInfosortId.json',
           method: 'post',                      //请求方式（*）
           dataType:'json',
           contentType: "application/x-www-form-urlencoded",
           toolbar: '#toolbar',                //工具按钮用哪个容器
           undefinedText: "*",//当数据为 undefined 时显示的字符
           striped: true,                      //是否显示行间隔色
           cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
           pagination: true,                   //是否显示分页（*）
           pageSize: 5,  //每页显示的记录数
           pageNumber:1, //当前第几页
           pageList: [5,10,15,20,25],  //记录数可选列表
           sortable: false,                     //是否启用排序
           sortOrder: "asc",                   //排序方式
           sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
           ////查询参数,每次调用是会带上这个参数，可自定义
           queryParams: queryParams,
           search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
           strictSearch: false,
           showColumns: true,                  //是否显示所有的列
           showRefresh: false,                  //是否显示刷新按钮
           minimumCountColumns: 4,             //最少允许的列数
           responseHandler:responseHandler,
          // height: 600,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
           uniqueId: "id",                     //每一行的唯一标识，一般为主键列
           showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
           cardView: false,                    //是否显示详细视图
           detailView: false,                   //是否显示父子表
           columns: [{
               checkbox : true
             }, {
                 field : 'id',
                 title : 'ID',
                 visible : false
             },{
               field: 'infolinkTitle',
               title: '标题'
           }, {
               field: 'infolinkType',
               title: '类型',
               formatter:function (value,row,index){
                   var type=row.infolinkType;
                   var str ="";
                   if(type==0){str="编辑组编辑"};
                   if(type==1){str="普通链接"};
                   if(type==2){str="上传附件"};

                   return str;
               }
           },{
               field: 'keyword',
               title: '关键字'

           },{
               field: 'summary',
               title: '摘要'
             },
           {
               field: 'infolinkState',
               title: '状态',
               formatter:function (value,row,index){
                   var state=row.infolinkState;
                   var str ="";
                   if(state==0){value="未发布";
                        text = '<span style="color:#FF6600">'+value+'</span>'
                      };
                     if(state==1){value="发布";
                        text = '<span style="color:#00CCFF">'+value+'</span>'
                       };
                   return text;
               }
           },
            {
               field: 'modifiedDate',
               title: '更新时间'

           },{
                  title: '操作',
                 field: 'id',
                 formatter:function(value,row,index){
                     var id=row.id;
                     var infolinkType =row.infolinkType;
                     var url=row.infolinkUrl;
                     var e;
                          e='<a href ="#" title="预览"><span class="fa fa-laptop" onclick="previewInfolink(\''+id+'\',\''+infolinkType+'\',\''+url+'\')"></span></a>&nbsp;&nbsp;';
                       return e;
                 },
                events: 'operateEvents'
          }]
   });
     };
       function responseHandler(res) {
              if (res) {
                  return {
                      "rows" : res.list,
                      "total" :res.total
                  };

              } else {
                  return {
                      "rows" : [],
                      "total" : 0
                  };
              }
          };

 //设置查询条件，把分页，查询条件，排序等信息拼接成一个models字符串对象传递至后台
         function queryParams(params) {

             var str={"page":this.pageNumber,
                         "pageSize":this.pageSize,
                         "filter":{"filters":[  {field:"infosortId",value:infolinkById} , {field:"infolinkState",value:1} ]},
                                    "sort":[{"field":"id","dir":"ASC"}]
                         }
            var baseData = JSON.stringify(str);

            var param = {
                      models :baseData
                  }
             return param;
         };

         //预览
         function previewInfolink(id,infolinkType,url){
             if("1" == infolinkType){
               window.location.replace("http://"+url);
             }else{
                 load('cms/infolink-preview-byinfosort?id='+id+'&infosortId='+infosortId);
             }
         };

 /*]]>*/
 </script>

-------------------------------------------------------------------------
其他方法备注:

1.$('#infolinkTableId').bootstrapTable('destroy');//刷新必须要添加这个销毁，否则新增、修改、查看的切换可编辑列表中的数据可能加载出现问题。
  var str =$("#infolinkTableId").bootstrapTable('getData');//获取表格的所有内容行

2. 隐藏列
 $('#tableName').bootstrapTable('hideColumn', '列名');
 或者  {title: '附件路径',field: 'attachmenturl',align: 'center',visible: false},