boostrap的應用

下載一個boostrap的案例，把html轉成js來寫前端頁面 在html只寫一個大容器 和引入的js css文件
1.遇到左側li標檢收縮失效
*把二級菜單摺疊代碼放到js裏 而不是單獨引用

$(function () {
    $('#side-menu').metisMenu();
});
$(function () {
    $(window).bind("load resize", function () {
        var topOffset = 50;
        var width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
        if (width < 768) {
            $('div.navbar-collapse').addClass('collapse');//摺疊
            topOffset = 100; // 2-row-menu
        } else {
            $('div.navbar-collapse').removeClass('collapse');
        }

        var height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
        height = height - topOffset;
        if (height < 1) height = 1;
        if (height > topOffset) {
            $("#page-wrapper").css("min-height", (height) + "px");
        }
    });

    var url = window.location;
    // var element = $('ul.nav a').filter(function() {
    //     return this.href == url;
    // }).addClass('active').parent().parent().addClass('in').parent();
    var element = $('ul.nav a').filter(function () {
        return this.href == url;
    })/* .addClass('active').parent(); */

    while (true) {
        if (element.is('li')) {
            element = element.parent().addClass('in').parent();
        } else {
            break;
        }
    }
});

2.給左側的li標檢加點擊事件 讓它訪問不同的接口 不用寫多處鏈接來進行跳轉
把事件委託給body或者其他父元素 但是不能在body上綁定幾百個事件

  $("body").on("click", ".nav-second-level>li", function (event){
  {   
        var type = $(this).data("info");//這樣是可以取到值的必須爲小寫 給li標籤定義data-* 這裏定義的是data-info 獲取點擊的li標檢的data-info的值
        switch (type) {
            case "device":
                url = self.config.url_device;
                break;
            case 5:
                url = self.config.url_strand;
                break;
                }
}}

4.datatables的分頁
bFilter：是否去掉搜索框
bSort：是夠禁止排序
paging：是否分頁

   $('#dataTables-example').DataTable({
      /*  "searching" : false, //去掉搜索框方法一 
       "bFilter": false,   //去掉搜索框方法二
       "bSort": false,  //禁止排序
       "paging": true,   //禁止分頁
       "info": true ,  //去掉底部文字
      "bLengthChange": true,   //去掉每頁顯示多少條數據方法
       "pageLength": 5,
     "serverSide": true,//啓用後臺分頁
       "language": {
           "paginate": {
               "next":     ">  ",
               "previous":   "<&nbsp;&nbsp;"
           },
           zeroRecords : "沒有內容",
           info : "第 _PAGE_/_PAGES_頁 共 _TOTAL_條記錄",//左下角的信息顯示，大寫的詞爲關鍵字。
           infoEmpty : "第 _PAGE_/_PAGES_頁 共 _TOTAL_條記錄",//篩選爲空時左下角的顯示。
       },   */
       //param.page = (data.startPage / data.length)+1;//當前頁碼
       //console.log(param);
       //ajax請求數據
      /*  $.ajax({
           type: "POST",
           url: url,
           cache: false,  //禁用緩存
           data: data,  //傳入組裝的參數
           dataType: "json",
           success: function (res) {
               console.log(res.msg.result);
               //setTimeout僅爲測試延遲效果
               setTimeout(function () {
                   //封裝返回數據
                   var returnData = {};
                   returnData.draw = data.state;//這裏直接自行返回了draw計數器,應該由後臺返回
                   returnData.recordsTotal = res.msg.totalNumber;//返回數據全部記錄數
                   returnData.data = res.msg.resultInfo ;//返回的數據列表
                   //console.log(returnData);
                   //調用DataTables提供的callback方法，代表數據已封裝完成並傳回DataTables進行渲染
                   //此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢
                   callback(returnData);
               }, 200);
           }
       }); 
       
   },
   //列表表頭字段
  /*  columns: [
       { "data": "utcTimeStamp" },
       { "data": "targetID" },
       { "data": "shipAnomalyClass" },
       { "data": "shipName" }, 
   ],
    columnDefs: [{
           //   指定第四列，從0開始，0表示第一列，1表示第二列……
           "targets": [4],
           "render": function(data, type, row, meta) {
               var shipName=data.shipName;
               var MMSI=data.MMSI;
              // var shipAnomalyClass=this.getClassType(data);
               var closetime= this.getTimeStrFromUnix(data.closeTime);
               var lon = this.latlngTodfmStr(data.longitudeX60W / 600000, "lng");
               var lat = this.latlngTodfmStr(data.latitudeX60W  / 600000, "lat");
               var offLineConfidenceInPercentage=data.offLineConfidenceInPercentage;
               return '<td>船名:' + shipName +'</td>'
           }
       }]  
 */
    /*  }); 

5.後臺返回的數組變成字符串

dataobj.**iList.join(",")；//後臺的list.join(",");

6.將時間戳轉換成正常時間

getTimeStrFromUnix ： function (time) {
    time = parseInt(time);
    if (isNaN(time)) {
        return "";
    }
    var newDate = new Date(time * 1000);
    // var newDate = new Date(time);
    var year = newDate.getFullYear();
    var month = (newDate.getMonth() + 1) < 10 ? "0" + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
    var day = newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate();
    var hours = newDate.getHours() < 10 ? "0" + newDate.getHours() : newDate.getHours();
    var minuts = newDate.getMinutes() < 10 ? "0" + newDate.getMinutes() : newDate.getMinutes();
    var seconds = newDate.getSeconds() < 10 ? "0" + newDate.getSeconds() : newDate.getSeconds();
    var ret = year + "-" + month + "-" + day + " " + hours + ":" + minuts + ":" + seconds;
    return ret;
};

7.將正常時間轉化成時間戳

getCusUnixTime ： function (sjstr) {
    var sjsplit = sjstr.split(" ");
    var ymd = sjsplit[0].split("-");
    var hms = sjsplit[1].split(":");
    var year = parseInt(ymd[0]);
    var month = parseInt(ymd[1]) > 0 ? parseInt(ymd[1]) - 1 : 0;
    var day = parseInt(ymd[2]);
    var hour = parseInt(hms[0]);
    var minutes = parseInt(hms[1]);
    var seconds = parseInt(hms[2]);
    var d = new Date(year, month, day, hour, minutes, seconds);
    return d.valueOf() / 1000;
}

8.讓信息在gis上聯動
*給tr加點擊事件
*獲取每個tr的data-id 放進this_data[id]數組裏 得到這一行的數據對象

var $this = $(e.currentTarget);
        var id = $this.data("id")

*創建marker 加到圖層上 maker自動打開
*創建maker時增加彈框