图片显示

发表于 2016-12-18

1.按一定大小，直接在img 标签里设置style

1	<img src="{{detaildata.image}}" name="img" style="width:32px;height: 32px;">

2.按图片原本大小自适应显示，不在容器里设置任何大小

鼠标滑过，图片自动在可视区域中心显示

<div id="divImage" style="display:none;left:50%;position:fixed;z-index:9999999;">
 <img id="imgbig" src="" alt="预览"  />
 </div>

 $scope.imgclick = function(val){
      $("#divImage")[0].style.display="";
      $("#imgbig")[0].src=val;
      var sceenwidth =  document.body.clientWidth;
      var sceenheight = document.body.offsetHeight; //获取可视区大小
      let img = new Image();
          img.src = val; //获取图片
          img.onerror = function(){
          toastr.error(" 图片加载失败，请检查url是否正确",'失败');
          return false;
         };

          if(img.complete){
           $("#divImage")[0].style.top =(sceenheight-img.height)/2+'px';
            $("#divImage")[0].style.left =(sceenwidth-img.width)/2+'px'; //根据图片大小确定中心点
          }else{
          img.onload = function(){
          img.onload=null;//避免重复加载
          }
          }
    }
    $scope.closeimg = function(){
    $("#divImage")[0].style.display="none";
    }

Angular 绑定

发表于 2016-12-18

数据: ng-model
点击: ng-click=”closeimg()”
鼠标经过: ng-mouseenter=”imgclick(item.img_url)” ng-mouseleave=”closeimg()”
显示：ng-show ng-if
禁用：ng-disabled

select 数据绑定
1.显示name,绑定id;

1	<select class="sel" ng-model="supplier.status" ng-options="item.id as item.name for item in statuss" ng-disabled="read2"></select>

2.显示title，绑定整个对象

1
2
3

<select class="col-md-1" ng-model="usertype" ng-options="item.title for item in usertypes" ng-change="usertypechange()">
<option selected value="">请选择</option>
</select>

表格处理

发表于 2016-12-18

jquery获取表格

获取行: $(“#table tr”)[val+1];
获取改行第一列: $(“#table tr”)[val+1].children[0];
表格内容：$(“#table tr td:nth-child(4)”)[val].innerText

Jquery及时获取输入数据
$(‘#username’).bind(‘input propertychange’, function () {
console.log($(“input[name=username]”).val());
var iusername = $(“input[name=username]”).val();
console.log(iusername);
});
html中用$parent.$index获取到父级的$index

多表头，一行对应多列

[相关链接]（http://www.jb51.net/web/138278.html)

<table class="table table-bordered table-hover no-footer">
<thead>
  <tr role="row" class="heading">
    <th colspan="2">基本信息</th>
    <th colspan="6">配送速度</th>
    <th colspan="6">服务态度</th>
  </tr>
  <tr role="row" class="heading">
      <th>配送员</th>
      <th>服务社区</th>
      <th>5星</th>
      <th>4星</th>
      <th>3星</th>
      <th>2星</th>
      <th>1星</th>
      <th>未评论</th>
      <th>5星</th>
      <th>4星</th>
      <th>3星</th>
      <th>2星</th>
      <th>1星</th>
      <th>未评论</th>
  </tr>
</thead>
<tbody ng-show="data.length>0">
  <tr role="row" ng-repeat="item in data track by $index">
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
  </tr>
</tbody>
</table>

一列对多行

<table class="table  table-hover table-light">
<thead>
  <tr role="row" class="heading">
    <th width="3.6%"> 订单ID </th>
    <th width="6.6%"> 社区 </th>
    <th width="6.6%"> 供应商名称 </th>
    <th width="6.6%"> 商品名称 </th>
    <th width="6.6%"> 条码 </th>
    <th width="6.6%"> 批发价 </th>
    <th width="6.6%"> 预购价 </th>
    <th width="5.6%"> 数量 </th>
    <th width="5.6%"> 收货人 </th>
    <th width="6.6%"> 联系方式 </th>
    <th width="7.6%"> 收货地址 </th>
    <th width="6.6%"> 下单时间 </th>
    <th width="6.6%"> 配送方式 </th>
    <th width="3.6%"> 状态 </th>
    <th width="14.6%"> 操作 </th>
  </tr>
</thead>
<tbody ng-if="data.length>0" ng-repeat="x in data">
  <tr role="row" class="gradeX odd" ng-repeat="y in x.orders_items">
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.order_id}}</td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.region_name}} </td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.vendor_name}} </td>
    <td><span ng-bind="y.name"></span></td>
    <td><span ng-bind="y.barcode"></span></td>
    <td><span ng-bind="y.trade_price"></span></td>
    <td><span ng-bind="y.pre_selling_price"></span></td>
    <td><span ng-bind="y.count"></span></td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.consignee}}</td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.contacts_tel}} </td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.address}} </td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.order_time}}</td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.transport_desc}} </td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> <span class="label" ng-class="x.labelClass">{{x.export_status_desc}} </span> </td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}>
     <a class="btn btn-link font-purple-seance" href="/supply/order/{{x.order_id}}" target="view_window"><i class="fa fa-eye"></i> 详情</a>
   </td>
 </tr>
</tbody>
</table>

套嵌循环，三层一列多行用js 循环拼接实现

$scope.dealdata= function(val){
  if(val.length<1){
    return
  }
  var tabstring = "";
  for(var i = 0;i<val.length;i++){
    var goodslength = 0;
    for(var m = 0;m<val[i].category.length;m++){
      goodslength+=val[i].category[m].purchase.length
    }
    var str1 = "<td rowspan="+goodslength+">"+val[i].purchase_name+"</td>";
     for(var j = 0;j<val[i].category.length;j++){
        var str2 = "";
        if(j == 0){
          str2 = str1 + "<td rowspan="+val[i].category[j].purchase.length+">"+val[i].category[j].category_name+"</td>";
        }else{
          str2 = "<td rowspan="+val[i].category[j].purchase.length+">"+val[i].category[j].category_name+"</td>";
        }
        for(var k = 0;k<val[i].category[j].purchase.length;k++){
          var str3 = "";
          var item = val[i].category[j].purchase[k];
          if(k == 0){
            str3 = str2 + "<td>"+item.product_name+"</td>"+
                          "<td>"+item.product_num+"</td>"+
                          "<td>"+item.unit+"</td>"+
                          "<td>"+item.price+"</td>"+
                          "<td>"+item.total_amount+"</td>"
          }else{
            str3 = "<td>"+item.product_name+"</td>"+
                    "<td>"+item.product_num+"</td>"+
                    "<td>"+item.unit+"</td>"+
                    "<td>"+item.price+"</td>"+
                    "<td>"+item.total_amount+"</td>"
          }
          tabstring += "<tr>" + str3 + "</tr>"
        }
     }
  }
  $("#table").html(tabstring);
}

效果如下

固定复杂表头

<table id="tab" cellpadding="1" cellspacing="1" border="1" align="center">
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">社区</th>
<th colspan="4" ng-repeat="x in detaildata2.title">{{x}}</th>
</tr>
<tr>
<th>订单数</th>
<th>订单金额</th>
<th>客单价</th>
<th>累计新注册用户数</th>
<th>订单数</th>
<th>订单金额</th>
<th>客单价</th>
<th>累计新注册用户数</th>
<th>订单数</th>
<th>订单金额</th>
<th>客单价</th>
<th>累计新注册用户数</th>
</tr>
<tr>
  <th colspan="2">社区合计</th>
  <th ng-repeat="x in detaildata2.total">{{x}}</th>
</tr>
<tr ng-repeat="x in detaildata2.info">
<th>{{x.id}}</th>
<th>{{x.society}}</th>
<th>{{x.orders}}</th>
<th>{{x.ordersamount}}</th>
<th>{{x.price}}</th>
<th>{{x.users}}</th>
<th>{{x.orders1}}</th>
<th>{{x.ordersamount1}}</th>
<th>{{x.price1}}</th>
<th>{{x.users1}}</th>
<th>{{x.orders2}}</th>
<th>{{x.ordersamount2}}</th>
<th>{{x.price2}}</th>
<th>{{x.users2}}</th>
</tr>
<tr>
</table>
<style type="text/css">
th
{
    text-align:center;
}
</style>

数据结构
$scope.detaildata2 ={
        title:[0,1,2],
        total:[1,2,3,4,5,6,7,8,9,0,11,22],
        info:[{
          id:0,
          society:"社区1",
          orders:0,
          ordersamount:50,
          price:11,
          users:35,
          orders1:0,
          ordersamount1:50,
          price1:11,
          users1:35,
          orders2:0,
          ordersamount2:50,
          price2:11,
          users2:35
          },{
          id:1,
          society:"社区2",
          orders:0,
          ordersamount:50,
          price:11,
          users:35,
          orders1:0,
          ordersamount1:50,
          price1:11,
          users1:35,
          orders2:0,
          ordersamount2:50,
          price2:11,
          users2:35
          }]
      };

效果如下

表单禁用

发表于 2016-12-17

var checkk = $(“#bossstorechose input”);
checkk.setAttribute(“disabled”,”disabled”);

$(“#unity button”).attr(“disabled”, true);

HTML添加angular属性ng-diabled:”val”;
js赋值变量值为true val=true;

上传

发表于 2016-12-17

上传文件

方式一用http方法，但需要写获取文件的指令

$scope.fileupload = function(){
       var  fd = new FormData();
        //var file = document.querySelector('input[type=file]').files[0];
       console.log($scope.fileItem);
       fd.append('import_file', $scope.fileItem.import_file);
        console.log(fd)
        $http({
            method:'POST',
            url:"http://172.16.0.207/py/erp/v1/credit_sell/import_files/",
           //url:"http://172.16.7.184:8000/py/erp/v1/credit_sell/import_files/",
            data: fd,
            headers: {'Content-Type':undefined},
            transformRequest: angular.identity
             })
            .success( function ( response )
                     {
                      if(response.statusCode===0){
                     //上传成功的操作
                     alert("uplaod success");
                   }else{
                    console.log(response.msg)
                   }
                     });
   }

方式二用angular-file-upload 插件，利用FileUploader 服务属性和方法进行上传

上传图片

使用 drop-master 插件

angular引入引入fileReader依赖

JS:
$scope.getFile = function () {
  console.log($scope.file);
   var postData = {
      fileName: $scope.file
    };
 fileReader.readAsDataUrl($rootScope.settings.url + "UPLOADURL", postData)
 .success(function(response) {
          $scope.detaildata.image=response;
  });
 };

HTML:
<div class="col-md-4 fileinput">
<img src="{{detaildata.image}}" name="img" style="width:32px;height: 32px;">
<span class="btn red btn-outline btn-file">
<span class="fileinput-new"> 重新上传 </span>
<input type="hidden">
<input type="file" file-model="myFile" name="..." accept="image/*"> 
</span>
</div>

下载文件

发表于 2016-12-17

下载/导出文件

1.不带参数

window.open(url);

2.带参数

window.open(".../?para1="+para1val+"&para2="+para2val);

前端处理下载数据

H5 chrome支持；IE 11;IE edge 不支持

 download(filename, text) {
        var element = document.createElement('a')
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
        element.setAttribute('download', filename)
      
        element.style.display = 'none'
        document.body.appendChild(element)
      
        element.click()
      
        document.body.removeChild(element)
}

使用blob 下载

download(filename, text) {
    var aLink = document.createElement('a')
    var blob = new Blob([text], {
      type: 'text/plain'
    })
    aLink.download = filename
    aLink.href = URL.createObjectURL(blob)
    if(!!window.ActiveXObject || 'ActiveXObject' in window){ //兼容IE
      window.navigator.msSaveOrOpenBlob(blob, filename)
    }else {
      aLink.click()
    }
    URL.revokeObjectURL(blob)
    aLink = null
    blob = null
 },

用css画圆

发表于 2016-12-17

实心圆

.circle{
    width: 16px;
    height: 16px;
    background-color: #fe6000;
    -webkit-border-radius: 8px;
    -moz-border-radius:8px;
    border-radius:8px;
    position: absolute;
    margin-top: 4px;
}

空心圆

.circle1{
    color:#fe6000;
    font-size: 14px;
    text-align: center;
    width: 14px;
    height: 14px;
    line-height: 14px;
    border:1px solid #fe6000; 
    border-radius:7px;
    position: absolute;
    margin-top: 4px   
}

同心圆可利用边框

.noticebtn{
    width: 90px;
    height: 90px;
    border-radius: 55px;
    -webkit-border-radius: 55px;
    background-color: rgb(255,106,0);
    border:10px solid  rgba(255,106,0,.5);
    background-clip:content-box;
    color: #fff;
    margin: 20px auto;
    text-align: center;
    line-height: 90px;
}

.noticebtn.noticeover{
    background-color: rgb(130,223,20);
    border:10px solid  rgba(130,223,20,.5);
}

ps相关

发表于 2016-12-17

ps简单切图

1.用PS打开图片；
2.在视图中打开标尺，并设置单位为像素；
3.选取切图目标
方法一：直接使用选框工具选取目标

方法二：使用“新建参考线”
新建参考线可以点击菜单“视图”获得，也可以直接从标尺拽取；

4.在右侧图层部分通过点击可见不可见按钮即小眼睛，找到选取目标对应图层文件夹，鼠标右键，在菜单栏中点击“合并组”
5.如果是按参考线截取目标需要按ctrl键，同时右键单击阴影图标
6.在菜单栏中点击图像——>裁剪
7.文件——>存储为web所用格式——>PNG-8
8.www.tinypng.com进行压缩。

更换背景颜色

1.打开图片
2.图像模式选择RGB颜色
3.在橡皮擦那里选择“魔术橡皮擦工具” ，点击图片背景
4.新建图层，将前景色选择为待更改的颜色，
5.选择油漆桶工具，点击在新建的图层上
6.将图层1移到图层0下方
7.导出：文件，存储为web格式….

angular.forEach

发表于 2016-12-17

对于多层嵌套的数据结构，使用for循环无法循环到里层数据，这时改用foreach行得通
angular.forEach($scope.data, function(data){
angular.forEach(data.purchase, function(item){
item.price = item.price.replace(/[^\d.]/g, ‘’);
});
});

转换

发表于 2016-12-17

日期/时间戳

时间戳转换日期

日期 = new Date(时间戳1000);
再根据需求转换不同形式
例：
var timestamp = ‘1425553097‘;
var d = new Date(timestamp 1000); //根据时间戳生成的时间对象
var date = (d.getFullYear()) + “-“ +
(d.getMonth() + 1) + “-“ +
(d.getDate()) + “ “ +
(d.getHours()) + “:” +
(d.getMinutes()) + “:” +
(d.getSeconds());
date就是”年-月-日时:分:秒”形式

日期转换时间戳

var val1 = 日期变量.replace(/-/g,’/‘);
var val2 = new Date(val1);
var val3 = date.getTime().toString();
var 时间戳1 = String(val3.substr(0,10)); ###转换成字符串形式

相当于时间戳 = (new Date(日期.replace(/-/g,’/‘)).getTime().toString()).substr(0, 10); ###数字形式

时间戳1的分秒转换时为00:00:00,如果时分秒取 23:59:59,则

var 时间戳2 = String(parseInt(时间戳1)+86399);

日期增加1天

经常会遇到将现在日期增加1天的需求，解决办法就是
1.将当前时间转化时间戳数字形式
2.将时间戳加一天的秒数86400
3.再将时间戳转化成”年-月-日”日期形式

//转换时间戳
$scope.timestamp = function(val){
  var temp = "";
  if(val != ""){
   temp = (new Date(val.replace(/-/g,'/')).getTime().toString()).substr(0, 10);
 }
 if(val ==""){
   temp = "";
 }
 return temp;
}
//增加1天
var temp = String(parseInt($scope.timestamp(待增加日期变量))+86400); 
//再转换成日期
var d=new Date(temp * 1000);
var date = (d.getFullYear()) + "-" +
(d.getMonth() + 1) + "-" +
(d.getDate());
console.log(date);

//计算时间间隔
var begintime = Date.parse(new Date($scope.detaildata.start_time + " 00:00:00"));
var endtime = Date.parse(new Date($scope.detaildata.end_time+" 23:59:59"));
var day = Math.floor(Math.abs(endtime - begintime) / 1000 / 60 / 60 /24 + 0.5);//间隔天数

获取当天年月日,星期

var date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();
if (month >= 1 && month <= 9) {
    month = "0" + month;
}
if(day<10){
  day='0'+day;
}
var daytime = date.getFullYear()+'-'+month+'-'+day;

//根据日期获取星期，星期天是0，其他正常
var week = new Date(daytime).getDay();

比较日期和时间先后

 var date1 = start_date.replace(/\-/gi,"/");
var date2 = end_date.replace(/\-/gi,"/");
var time1 = new Date(date1).getTime();
var time2 = new Date(date2).getTime();
if(time1 > time2){
   console.log('开始日期大于结束日期,请先修改!');
   return
}
 var a = '01/10/2007 ' + start_time;
 var b = '01/10/2007 ' + end_time;
 var d = new Date(a);
 var e = new Date(b);
 if(d>=e){
    console.log('开始时间大于等于结束时间,请先修改!');
    return
  }

一个利用js生成的日历页面

json/字符串

json数据转换成字符串 JSON.stringify(val);
字符串转换成json数据 JSON.parse(val);

数组/字符串

数组转字符串

需要将数组元素用某个字符连接成字符串，示例代码如下：
var a, b;
a = new Array(0,1,2,3,4);
b = a.join(“-“);

字符串转数组

实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回，示例代码如下：
var s = “abc,abcd,aaa”;
ss = s.split(“,”);// 在每个逗号(,)处进行分解。

1 2	//获取字符串中数字包括小数点 str = str.replace(/[^\d\.]/g, '');

js取整

Math.ceil(val)向上取整
Math.floor(val)向下取整
Math.round(val)四舍五入

鼠标滑过，图片自动在可视区域中心显示

jquery获取表格

多表头，一行对应多列

一列对多行

套嵌循环，三层一列多行用js 循环拼接实现

固定复杂表头

上传文件

方式一 用http方法，但需要写获取文件的指令

方式二 用angular-file-upload 插件，利用FileUploader 服务属性和方法进行上传

上传图片

使用 drop-master 插件

angular引入引入fileReader依赖

下载/导出文件

1.不带参数

2.带参数

前端处理下载数据

H5 chrome支持；IE 11;IE edge 不支持

使用blob 下载

ps简单切图

更换背景颜色

日期/时间戳

时间戳转换日期

日期转换时间戳

日期增加1天

获取当天年月日,星期

比较日期和时间先后

json/字符串

数组/字符串

数组转字符串

字符串转数组

js取整

方式一用http方法，但需要写获取文件的指令

方式二用angular-file-upload 插件，利用FileUploader 服务属性和方法进行上传