chinaRen首页上可以拖动的表格是如何实现的？

2006-08-18 05:37:28 242 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

uniapp跳转前验证用户是否登陆并保存用户授权信息背景这次项目有一个需求是实现点击一些按钮路由跳转前验证用户是否登陆，以及一些不跳转路由的功能，按钮点击后出现模态框前验证用户是否登陆。方案选择路由守卫首先我并没有选择路由守卫，因为我的需求有不进行路由跳转进行验证的地方。但是路由守卫用来做跳转前验证肯定是个不错的选择。我贴一个博客大家可以参考其他人的路由守卫方案 https://cnblogs.com/XHappyness/p/13808413.html 自定义验证方法我是自己写的贴合需求的验证授权方法。 1.考虑跳转路由可以使用 2.在某些不阅读详情

具体的有参考源码吗？谢谢各位

...全文

详解iVX中用户组件注册登录功能本文目录注册与登录（手机注册登录）注册与登录（邮箱注册登录）注册与登录（手机验证码登录）微信登录与登录后绑定手机注册与登录（手机注册登录）预览地址：https://v4pre.h5sys.cn/play/DVp4Gt7P?phone=1 ·注册第一步搭建UI 第二步获取图片验证码首先判断输入的手机号类型是否为手机，如果类型为手机(11位的数)，则包含图片验证码的绝对定位容器可见。接下来再通过用户数据库获取图片验证码，并把图片验证码 ID 和图片验证码图片保存起来阅读详情

knifewolf88

基础编程 21,889 成员 140,329 内容

+ 关注 + 加入社区

切换为时间正序

knifewolf88 2006-08-31

打赏
举报

不行呀，snake1220()

帮帮忙吧

snake1220 2006-08-22

打赏
举报

function document.onclick(){
window.status = "";
clear_color();
cur_row = null;
cur_col = null;
cur_cell = null;
}

function read_def(the_table){
for(var i=0;i<the_table.rows.length;i++){
for(var j=0;j<the_table.rows[i].cells.length;j++){
with(the_table.rows[i]){
cells[j].oBgc = cells[j].currentStyle.backgroundColor;
cells[j].oFc = cells[j].currentStyle.color;
if(i==0){
//cells[j].onmousedown = drag_start;
//cells[j].onmouseup = drag_end;
}
}
}
}
}

function get_Element(the_ele,the_tag){
the_tag = the_tag.toLowerCase();
if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
while(the_ele=the_ele.offsetParent){
if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
}
return(null);
}

var dragStart = false;
var dragColStart = null;
var dragColEnd = null;

function drag_start(){
var the_td = get_Element(event.srcElement,"td");
if(the_td==null) return;
dragStart = true;
dragColStart = the_td.cellIndex;
drag.style.width = the_td.offsetWidth;
drag.style.height = the_td.offsetHeight;
function document.onmousemove(){
drag.style.display = "";
drag.style.top = event.y - drag.offsetHeight/2;
drag.style.left = event.x - drag.offsetWidth/2;
for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
with(Main_Tab.rows[0].cells[i]){
if((event.y>offsetTop+parseInt(document.body.currentStyle.marginTop) && event.y<offsetTop+offsetHeight+parseInt(document.body.currentStyle.marginTop)) && (event.x>offsetLeft+parseInt(document.body.currentStyle.marginLeft) && event.x<offsetLeft+offsetWidth+parseInt(document.body.currentStyle.marginLeft))){
runtimeStyle.backgroundColor=act_bgc;
dragColEnd=cellIndex;
}else{
runtimeStyle.backgroundColor="";
}
}
}
if(!(event.y>Main_Tab.rows[0].offsetTop+parseInt(document.body.currentStyle.marginTop) && event.y<Main_Tab.rows[0].offsetTop+Main_Tab.rows[0].offsetHeight+parseInt(document.body.currentStyle.marginTop))) dragColEnd=null;
}
drag.innerHTML = the_td.innerHTML;
drag.style.backgroundColor = the_td.oBgc;
drag.style.color = the_td.oFc;
}

function drag_end(){
dragStart = false;
drag.style.display="none";
drag.innerHTML = "";
drag.style.width = 0;
drag.style.height = 0;
for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
Main_Tab.rows[0].cells[i].runtimeStyle.backgroundColor="";
}
if(dragColStart!=null && dragColEnd!=null && dragColStart!=dragColEnd){
change_col(Main_Tab,dragColStart,dragColEnd);
if(dragColStart==sort_col)sort_col=dragColEnd;
else if(dragColEnd==sort_col)sort_col=dragColStart;
document.onclick();
}
dragColStart = null;
dragColEnd = null;
document.onmousemove=null;
}

snake1220 2006-08-22

打赏
举报

记得PowerTable是分大小写的.

POWERTABLE.JS的文件代码如下:

<script language="JavaScript1.2">
/*
This following code are designed and writen by Windy_sk <seasonx@163.net>
You can use it freely, but u must held all the copyright items!
*/

var Main_Tab = null;
var cur_row = null;
var cur_col = null;
var cur_cell = null;
var Org_con = "";
var sort_col = null;

var show_col = false;
var charMode = true;
var act_bgc = "#BEC5DE";
var act_fc = "black";
var cur_bgc = "#ccffcc";
var cur_fc = "black";

function init(){
cur_row = null;
cur_col = null;
cur_cell = null;
sort_col = null;
Main_Tab = PowerTable;
read_def(Main_Tab)
Main_Tab.onmouseover = overIt;
Main_Tab.onmouseout = outIt;
Main_Tab.onclick = clickIt;
//Main_Tab.ondblclick = dblclickIt;
Org_con = Main_Tab.outerHTML;

arrowUp = document.createElement("SPAN");
arrowUp.innerHTML = "5";
arrowUp.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";

arrowDown = document.createElement("SPAN");
arrowDown.innerHTML = "6";
arrowDown.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";
}

function window.onload(){
init();

drag = document.createElement("DIV");
drag.innerHTML = "";
drag.style.textAlign = "center";
drag.style.position = "absolute";
drag.style.cursor = "hand";
drag.style.border = "1 solid black";
drag.style.display = "none";
drag.style.zIndex = "999";

document.body.insertBefore(drag);
//setInterval("judge_move()",100);
//setInterval("showContent.value=Main_Tab.innerHTML;monitor.value='cur_row: '+cur_row+'; cur_col: '+cur_col + '; sort_col: ' +sort_col",1000);
}

function judge_move(){
//move[0].disabled=(cur_row == null || cur_row<=1);
//move[1].disabled=(cur_row == null || cur_row==Main_Tab.rows.length-1 || cur_row == 0);
//move[2].disabled=(cur_col == null || cur_col==0);
//move[3].disabled=(cur_col == null || cur_col==Main_Tab.rows[0].cells.length-1);
}

document.onmouseup = drag_end;

function clear_color(){
the_table=Main_Tab;
if(cur_col!=null){
for(i=0;i<the_table.rows.length;i++){
with(the_table.rows[i].cells[cur_col]){
style.backgroundColor=oBgc;
style.color=oFc;
}
}
}
if(cur_row!=null){
for(i=0;i<the_table.rows[cur_row].cells.length;i++){
with(the_table.rows[cur_row].cells[i]){
style.backgroundColor=oBgc;
style.color=oFc;
}
}
}
if(cur_cell!=null){
cur_cell.children[0].contentEditable = false;
with(cur_cell.children[0].runtimeStyle){
borderLeft=borderTop="";
borderRight=borderBottom="";
backgroundColor="";
paddingLeft="";
textAlign="";
}
}
}

snake1220 2006-08-22

打赏
举报

太长要分开贴

最后在需要排序的表格中写上加上"ID='PowerTable'"就行.
如:
<talbe border=0 width="100%" id="PowerTable">
<tr><td>name</td><td>age</td><td>sex</td><td>date</td><td>telephone</td></tr>
<tr><td>david</td><td>20</td><td>F</td><td>2004-10-3</td><td>5666</td></tr>
<tr><td>anna</td><td>21</td><td>M</td><td>2004-10-13</td><td>566</td></tr>
<tr><td>beverly</td><td>23</td><td>F</td><td>2004-12-23</td><td>5666</td></tr>
<tr><td>crytal</td><td>23</td><td>M</td><td>2004-11-10</td><td>66</td></tr>
<tr><td>yk</td><td>24</td><td>F</td><td>2004-12-13</td><td>566</td></tr>
</table>

knifewolf88 2006-08-22

打赏
举报

CSDN的高手们帮帮忙啊

knifewolf88 2006-08-18

打赏
举报

可以下下载吗？我怎么另存为网页后就看不到效果了？

Gdj 2006-08-18

打赏
举报

web2.0。

js的，你打开网页源码就看到了。

chinaRen首页上可以拖动的表格是如何实现的？

相关推荐