table可拖拽
This commit is contained in:
parent
1c0a68e57b
commit
5f27519c67
|
|
@ -1,4 +1,4 @@
|
|||
<table class="hwork-table-wrap">
|
||||
<table class="hwork-table-wrap" id="homework_table" onmouseenter="resizeable_table(3,4,10)">
|
||||
<tr class="b_grey hworkH30" style="border-bottom:1px solid #eaeaea;">
|
||||
<th class="hworkList30 hworkH30 pl5 pr5">序号</th>
|
||||
<th class="hworkList50"> </th>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<table class="hwork-table-wrap">
|
||||
<table class="hwork-table-wrap" id="homework_table" onmouseenter="resizeable_table(3,4,10)">
|
||||
<tr class="b_grey hworkH30" style="border-bottom:1px solid #eaeaea;">
|
||||
<th class="hworkList30 hworkH30 pl5 pr5">序号</th>
|
||||
<th class="hworkList50"> </th>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<% end%>
|
||||
</th>
|
||||
<% elsif @homework.homework_type == 3 && @homework.homework_detail_group.base_on_project == 1 %>
|
||||
<th class="<%=@homework.anonymous_comment == 1 ? 'hworkList220' : 'hworkList160'%>">
|
||||
<th class="<%=@homework.anonymous_comment == 1 ? 'hworkList210' : 'hworkList160'%>">
|
||||
<span class="c_dark f14 fb">关联项目</span>
|
||||
</th>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<% content_for :header_tags do %>
|
||||
<%= javascript_include_tag "/assets/codemirror/codemirror_python_ruby_c" %>
|
||||
<%= javascript_include_tag "resizeable_table" %>
|
||||
<%= stylesheet_link_tag "/assets/codemirror/codemirror" %>
|
||||
<% end %>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
* Created by ttang on 2016/5/24.
|
||||
*/
|
||||
$(document).ready(function(){
|
||||
resizeable_table = function(colS,colE,padding){
|
||||
var headerTds = document.getElementById("homework_table").rows[0].cells;
|
||||
var mousedown = false;
|
||||
var resizeable = false;
|
||||
var targetTd;
|
||||
var screenXStart =0;
|
||||
var tdWidth = 0;
|
||||
var headerWidth = 0;
|
||||
var tblObj = document.getElementById("homework_table");
|
||||
var tblWidth = tblObj.offsetWidth;
|
||||
for(var i = colS;i<colE;i++){
|
||||
addListener(headerTds[i],"mousedown",onmousedown);
|
||||
addListener(headerTds[i],"mousemove",onmousemove);
|
||||
}
|
||||
|
||||
function onmousedown(event){
|
||||
if (resizeable == true){
|
||||
var evt =event||window.event;
|
||||
mousedown = true;
|
||||
screenXStart = evt.screenX;
|
||||
tdWidth = targetTd.offsetWidth;
|
||||
tdWidth2 = targetTd.nextElementSibling.offsetWidth;
|
||||
}
|
||||
}
|
||||
function onmousemove(event){
|
||||
var evt =event||window.event;
|
||||
var srcObj = getTarget(evt);
|
||||
var offsetX = evt.offsetX || (evt.clientX - srcObj.getBoundingClientRect().left);//这个比较关键，解决了Firefox无offsetX属性的问题
|
||||
if (mousedown == true){
|
||||
var width = (tdWidth + (evt.screenX - screenXStart)) - 10 + "px";//计算后的新的宽度
|
||||
var width2 = (tdWidth2 - (evt.screenX - screenXStart)) - 10 + "px";
|
||||
console.log(width, width2);
|
||||
if (width<60){
|
||||
targetTd.style.width = "60px";
|
||||
console.log("width<60");
|
||||
}else if(width2<60){
|
||||
targetTd.nextElementSibling.style.width2 = "60px";
|
||||
console.log("width2<60");
|
||||
}else{
|
||||
targetTd.style.width = width;
|
||||
targetTd.nextElementSibling.style.width = width2;
|
||||
}
|
||||
}else{
|
||||
var trObj = tblObj.rows[0];
|
||||
if(srcObj.offsetWidth - offsetX <=4){//实际改变本单元格列宽
|
||||
targetTd=srcObj;
|
||||
resizeable = true;
|
||||
srcObj.style.cursor='col-resize';//修改光标样式
|
||||
}else if(offsetX <=4 && srcObj.cellIndex > 0){//实际改变前一单元格列宽，但是表格左边框线不可拖动
|
||||
targetTd=trObj.cells[srcObj.cellIndex - 1];
|
||||
resizeable = true;
|
||||
srcObj.style.cursor='col-resize';
|
||||
}else{
|
||||
resizeable = false;
|
||||
srcObj.style.cursor='default';
|
||||
}
|
||||
}
|
||||
}
|
||||
document.onmouseup = function(event){
|
||||
tartgetTd = null;
|
||||
resizeable = false;
|
||||
mousedown = false;
|
||||
document.body.style.cursor='default';
|
||||
}
|
||||
function getTarget(evt){
|
||||
return evt.target || evt.srcElement;
|
||||
}
|
||||
function addListener(element,type,listener,useCapture){
|
||||
element.addEventListener?element.addEventListener(type,listener,useCapture):element.attachEvent("on" + type,listener);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -59,7 +59,7 @@ a:hover.news_foot{ color:#787b7e; border:1px solid #d4d4d4;}
|
|||
.hworkList100 {width:100px; text-align:center;}
|
||||
.hworkList130 {width:130px; text-align:center;}
|
||||
.hworkList160 {width:160px; text-align:center;}
|
||||
.hworkList220 {width:220px; text-align:center;}
|
||||
.hworkList210 {width:210px; text-align:center;}
|
||||
.hworkList260 {width:260px; text-align:left;}
|
||||
.codeList{ float:right; font-size:12px; color:#484848; padding:0px 3px; width:714px; margin-bottom:10px; }
|
||||
.hworkName {width:80px; float:left; line-height:18px;}
|
||||
|
|
@ -103,7 +103,7 @@ a.hworkSearchIcon:hover {background:url(../images/nav_icon.png) -49px -1px no-re
|
|||
.pr10{padding-right: 10px;}
|
||||
|
||||
/*20160520作品列表table*/
|
||||
.hwork-table-wrap {width:720px; border-collapse:collapse; vertical-align:middle;}
|
||||
.hwork-table-wrap {width:720px; border-collapse:collapse; vertical-align:middle; table-layout:fixed;}
|
||||
.hwork-table-wrap th {font-size:14px; color:#2d2d2d;}
|
||||
|
||||
/*作业信息*/
|
||||
|
|
@ -1252,7 +1252,7 @@ a:hover.blueCir{ background:#3598db; color:#fff;}
|
|||
.tac {text-align:center;}
|
||||
.proHelp {background:url(/images/course/hwork_icon.png) -5px -124px no-repeat; display:inline-block; width:15px; height:15px; display:inline-block;}
|
||||
.hworkPrName {width:160px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; float:left; height:65px; line-height:65px; vertical-align:middle; font-size:12px; color:#888888; text-align:center;}
|
||||
.hworkPrName2 {width:220px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; float:left; height:65px; line-height:65px; vertical-align:middle; font-size:12px; color:#888888; text-align:center;}
|
||||
.hworkPrName2 {width:210px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; float:left; height:65px; line-height:65px; vertical-align:middle; font-size:12px; color:#888888; text-align:center;}
|
||||
.mr150 {margin-right:150px;}
|
||||
.relatePInfo {text-align: left; position:absolute; background-color:#ffffff; padding:3px 8px; white-space:nowrap; box-shadow:0px 2px 8px rgba(146, 153, 169, 0.5); z-index:999; color:#585858; cursor:pointer; display:none;}
|
||||
.captainName {max-width:75px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: inline-block;}
|
||||
|
|
|
|||
Loading…
Reference in New Issue