前端积累

• 想要元素控制在一行内，将各元素外都包一层div，设置每个div都float:left

• 点击文字，选中其前面的复选框，将文字置于label中，保证label的for属性值与input的id一致

  

• 获取已/未选中的所有复选框

    var checked = [];
    //已选中
    $('input[type="checkbox"]:checked').each(function(i, item){
        checked.push($(item).parent().find('label').html());
    });
    //未选中
    var unchecked = [];
    $('input[type="checkbox"]:not(:checked)').each(function(i, item){
        unchecked.push($(item).parent().find('label').html());
    });

• 获取select选中得值

$('#select'+id).find("option:selected").text()

• js中json字符串转json对象

eval(json_str)

• Bootstrape 中让table高度根据数据自适应，设置height:undefined即可
• Bootstrape表格中列数据过长导致数据显示不全，可通过以下代码设置鼠标滑过时，显示未完全展示全部信息

  {title: '产品', field: 'productname', cellStyle:formatTableUnit, formatter:paramsMatter},
  
  //用于鼠标滑过、展示全部内容（1）
  function paramsMatter(value,row,index) {
      var span=document.createElement('span');
      span.setAttribute('title',value);
      span.innerHTML = value;
      return span.outerHTML;
  }
  //用于鼠标滑过、展示全部内容（2）
  function formatTableUnit(value, row, index) {
      return {
          css: {
              "white-space": 'nowrap',
              "text-overflow": 'ellipsis',
              "overflow": 'hidden'
          }
      }
  }

   

• Bootstrape表格双击行打开详情事件

  //表格双击打开详情表格
  $('#bootstrap-table').on('dbl-click-cell.bs.table', function (e,field, value,  row, $element) {
          alert("双击打开事件");
  });

   

•  Bootstrape表格列中数据过长时自动缩略展示，鼠标浮过时显示全部

  {
     field : 'detail',
     title : '描述',
     cellStyle:formatTableUnit,
     formatter:paramsMatter
  }
  
  
  //用于鼠标滑过、展示全部内容（1）
  function paramsMatter(value,row,index) {
      var span=document.createElement('span');
      span.setAttribute('title',value);
      span.innerHTML = value;
      return span.outerHTML;
  }
  //用于鼠标滑过、展示全部内容（2）
  function formatTableUnit(value, row, index) {
      return {
          css: {
              "white-space": 'nowrap',
              "text-overflow": 'ellipsis',
              "overflow": 'hidden',
              "max-width":"150px"
          }
      }
  }

   

• 取消input记忆之前输入的内容

<input type="text" autocomplete="off"/>

• Bootstrap table td内数据过长时不自动换行

    <style type="text/css">
        .table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    </style>

• let与var的区别：以后尽量用在js中用let声明变量更为严谨
• x轴数据间隔太小,会出现隔几个显示一个横坐标，加上这个强制显示每个横坐标

• xAxis: {
      //x轴数据间隔太小,会出现隔几个显示一个横坐标，加上这个强制显示每个横坐标
      "axisLabel":{     
          interval: 0
      },
      data: []
  },