PC端-拖动表格组件

最新推荐文章于 2024-08-29 15:10:00 发布

原创最新推荐文章于 2024-08-29 15:10:00 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

8 篇文章

订阅专栏

本文档详细介绍了如何在PC端创建一个可拖动的表格组件，涉及到CSS样式用于布局和交互效果，JS代码用于处理拖动事件及表格元素的动态调整，以及HTML代码构建基本的表格结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS样式

/* 表格组件样式 */
.hide{display: none !important;}
.scroll-table-box {
	position: relative;
	overflow: hidden;
}
.scroll-table-head {
	width: 100%;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 98;
}
.scroll-table-body {
	max-height: 400px;
  overflow: hidden;
  position: relative;
}
.scroll-table-box .redDot{
	font-size: 13px;
	color: red;
	position: absolute;
	left: 1px;
	top: 7px;
}
.scroll-table-fixed-left {
	height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 98;
  box-shadow: 0 0 10px -2px;
}
.scroll-table-fixed-left .scroll-table-fixed-left-head {
	position: relative;
}
.scroll-table-fixed-left .scroll-table-fixed-left-body {
	position: relative;
  overflow: hidden;
}
.scroll-table-box .tb1{
	width: 100%; 
	table-layout: fixed;
}
.scroll-table-box .tb1 th,.scroll-table-box .tb1 td{
	text-align: center;
}
.scroll-table-box .tb1 th {
  line-height: 20px;
	box-sizing: border-box;
}
.scroll-table-box .tb1 td{
	padding: 8px 3px;
	box-sizing: border-box;
}
.scroll-table-box .tb1 td .td_div{
  line-height: 16px;
	text-align: center;
	white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
}
.scroll-table-box .tb1 td .td_div .td_div_text{
	display: inline-block;
	font-size: 12px;
	*display: inline;
	*zoom: 1;
}
.scroll-table-box .tb1 td .td-input {
	width: 60px;
	color: red;
	text-align:center;
	text-indent: 0px;
	border: 1px solid #A5A5A5;
	box-sizing: border-box;
}
.scroll-table-box .tb1 td .td_div input{
  display: inline-block;
  width: 98%;
  text-align: center;
  font-size:12px;
  *display: inline;
  *zoom: 1;
}
.scroll-table-box .tb1 .bug-tr td{
	border-bottom: none;
}
.scroll-table-box .tb1 .no-data-tr td{
	border-bottom: none;
}

.scroll-bar-box {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10px;
    padding: 0 22px;
    background-color: #d6d6d6;
    opacity: .8;
    box-sizing: border-box;
    z-index: 99;
}
.scroll-bar-box .left-arrow{
    width: 20px;
    height: 10px;
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 0;
    background: #fff;
}
.scroll-bar-box .right-arrow{
    width: 20px;
    height: 10px;
    position: absolute;
    right: 0px;
    top: 0px;
    margin: 0;
    background: #fff;
}
.arrow {
    display: inline-block;
		margin: 0;
    font-size: 22px;
    background: transparent;
    *display: inline;
    *zoom: 1;
}
.scroll-bar-box .left-arrow .icon-zuojiantoushixinxiao,
.scroll-bar-box .right-arrow .icon-youjiantoushixinxiao{
    width: 100%;
    height: 10px;
    line-height: 10px;
}
.scroll-bar {
    position: absolute;
    left: 22px;
    top: 0;
    height: 100%;
    background-color: #848484;
    cursor: pointer;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.scroll-bar-box:hover {
		opacity: .9;
}
.v-scroll-bar-box {
		position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 100%;
    padding: 22px 0px;
    background-color: #d6d6d6;
    opacity: .8;
    box-sizing: border-box;
    z-index: 99;
}
.v-scroll-bar-box .up-arrow{
    width: 10px;
    height: 20px;
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 0;
    background: #fff;
}
.v-scroll-bar-box .down-arrow{
    width: 10px;
    height: 20px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    margin: 0;
    background: #fff;
}
.v-scroll-bar-box .up-arrow .icon-shangjiantoushixinxiao,
.v-scroll-bar-box .down-arrow .icon-xiajiantoushixinxiao{
    width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    left: -6px;
}
.v-scroll-bar {
    position: absolute;
    left: 0;
    top: 22px;
    width: 100%;
    height:50px;
    background-color: #848484;
    cursor: pointer;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.v-scroll-bar-box:hover {
		opacity: .9;
}
.no_border_top th,
.no_border_top td{
		border-bottom: none;
}

JS代码

/* move.js */
function transform(el,attr,val){
	if(!el.transform){
		el.transform = {
		};
	}
	if(val === undefined){
		return el.transform[attr];
	}
	el.transform[attr] = val;
	var str = "";
	for(var s in el.transform){
		switch(s){
			case "rotate":
			case "rotateX":
			case "rotateY":
			case "rotateZ":
			case "skewX":
			case "skewY":
				str += s +"("+el.transform[s]+"deg) ";
				break;
			case "scale":
			case "scaleX":
			case "scaleY":
				str += s +"("+el.transform[s]+") ";
				break;
			case "translateX":
			case "translateY":
			case "translateZ":
				str += s +"("+el.transform[s]+"px) ";
				break;	
		}
	}
	el.style.WebkitTransform = el.style.transform = str;
}
 
function css(el,attr,val){
	var transformAttr = ["rotate","rotateX","rotateY","rotateZ","skewX","skewY","scale","scaleX","scaleY","translateX","translateY","translateZ"];
	for(var i = 0; i < transformAttr.length; i++){
		if(attr == transformAttr[i]){ //如果 attr 等transform其中一个值就代表用用户想要操作的是 transform
			return transform(el,attr,val);
		}
	}
	if(val === undefined){
		val = getComputedStyle(el)[attr];
//		console.log(val);
		val = parseFloat(val);
		return val;
	}
	if(attr == "opacity"){
		el.style[attr] = val;
	} else {
		el.style[attr] = val + "px";
	}
}
/*固定表格滑动脚本开始*/
function tableSwiperFunc(init) {
    /*表格主滑动区域*/
    var wrap_body = init.wrap_body;
    var scroll_body = init.scroll_body;
    var wrap_body_width = 0;
    var wrap_body_height = 0;
    var scroll_body_width = 0;
    var scroll_body_height = 0;
    /*表格头部区域*/
    var wrap_head = init.wrap_head;
    var scroll_head = init.scroll_head;
    /*表格左边固定区域*/
    var left_wrap_body = init.left_wrap_body;
    var left_scroll_body = init.left_scroll_body;
    
    transform(scroll_body, "translateX", 0);
    transform(scroll_body, "translateY", 0);
    transform(scroll_head, "translateX", 0);
    transform(left_scroll_body, "translateY", 0);
    
    /* 竖向滚动条 */
    var verticalBarHeight = 0; // 设置竖向滚动条的初始高度
    var verticalBoxHeight = 0; // 设置竖向滚动条外层父级的高度
    var verticalBarRange = []; // 竖向滚动条滚动范围
    var verticalAreaRange = []; // 竖向区域滚动范围
    function setVerticalBar() {
        wrap_body_height = $(wrap_body).height();
        scroll_body_height = $(scroll_body).height();
        verticalBoxAllHeight = wrap_body_height - 7; // 包括内边距
        verticalBoxHeight = verticalBoxAllHeight - 44; // 可滑动的区域高度
      	if (scroll_body_height <= wrap_body_height) {
      			verticalBarHeight = 0;
      			$(init.vertical_bar).parent().css({height: '0', visibility: 'hidden'});
    		} else {
    				verticalBarHeight = (wrap_body_height/scroll_body_height)*verticalBoxHeight;
    				$(init.vertical_bar).parent().css({height: verticalBoxAllHeight, visibility: 'visible'});
    		    if (verticalBarHeight<50) {
    		    		verticalBarHeight = 50;
    				}
    		}
        $(init.vertical_bar).height(verticalBarHeight);
        verticalBarRange = [22,verticalBoxHeight - verticalBarHeight + 22];
      	verticalAreaRange = [0,scroll_body_height - wrap_body_height];
		}
    setVerticalBar();
  	//竖向滚动条滚动事件
    var startY = 0;
    var endY = 0;
    var top = 22;
    var elemTargetY = 0;
    function down1(e){
    		setVerticalBar();
    		startY = e.clientY;
    		top = $(init.vertical_bar).position().top;
        function move(e){
        		var newTop = 0;
        		endY = e.clientY;
        		newTop = top + endY - startY;
            if (newTop > verticalBarRange[1]) {
                newTop = verticalBarRange[1];
            } else if (newTop < verticalBarRange[0]) {
                newTop = verticalBarRange[0];
            }
            $(init.vertical_bar).css({
                top: newTop
            });
            elemTargetY = verticalAreaRange[1] * ((newTop-verticalBarRange[0]) / (verticalBarRange[1]-verticalBarRange[0]));
            transform(scroll_body, "translateY", -elemTargetY);
            transform(left_scroll_body, "translateY", -elemTargetY);
         }
           
       	function up(){
           $(document).off('mousemove');
           $(document).off('mouseup');
           //释放捕获
           init.vertical_bar.releaseCapture && init.vertical_bar.releaseCapture();
        }
       	$(document).on('mousemove',move);
       	$(document).on('mouseup',up);
        //设置捕获
        init.vertical_bar.setCapture && init.vertical_bar.setCapture();
        //阻止浏览器默认事件
        e.preventDefault && e.preventDefault();
        return false;
    }
    $(init.vertical_bar).on('mousedown',down1);
  	//竖向滚动条滚轮事件
    $('.scroll-table-box').on("mousewheel DOMMouseScroll", function (e) {
				var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1))||
			              (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); 
				var dir = '';
				top = $(init.vertical_bar).position().top;
				if (scroll_body_height <= wrap_body_height) {
						return;
				}
		   	if (delta != 0) {
		   			dir = delta > 0 ? 'Up' : 'Down';
		   	    if (dir == 'Up') {
			   	    	top -= 10;
			   	    	if (top<verticalBarRange[0]) {
										top = verticalBarRange[0];
								}
		   	    } else {
			   	    	top += 10;
			   	    	if (top>verticalBarRange[1]) {
										top = verticalBarRange[1];
								}
		   	    }
		   	 		$(init.vertical_bar).css({
                top: top
            });
            elemTargetY = verticalAreaRange[1] * ((top-verticalBarRange[0]) / (verticalBarRange[1]-verticalBarRange[0]));
            transform(scroll_body, "translateY", -elemTargetY);
            transform(left_scroll_body, "translateY", -elemTargetY);
		   	}
		   	return false;
		});
  	//竖向滚动条点击滚动区域自动定位功能
    $('.v-scroll-bar-box').on('click', function(e) {
    		var clickPos = e.clientY + $(window).scrollTop() - $(this).offset().top;
    		console.log(clickPos);
    		var barTop = parseInt($(init.vertical_bar).css('top'));
    		var newTop = 0;
    		//确定新的滚动条top值
    		if (clickPos <= barTop) {
    				newTop = clickPos;
    				if (clickPos<verticalBarRange[0]+30) {
    					newTop = verticalBarRange[0];
						}
				} else {
						newTop = clickPos - verticalBarHeight;
						if (clickPos - verticalBarHeight>verticalBarRange[1]-30) {
    						newTop = verticalBarRange[1];
						}
				}
				if (e.target == $(this)[0]) {
					$(init.vertical_bar).css({
							transition: 'top .3s',
							top: newTop
					});
					$(left_scroll_body).css({
							transition: 'transform .3s'
					});
					$(scroll_body).css({
							transition: 'transform .3s'
					});
					elemTargetY = verticalAreaRange[1] * ((newTop-verticalBarRange[0]) / (verticalBarRange[1]-verticalBarRange[0]));
          transform(scroll_body, "translateY", -elemTargetY);
          transform(left_scroll_body, "translateY", -elemTargetY);
          setTimeout(function() {
        	  $(init.vertical_bar).css({
								transition: 'none',
						});
						$(left_scroll_body).css({
								transition: 'none'
						});
						$(scroll_body).css({
								transition: 'none'
						});
					}, 300);
				}
				
		});
  	
    /* 横向滚动条 */
    var horizontalBarWidth = 0; // 设置横向滚动条的初始宽度
    var horizontalBoxWidth = 0; // 设置横向滚动条外层父级的初始宽度
    var horizontalBarRange = []; // 横向滚动条滚动范围
    var horizontalAreaRange = []; // 横向区域滚动范围
  	function setHorizontalBar() {
  			wrap_body_width = $(wrap_body).width();
  	    scroll_body_width = $(scroll_body).width();
	  	  horizontalBoxAllWidth = wrap_body_width + 5; // 包括内边距
		  	horizontalBoxWidth = horizontalBoxAllWidth - 44; // 可滑动的区域宽度
  	  	if (scroll_body_width <= wrap_body_width) {
  	  			horizontalBarWidth = 0;
						$(init.horizontal_bar).parent().css({width: '0', visibility: 'hidden'});
				} else {
						horizontalBarWidth = (wrap_body_width/scroll_body_width)*horizontalBoxWidth;
						$(init.horizontal_bar).parent().css({width: horizontalBoxAllWidth, visibility: 'visible'});
		  	    if (horizontalBarWidth<50) {
		  	    		horizontalBarWidth = 50;
		  			}
				}
  	    $(init.horizontal_bar).width(horizontalBarWidth);
  	    horizontalBarRange = [22,horizontalBoxWidth - horizontalBarWidth + 22]; // 22为左边内边距的距离
  	  	horizontalAreaRange = [0,scroll_body_width - wrap_body_width];
		}
  	setHorizontalBar();
    //横向滚动条滚动事件
    var startX = 0;
    var endX = 0;
    var left = 22;
    var elemTargetX = 0;
    function down2(e){
    		setHorizontalBar();
				startX = e.clientX;
		    left = $(init.horizontal_bar).position().left;
        function move(e){
        		var newLeft = 0;
            endX = e.clientX;
            newLeft = left + endX - startX;
            // 限制区域
            if (newLeft > horizontalBarRange[1]) {
                newLeft = horizontalBarRange[1];
            } else if (newLeft < horizontalBarRange[0]) {
                newLeft = horizontalBarRange[0];
            }
            // 控制左边固定区域显隐
            if (newLeft > horizontalBarRange[0]) {
            	$('.scroll-table-fixed-left').removeClass('hide');
            } else {
            	$('.scroll-table-fixed-left').addClass('hide');
            }
            
            $(init.horizontal_bar).css({
                left: newLeft
            });
            elemTargetX = horizontalAreaRange[1] * ((newLeft-horizontalBarRange[0]) / (horizontalBarRange[1]-horizontalBarRange[0]));
            transform(scroll_head, "translateX", -elemTargetX);
            transform(scroll_body, "translateX", -elemTargetX);
         }
           
       	function up(){
           $(document).off('mousemove');
           $(document).off('mouseup');
           //释放捕获
           init.horizontal_bar.releaseCapture && init.horizontal_bar.releaseCapture();
        }
       	$(document).on('mousemove',move);
       	$(document).on('mouseup',up);
        //设置捕获
        init.horizontal_bar.setCapture && init.horizontal_bar.setCapture();
        //阻止浏览器默认事件
        e.preventDefault && e.preventDefault();
        return false;
    }
    $(init.horizontal_bar).on('mousedown',down2);
    //横向滚动条点击滚动区域自动定位功能
    $('.scroll-bar-box').on('click', function(e) {
    		var clickPos = e.clientX - $(this).offset().left;
    		var barLeft = parseInt($(init.horizontal_bar).css('left'));
    		var newLeft = 0;
    		//确定新的滚动条left值
    		if (clickPos <= barLeft) {
    				newLeft = clickPos;
    				if (clickPos<horizontalBarRange[0]+30) {
    						newLeft = horizontalBarRange[0];
						}
				} else {
						newLeft = clickPos - horizontalBarWidth;
						if (clickPos-horizontalBarWidth>horizontalBarRange[1]-30) {
    						newLeft = horizontalBarRange[1];
						}
				}
				if (e.target == $(this)[0]) {
					// 控制左边固定区域显隐
          if (newLeft > horizontalBarRange[0]) {
          	$('.scroll-table-fixed-left').removeClass('hide');
          } else {
          	$('.scroll-table-fixed-left').addClass('hide');
          }
					$(init.horizontal_bar).css({
							transition: 'left .3s',
							left: newLeft
					});
					$(scroll_head).css({
							transition: 'transform .3s'
					});
					$(scroll_body).css({
							transition: 'transform .3s'
					});
					elemTargetX = horizontalAreaRange[1] * ((newLeft-horizontalBarRange[0]) / (horizontalBarRange[1]-horizontalBarRange[0]));
          transform(scroll_head, "translateX", -elemTargetX);
          transform(scroll_body, "translateX", -elemTargetX);
          setTimeout(function() {
        	  $(init.horizontal_bar).css({
								transition: 'none',
						});
						$(scroll_head).css({
								transition: 'none'
						});
						$(scroll_body).css({
								transition: 'none'
						});
					}, 300);
				}
				
		});
    
}
function calcRowHeight() {
		var row_h = [];
  	var self = this;
  	$('.scroll-table-fixed-left-head tr').height($('.scroll-table-head tr').height());
		$('.scroll-table-body tr').each(function(index, item) {
			var h = $(item).height();
			row_h.push(h);
		});
		$('.scroll-table-fixed-left-body tr').each(function(index, item) {
			if (self.tableHasRowspan) {
				var rowSpan = parseInt($(item).find('td').attr('rowspan')) ? parseInt($(item).find('td').attr('rowspan')) : 0;
				var total_h = 0;
				var start = index;
				var end = index + rowSpan;
				var array_h = row_h.slice(start,end);
	//			console.log(array_h);
				if (array_h.length > 0) {
					array_h.forEach(function(item) {
						total_h = com.accAdd(total_h, item);
					});
					if (total_h > 0) {
						$(item).height(total_h);
					}
				}
				if ($(item).hasClass('heji-tr')) {
					$(item).height(row_h[index]);
				}
			} else {
				$(item).height(row_h[index]);
			}
			
		});
}
tableSwiperFunc({
	wrap_body: $(".scroll-table-body")[0],
	scroll_body: $(".scroll-table-body table")[0],
	wrap_head: $(".scroll-table-head")[0],
	scroll_head: $(".scroll-table-head table")[0],
	left_wrap_body: $(".scroll-table-fixed-left-body")[0],
	left_scroll_body: $(".scroll-table-fixed-left-body table")[0],
	horizontal_bar: $('.scroll-bar')[0],
	vertical_bar: $('.v-scroll-bar')[0],
});
calcRowHeight();
/*固定表格滑动脚本结束*/

HTML代码

<div id="picDiv" class="scroll-table-box"> 
		<div class="scroll-table-head">
        <table class="tb1 tb_03">
            <thead>
                <tr class="space">
									<th style="width: 9em;">项目名称</th>
									<th style="width: 5em;">品名</th>
									<th style="width: 5em;">材质</th>
									<th style="width: 5em;">规格</th>
									<th style="width: 4em;">计划量</th>
									<th style="width: 4em;">备注</th>
									<th style="width: 5em;">钢厂</th>
									<th style="width: 6em;">供应商</th>
									<th style="width: 6em;">仓库</th>
									<th style="width: 5em;">下单件数</th>
									<th style="width: 5em;">下单重量</th>
									<th style="width: 5em;">采购价格</th>
									<th style="width: 5em;">移库价格</th>
									<th style="width: 5em;">采购计重</th>
									<th style="width: 5em;">配送方式</th>
									<th style="width: 8em;">付款日期及方式</th>
									<th style="width: 4em;">采购员</th>
									<th style="width: 5em;">销售单价</th>
									<th style="width: 4em;">运费</th>
									<th style="width: 4em;">出库费</th>
									<th style="width: 4em;">卸车费</th>
									<th style="width: 5em;">承兑收益</th>
									<th style="width: 5em;">钢厂返利</th>
									<th style="width: 5em;">下差公斤</th>
									<th style="width: 5em;">理计收益</th>
									<th style="width: 5em;">平均资金占用天数</th>
									<th style="width: 10em;">资金占用及调节成本(不含税)</th>
									<th style="width: 5em;">单吨考核利润</th>
									<th style="width: 6em;">年化应收款利润率</th>
									<th style="width: 6em;">综合应收款利润率</th>
									<th style="width: 6em;">客户名称</th>
									<th style="width: 5em;">入库部门</th>
								</tr>
            </thead>
        </table>
    </div>
    <div class="scroll-table-body">
				<table border="0" cellspacing="0" cellpadding="0" id="secondTb" class="tb1 tb_03">
					<thead>
              <tr class="space">
								<th style="width: 9em;">项目名称</th>
								<th style="width: 5em;">品名</th>
								<th style="width: 5em;">材质</th>
								<th style="width: 5em;">规格</th>
								<th style="width: 4em;">计划量</th>
								<th style="width: 4em;">备注</th>
								<th style="width: 5em;">钢厂</th>
								<th style="width: 6em;">供应商</th>
								<th style="width: 6em;">仓库</th>
								<th style="width: 5em;">下单件数</th>
								<th style="width: 5em;">下单重量</th>
								<th style="width: 5em;">采购价格</th>
								<th style="width: 5em;">移库价格</th>
								<th style="width: 5em;">采购计重</th>
								<th style="width: 5em;">配送方式</th>
								<th style="width: 8em;">付款日期及方式</th>
								<th style="width: 4em;">采购员</th>
								<th style="width: 5em;">销售单价</th>
								<th style="width: 4em;">运费</th>
								<th style="width: 4em;">出库费</th>
								<th style="width: 4em;">卸车费</th>
								<th style="width: 5em;">承兑收益</th>
								<th style="width: 5em;">钢厂返利</th>
								<th style="width: 5em;">下差公斤</th>
								<th style="width: 5em;">理计收益</th>
								<th style="width: 5em;">平均资金占用天数</th>
								<th style="width: 10em;">资金占用及调节成本(不含税)</th>
								<th style="width: 5em;">单吨考核利润</th>
								<th style="width: 6em;">年化应收款利润率</th>
								<th style="width: 6em;">综合应收款利润率</th>
								<th style="width: 6em;">客户名称</th>
								<th style="width: 5em;">入库部门</th>
							</tr>
          </thead>
					<tbody>
						<c:if test="${resList.size()>0}">
							<c:forEach items="${resList}" var="detail" varStatus="s">
								<tr align="center" name="resTr">
									<input type="hidden" name="resList[${s.index }].buyWeight" id="buyWeight_${s.index }" value="${detail.buyWeight }">
									<input type="hidden" name="resList[${s.index }].projectId" id="projectId_${s.index }" value="${detail.projectId }">
									<input type="hidden" name="resList[${s.index }].orderDetailId"  id="orderDetailId_${s.index }" value="${detail.orderDetailId }">									<td style="width: 9em;" data-name="项目名称"><div class="td_div">${detail.projectName }</div></td>
									<td style="width: 5em;" data-name="品名"><div class="td_div">${detail.brandNameDesc }</div></td>
									<td style="width: 5em;" data-name="材质"><div class="td_div">${detail.textureDesc }</div></td>
									<td style="width: 5em;" data-name="规格"><div class="td_div">${detail.specification }</div></td>
									<td style="width: 4em;" data-name="计划量"><div class="td_div">${detail.inventoryWeight }</div></td>
									<td style="width: 4em;" data-name="备注"><div class="td_div">${detail.dailyDetailRemark }</div></td>
									<td style="width: 5em;" data-name="钢厂"><div class="td_div">${detail.placeSteelDesc }</div></td>
									<td style="width: 6em;" data-name="供应商"><div class="td_div">${detail.purchaseSupplier }</div></td>
									<td style="width: 6em;" data-name="仓库"><div class="td_div">${detail.warehouseDesc }</div></td>
									<td style="width: 5em;" data-name="下单件数"><div class="td_div">${detail.buyQuantity }</div></td>
									<td style="width: 5em;" data-name="下单重量"><div class="td_div">${detail.buyWeight }</div></td>
									<td style="width: 5em;" data-name="采购价格">
										<div class="td_div">${detail.purchasePrice }</div>
										<input type="hidden"  name="resList[${s.index }].purchasePrice"  value="${detail.purchasePrice }">
									</td>
									<td style="width: 5em;" data-name="移库价格"><div class="td_div">${detail.deliveryPrice }</div></td>
									<td style="width: 5em;" data-name="采购计重">
										<c:if test="${detail.supCalcTypeGroup ==1 }"><div class="td_div">磅计</div></c:if>
										<c:if test="${detail.supCalcTypeGroup ==2 }"><div class="td_div">理计</div></c:if>
									</td>
									<td style="width: 5em;" data-name="配送方式">
										<c:if test="${detail.supDeliverTypeGroup ==1 }"><div class="td_div">我司配送</div></c:if>
										<c:if test="${detail.supDeliverTypeGroup ==2 }"><div class="td_div">供应商包到</div></c:if>
										<c:if test="${detail.supDeliverTypeGroup ==3 }"><div class="td_div">原库划转</div></c:if>
										<c:if test="${detail.supDeliverTypeGroup ==4 }"><div class="td_div">客户自提</div></c:if>
									</td>
									<td style="width: 8em;" data-name="付款日期及方式">
											${detail.supplierPayDate}<br/>
                 			<c:if test="${detail.supplierPayType ==1 }">网银</c:if>
											<c:if test="${detail.supplierPayType ==2 }">转账支票</c:if>
											<c:if test="${detail.supplierPayType ==3 }">银行承兑汇票</c:if>
											<c:if test="${detail.supplierPayType ==4 }">其他</c:if>
									</td>
									<td style="width: 4em;" data-name="采购员"><div class="td_div">${detail.salesman }</div></td>
									<td style="width: 5em;" data-name="销售单价">
										<div class="td_div">${detail.buyPrice }</div>
										<input type="hidden"   name="resList[${s.index }].buyPrice"  value="${detail.buyPrice }">
									</td>
									<td style="width: 4em;" data-name="运费">
											<div class="td_div" style="font-size: 0;line-height: 0;">
													<input type="text" autocomplete="off" <c:if test="${ detail.alloStatus == 3 }"> readonly="readonly" style="background-color:#CCCCCC;"</c:if> 
												  <c:if test="${ detail.alloStatus != 3 }"> onchange="staticProfit(this)"</c:if> name="resList[${s.index }].transportFee"  value="${detail.transportFee }">
											</div>
									</td>
									<td style="width: 4em;" data-name="出库费">
											<div class="td_div" style="font-size: 0;line-height: 0;">
													<input type="text" autocomplete="off" <c:if test="${ detail.alloStatus == 3 }"> readonly="readonly" style="background-color:#CCCCCC;"</c:if> 
												  <c:if test="${ detail.alloStatus != 3 }"> onchange="staticProfit(this)"</c:if> name="resList[${s.index }].outWarehouseFee"  value="${detail.outWarehouseFee }">
										  </div>
								  </td>
									<td style="width: 4em;" data-name="卸车费">
											<div class="td_div" style="font-size: 0;line-height: 0;">
													<input type="text" autocomplete="off" <c:if test="${ detail.alloStatus == 3 }"> readonly="readonly" style="background-color:#CCCCCC;"</c:if> 
												  <c:if test="${ detail.alloStatus != 3 }"> onchange="staticProfit(this)"</c:if> name="resList[${s.index }].loadFee"  value="${detail.loadFee }">
										  </div>
								  </td>
									<td style="width: 5em;" data-name="承兑收益">
											<div class="td_div" style="font-size: 0;line-height: 0;">
													<input type="text" autocomplete="off" <c:if test="${ detail.alloStatus == 3 }"> readonly="readonly" style="background-color:#CCCCCC;"</c:if> 
												  <c:if test="${ detail.alloStatus != 3 }"> onchange="staticProfit(this)"</c:if> name="resList[${s.index }].acceptanceIncome"  value="${detail.acceptanceIncome }">
										  </div>
								  </td>
									<td style="width: 5em;" data-name="钢厂返利">
											<div class="td_div" style="font-size: 0;line-height: 0;">
													<input type="text" autocomplete="off" <c:if test="${ detail.alloStatus == 3 }"> readonly="readonly" style="background-color:#CCCCCC;"</c:if> 
												  <c:if test="${ detail.alloStatus != 3 }"> onchange="staticProfit(this)"</c:if> name="resList[${s.index }].steelRebate"  value="${detail.steelRebate }">
								  		</div>
								  </td>
									<td style="width: 5em;" data-name="下差公斤">
											<div class="td_div" style="font-size: 0;line-height: 0;">
													<input type="text" autocomplete="off" <c:if test="${ detail.alloStatus == 3 }"> readonly="readonly" style="background-color:#CCCCCC;"</c:if> 
												  <c:if test="${ detail.alloStatus != 3 }"> onchange="staticProfit(this)"</c:if> name="resList[${s.index }].downwardKg"  value="${detail.downwardKg }">
										  </div>
								  </td>
									<td style="width: 5em;" data-name="理计收益">
										<span id="rationaleIncome_${s.index }"><fmt:formatNumber value='${detail.rationaleIncome }' pattern='####0.00'/></span>
										<input type="hidden" id="rationaleIncomeHid_${s.index }"  name="resList[${s.index }].rationaleIncome"  value="${detail.rationaleIncome }">
									</td>
									<td style="width: 5em;" data-name="平均资金占用天数">
											<div class="td_div" style="font-size: 0;line-height: 0;">
													<input id="fundsDays_${detail.projectId}_${s.index }" type="text" autocomplete="off" <c:if test="${ detail.alloStatus == 3 }"> readonly="readonly" style="background-color:#CCCCCC;"</c:if> 
												  <c:if test="${ detail.alloStatus != 3 }"> onchange="changeFundsDays(this)"</c:if> name="resList[${s.index }].averageFundsDays"  value="${detail.averageFundsDays }">
										  </div>
								  </td>
									<td style="width: 10em;" data-name="资金占用及调节成本(不含税)">
										<span id="adjustCost_${s.index }">
												<fmt:formatNumber value='${detail.adjustCost }' pattern='####0.00'/>
										</span>
										<input type="hidden" id="adjustCostHid_${s.index }" name="resList[${s.index }].adjustCost"  value="${detail.adjustCost }">
									</td>
									<td style="width: 5em;" data-name="单吨考核利润">
										<span id="assessmentProfitPer_${s.index }">
												<fmt:formatNumber value='${detail.assessmentProfitPer }' pattern='####0.00'/>
										</span>
										<input type="hidden" id="assessmentProfitPerHid_${s.index }"  name="resList[${s.index }].assessmentProfitPer"  value="${detail.assessmentProfitPer }">
									</td>
									<td style="width: 6em;" data-name="年化应收款利润率">
										<span id="arProfitYear_${s.index }">
												<fmt:formatNumber value='${detail.arProfitYear }' pattern='####0.00'/>%
										</span>
										<input type="hidden"  id="arProfitYearHid_${s.index }" name="resList[${s.index }].arProfitYear"  value="${detail.arProfitYear }">
									</td>
									<td style="width: 6em;" data-name="综合应收款利润率">
										<span id="arProfitMultiple_${detail.orderDetailId}">
												<fmt:formatNumber value='${detail.arProfitMultiple }' pattern='####0.00'/>%
										</span>
									</td>
									<td style="width: 6em;" data-name="客户名称"><div class="td_div">${detail.buyerName }</div></td>
									<td style="width: 5em;" data-name="入库部门"><div class="td_div">${detail.sellerMemberName }</div></td>
								</tr>
							</c:forEach>
						</c:if>
					</tbody>
				</table>
				<c:if test="${resList.size()>0}">
				<div class="v-scroll-bar-box">
						<div class="up-arrow">
		    				<i class="iconfont icon-shangjiantoushixinxiao arrow"></i>
		    		</div>
		    		<div class="v-scroll-bar"></div>
		    		<div class="down-arrow">
		    				<i class="iconfont icon-xiajiantoushixinxiao arrow"></i>
		    		</div>
		    </div>
		    </c:if>
		</div>
    <div class="scroll-table-fixed-left hide" style="width: 385px;">
        <div class="scroll-table-fixed-left-head">
            <table class="tb1 tb_03 no_border_top">
                <thead>
                    <tr>
                        <th style="width: 9em;">项目名称</th>
												<th style="width: 5em;">品名</th>
												<th style="width: 5em;">材质</th>
												<th style="width: 5em;">规格</th>
												<th style="width: 4em;">计划量</th>
												<th style="width: 4em;">备注</th>
                    </tr>
                </thead>
            </table>
        </div>
 
        <div class="scroll-table-fixed-left-body">
            <table class="tb1 tb_03">
                <tbody>
                		<c:if test="${resList.size()>0}">
											<c:forEach items="${resList}" var="detail" varStatus="s">
												<tr align="center" name="resTr">
													<td style="width: 9em;" data-name="项目名称"><div class="td_div">${detail.projectName }</div></td>
													<td style="width: 5em;" data-name="品名"><div class="td_div">${detail.brandNameDesc }</div></td>
													<td style="width: 5em;" data-name="材质"><div class="td_div">${detail.textureDesc }</div></td>
													<td style="width: 5em;" data-name="规格"><div class="td_div">${detail.specification }</div></td>
													<td style="width: 4em;" data-name="计划量"><div class="td_div">${detail.inventoryWeight }</div></td>
													<td style="width: 4em;" data-name="备注"><div class="td_div">${detail.dailyDetailRemark }</div></td>
												</tr>
											</c:forEach>
										</c:if>
                </tbody>
            </table>
        </div>
    </div>
    <c:if test="${resList.size()>0}">
    <div class="scroll-bar-box">
    		<div class="left-arrow">
    				<i class="iconfont icon-zuojiantoushixinxiao arrow"></i>
    		</div>
        <div class="scroll-bar"></div>
    		<div class="right-arrow">
    				<i class="iconfont icon-youjiantoushixinxiao arrow"></i>
    		</div>
    </div>
    </c:if>
	</div>