My Little World

发表于

打印文件

关键语句：Window.print();

1
2
3
4
5
6
7
$scope.print= function(){
      $("#noprint").css('display','none');
      $("#print").css('display','block');
      window.print();
      $("#print").css('display','none');
      $("#noprint").css('display','block');
     }

一个具有打印功能的HTML代码地址

浏览器分页打印

在需要分页的地方插入语句

1
2
3
4
5
<div class="PageNext" ng-if='$index<printdata.length-1'></div>
  .PageNext
  {
      page-break-after: always;
  }

例如打印多个表格，每一张表格内容的分页由浏览器决定，但是A表格结束到B表格开始,B表格另起一页开始打印由添加的语句决定
另外，打印一张表格当内容产生多页时，将表名放在thead中可以使表名打印在该表的每一页上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div ng-repeat="line in printdata" class="row"><!--打印多张表-->
     <table width="98%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000" class="tabp">
      <thead>
        <tr><!-- 表名,合并单元格,去边框-->
            <td colspan="3" style="border: 1px solid #fff;border-bottom-color: black;">
              <span style="float: left">日期：{{date}}</span><span>{{line.line_title}}</span>
            </td>
        </tr>
        <tr>
          <th width="5%"> 序号 </th>
          <th width="13"> 分类 </th>
          <th width="82%"> 明细</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-if="line.columns.length>0" ng-repeat="item in line.columns">
          <td>{{$index+1}}</td>
          <td>{{item.column_name}}</td>
          <td style="text-align: left"><span ng-repeat="bar in item.products">{{bar.name}}x{{bar.count}}<i class="fa fa-square-o"></i>, </span></td>
        </tr>
      </tbody>
    </table>
    <hr align="center" width="98%" size="1" noshade class="NOPRINT" ng-if='$index<printdata.length-1'><!--下划线做装饰 -->
    <div class="PageNext" ng-if='$index<printdata.length-1'></div><!--每一个表结束,另起一页打印下一个表-->
  </div>
  <style type="text/css">
  	 .PageNext
  {
      page-break-after: always;
  }
  </style>

My Little World

发表于

跳转打开新页面

1.window.Open(url);
2.<a href= “” target="view_window"></a>

a 标签的 target 属性规定在何处打开链接文档。
如果在一个 a 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

本页跳转

1.window.location.href="url";
2.<a href=“”></a>
3.window.open('','_self')
My Little World

发表于

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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";
    }
My Little World

发表于

数据: 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>

My Little World

发表于

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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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>

table1

一列对多行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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>

table2

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$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);
}

效果如下
table3

固定复杂表头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
数据结构
$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
          }]
      };

效果如下
table4

My Little World

发表于

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

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

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

My Little World

发表于

下载/导出文件

1.不带参数

window.open(url);

2.带参数

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

前端处理下载数据

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

1
2
3
4
5
6
7
8
9
10
11
12
 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 下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
 },
My Little World

发表于

上传文件

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

[相关链接]（http://my.oschina.net/u/1453451/blog/502885)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$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 服务属性和方法进行上传

[相关链接]（http://blog.csdn.net/lai_xu/article/details/49535847)
[相关链接]（http://www.cnblogs.com/aikewang/p/5691723.html)

上传图片

使用 drop-master 插件

angular引入引入fileReader依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
My Little World

发表于

实心圆

.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);
}
My Little World

发表于

ps简单切图

1.用PS打开图片；
2.在视图中打开标尺，并设置单位为像素；
3.选取切图目标
方法一：直接使用选框工具选取目标
ps1
方法二：使用“新建参考线”
新建参考线可以点击菜单“视图”获得，也可以直接从标尺拽取；
ps2
4.在右侧图层部分通过点击可见不可见按钮即小眼睛，找到选取目标对应图层文件夹，鼠标右键，在菜单栏中点击“合并组”
5.如果是按参考线截取目标需要按ctrl键，同时右键单击阴影图标
6.在菜单栏中点击图像——>裁剪
7.文件——>存储为web所用格式——>PNG-8
8.www.tinypng.com进行压缩。

更换背景颜色

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