进击的前端（三）

一.页面table表格实现上下移动换行

demo1：用css3设计出向上向下的小箭头


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
   
   .arrow-up {
  display: inline-block;
  vertical-align: top;
  border-bottom: 4px solid #dd0000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  margin-top: 5px;
   }
    .arrow-down {
   display: inline-block;
  vertical-align: top;
  border-top: 4px solid #dd0000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  margin-top: 5px;
   }
   .arrow-left {
 display: inline-block;
  vertical-align: top;
  border-right: 4px solid #dd0000;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  content: "";
  margin-top: 5px;
   }
    .arrow-right {
 display: inline-block;
  vertical-align: top;
  border-left: 4px solid #dd0000;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  content: "";
  margin-top: 5px;
   }
 
  </style>
</head>
<body>
 
<button>向上<span class="arrow-up"></span></button>
<button>向下<span class="arrow-down"></span></button>
<button>向左<span class="arrow-left"></span></button>
<button>向右<span class="arrow-right"></span></button>
 
</body>
</html>

demo2：后台获取id来更新sort字段（只将两个sort字段更替）实现表格行上移下移和置顶

//设置上移
	var $up = $(".up")
    $up.click(function() {
        var $tr = $(this).parents("tr");//获取父类tr元素
        var $trr = $(this).parent().parent();//获取distributorsId
        
        var prevId = $trr.find("td:eq(0)").text();//获取当前id
        var nowId = $trr.prev().find("td:eq(0)").text();//获取上一个id
        if ($tr.index() != 0) {
			$tr.fadeOut().fadeIn();//淡入淡出
			$tr.prev().before($tr);
			
			//更新table序号
			updateSort(nowId,prevId);
        } else {
        	confirm("已经到达顶部了。。。。。。。。。。。");
        }
    });
	
	//设置下移
    var $down = $(".down");
    var len = $down.length;
    $down.click(function() {
        var $tr = $(this).parents("tr");
        var $trr = $(this).parent().parent();//获取distributorsId
        
        var nowId = $trr.find("td:eq(0)").text();//获取当前id
        var nextId = $trr.next().find("td:eq(0)").text();//获取下一个id
        if ($tr.index() != len - 1) {
			$tr.fadeOut().fadeIn();
            $tr.next().after($tr);
            
            updateSort(nowId,nextId);
        } else {
        	confirm("已经到达底部了。。。。。。。。。。。");
        }
    });

function updateSort (nowId,pndaId) {
	var jsonData = {nowId:nowId,pndaId:pndaId};
	$.ajax({
		url:[[@{/distribution/updateSort}]],
		data: JSON.stringify(jsonData),
		type: "POST",
		contentType: 'application/json',
		success:function(data){
			if(data.status){
				//异步加载
				find();
			}else{
				alert(data.message);
			}
		}
	});
}

二.将后台传来的日期字符串格式化

//日期格式化
function dateForm(data) {
	var newDate = new Date(data);
	var year = newDate.getFullYear();
	var month = (newDate.getMonth() + 1);
	month = (month < 10)?('0' + month):month;
	var day = newDate.getDate();
	day = (day < 10)?('0' + day):day;
	var hours = newDate.getHours();
	hours = (hours < 10)?('0' + hours):hours;
	var minutes = newDate.getMinutes();
	minutes = (minutes < 10)?('0' + minutes):minutes;
	var seconds = newDate.getSeconds();
	seconds = (seconds < 10)?('0' + seconds):seconds;
	
	var publishTime = year + '-' + month + '-' + day + ' ' + 
					  hours + ':' + minutes + ':' + seconds;
	return publishTime;
}

三.使用ajax来提交from表单(上传文件)

（1）HTML页面

<form method="post" enctype="multipart/form-data" id="uploadFrom">

</from>

（2）JS脚本

var formFile = new FormData($("#uploadFrom")[0]);
//		formFile.append("pageIndex",page);

$.ajax({
			type: 'POST',
			url: url,
			data: formFile,
		    processData: false,//用于对data参数进行序列化处理 这里必须false
		    contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置
		    beforeSend: function () { //在用户提交之前操作，用户体验
	        	
	        },
			success: function(data){

            }
});

进击的前端（三）

猜你喜欢