您的位置：360文档中心› extjs 可编辑表格自动右移

extjs 可编辑表格自动右移

合集下载

javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

javascript实现图⽚左右滚动效果【可⾃动滚动，有左右按钮】本⽂实例讲述了javascript实现图⽚左右滚动效果。

分享给⼤家供⼤家参考，具体如下：html代码：<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="renderer" content="webkit"/><meta name="keywords" content=""/><meta name="description" content=""/><title>图⽚滚动</title><style>*{margin:0;padding:0;}ul{list-style:none;}img{border:0;}.scroll{width:358px;height:63px;}.scroll_left{width:23px;height:63px;background:url(images/btn_left.jpg) no-repeat;float:left;}.scroll_right{width:23px;height:63px;background:url(images/btn_right.jpg) left no-repeat;float:left;}.pic{width:312px;height:73px;float:left;}.pic ul{display:block;}.pic li{float:left;display:inline;width:104px;text-align:center;}</style></head><body><div style="margin:100px auto;width:358px;"><div class="scroll"><div class="scroll_left" id="LeftArr"></div><div class="pic" id="scrollPic"><ul><li><a href="#" target="_blank" title=""><img src="images/pic01.png" width="100" height="63" alt="" /></a></li><li><a href="#" target="_blank" title=""><img src="images/pic02.jpg" width="100" height="63" alt="" /></a></li><li><a href="#" target="_blank" title=""><img src="images/pic03.jpg" width="100" height="63" alt="" /></a></li><li><a href="#" target="_blank" title=""><img src="images/pic04.jpg" width="100" height="63" alt="" /></a></li><li><a href="#" target="_blank" title=""><img src="images/pic05.jpg" width="100" height="63" alt="" /></a></li><li><a href="#" target="_blank" title=""><img src="images/pic06.jpg" width="100" height="63" alt="" /></a></li></ul></div><div class="scroll_right" id="RightArr"></div></div></div></body></html><script src="scrollPic.js"></script><script>window.onload = function(){scrollPic();}function scrollPic() {var scrollPic = new ScrollPic();scrollPic.scrollContId = "scrollPic"; //内容容器IDscrollPic.arrLeftId = "LeftArr";//左箭头IDscrollPic.arrRightId = "RightArr"; //右箭头IDscrollPic.frameWidth = 312;//显⽰框宽度scrollPic.pageWidth = 104; //翻页宽度scrollPic.speed = 10; //移动速度(单位毫秒，越⼩越快)scrollPic.space = 10; //每次移动像素(单位px，越⼤越快)scrollPic.autoPlay = true; //⾃动播放scrollPic.autoPlayTime = 3; //⾃动播放间隔时间(秒)scrollPic.initialize(); //初始化}</script>scrollPic.js 代码：var sina = {return eval('document.getElementById("' + objName + '")')} else {return eval('document.all.' + objName)}},isIE : navigator.appVersion.indexOf("MSIE") != -1 ? true : false,addEvent : function (l, i, I) {if (l.attachEvent) {l.attachEvent("on" + i, I)} else {l.addEventListener(i, I, false)}},delEvent : function (l, i, I) {if (l.detachEvent) {l.detachEvent("on" + i, I)} else {l.removeEventListener(i, I, false)}},readCookie : function (O) {var o = "",l = O + "=";if (document.cookie.length > 0) {var i = document.cookie.indexOf(l);if (i != -1) {i += l.length;var I = document.cookie.indexOf(";", i);if (I == -1)I = document.cookie.length;o = unescape(document.cookie.substring(i, I))}};return o},writeCookie : function (i, l, o, c) {var O = "",I = "";if (o != null) {O = new Date((new Date).getTime() + o * 3600000);O = "; expires=" + O.toGMTString()};if (c != null) {I = ";domain=" + c};document.cookie = i + "=" + escape(l) + O + I},readStyle : function (I, l) {if (I.style[l]) {return I.style[l]} else if (I.currentStyle) {return I.currentStyle[l]} else if (document.defaultView && document.defaultView.getComputedStyle) { var i = document.defaultView.getComputedStyle(I, null);return i.getPropertyValue(l)} else {return null}}};//滚动图⽚构造函数//UI&UE Dept. mengjia//080623function ScrollPic(scrollContId, arrLeftId, arrRightId, dotListId) {this.scrollContId = scrollContId;this.arrLeftId = arrLeftId;this.arrRightId = arrRightId;this.dotListId = dotListId;this.dotClassName = "dotItem";this.dotOnClassName = "dotItemOn";this.dotObjArr = [];this.pageWidth = 0;this.frameWidth = 0;this.speed = 10;this.space = 10;this.autoPlay = true;this.autoPlayTime = 5;var _autoTimeObj,_scrollTimeObj,_state = "ready";this.stripDiv = document.createElement("DIV");this.listDiv01 = document.createElement("DIV");this.listDiv02 = document.createElement("DIV");if (!ScrollPic.childs) {ScrollPic.childs = []};this.ID = ScrollPic.childs.length;ScrollPic.childs.push(this);this.initialize = function () {if (!this.scrollContId) {throw new Error("必须指定scrollContId.");return};this.scrollContDiv = sina.$(this.scrollContId);if (!this.scrollContDiv) {throw new Error("scrollContId不是正确的对象.(scrollContId = \"" + this.scrollContId + "\")");return};this.scrollContDiv.style.width = this.frameWidth + "px";this.scrollContDiv.style.overflow = "hidden";this.listDiv01.innerHTML = this.listDiv02.innerHTML = this.scrollContDiv.innerHTML;this.scrollContDiv.innerHTML = "";this.scrollContDiv.appendChild(this.stripDiv);this.stripDiv.appendChild(this.listDiv01);this.stripDiv.appendChild(this.listDiv02);this.stripDiv.style.overflow = "hidden";this.stripDiv.style.zoom = "1";this.stripDiv.style.width = "32766px";if(-[1,]){this.listDiv01.style.cssFloat = "left";this.listDiv02.style.cssFloat = "left";}else{this.listDiv01.style.styleFloat = "left";this.listDiv02.style.styleFloat = "left";}sina.addEvent(this.scrollContDiv, "mouseover", Function("ScrollPic.childs[" + this.ID + "].stop()"));sina.addEvent(this.scrollContDiv, "mouseout", Function("ScrollPic.childs[" + this.ID + "].play()"));if (this.arrLeftId) {this.arrLeftObj = sina.$(this.arrLeftId);if (this.arrLeftObj) {sina.addEvent(this.arrLeftObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].rightMouseDown()")); sina.addEvent(this.arrLeftObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"));sina.addEvent(this.arrLeftObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"))}};if (this.arrRightId) {this.arrRightObj = sina.$(this.arrRightId);if (this.arrRightObj) {sina.addEvent(this.arrRightObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].leftMouseDown()")); sina.addEvent(this.arrRightObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"));sina.addEvent(this.arrRightObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"))}};if (this.dotListId) {this.dotListObj = sina.$(this.dotListId);if (this.dotListObj) {var pages = Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4),i,tempObj;for (i = 0; i < pages; i++) {tempObj = document.createElement("span");this.dotListObj.appendChild(tempObj);this.dotObjArr.push(tempObj);if (i == this.pageIndex) {tempObj.className = this.dotClassName} else {tempObj.className = this.dotOnClassName};tempObj.title = "第" + (i + 1) + "页";sina.addEvent(tempObj, "click", Function("ScrollPic.childs[" + this.ID + "].pageTo(" + i + ")"))}};if (this.autoPlay) {this.play()}};this.leftMouseDown = function () {if (_state != "ready") {return};_state = "floating";_scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveLeft()", this.speed)};this.rightMouseDown = function () {if (_state != "ready") {return};_state = "floating";_scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveRight()", this.speed)};this.moveLeft = function () {if (this.scrollContDiv.scrollLeft + this.space >= this.listDiv01.scrollWidth) {this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + this.space - this.listDiv01.scrollWidth } else {this.scrollContDiv.scrollLeft += this.space};this.accountPageIndex()};this.moveRight = function () {if (this.scrollContDiv.scrollLeft - this.space <= 0) {this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - this.space } else {this.scrollContDiv.scrollLeft -= this.space};this.accountPageIndex()};this.leftEnd = function () {if (_state != "floating") {return};_state = "stoping";clearInterval(_scrollTimeObj);var fill = this.pageWidth - this.scrollContDiv.scrollLeft % this.pageWidth;this.move(fill)};this.rightEnd = function () {if (_state != "floating") {return};_state = "stoping";clearInterval(_scrollTimeObj);var fill = -this.scrollContDiv.scrollLeft % this.pageWidth;this.move(fill)};this.move = function (num, quick) {var thisMove = num / 5;if (!quick) {if (thisMove > this.space) {thisMove = this.space};if (thisMove < -this.space) {thisMove = -this.space}};if (Math.abs(thisMove) < 1 && thisMove != 0) {thisMove = thisMove >= 0 ? 1 : -1} else {thisMove = Math.round(thisMove)};var temp = this.scrollContDiv.scrollLeft + thisMove;if (thisMove > 0) {if (this.scrollContDiv.scrollLeft + thisMove >= this.listDiv01.scrollWidth) {this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + thisMove - this.listDiv01.scrollWidth } else {this.scrollContDiv.scrollLeft += thisMove} else {if (this.scrollContDiv.scrollLeft - thisMove <= 0) {this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - thisMove} else {this.scrollContDiv.scrollLeft += thisMove}};num -= thisMove;if (Math.abs(num) == 0) {_state = "ready";if (this.autoPlay) {this.play()};this.accountPageIndex();return} else {this.accountPageIndex();setTimeout("ScrollPic.childs[" + this.ID + "].move(" + num + "," + quick + ")", this.speed)}};this.next = function () {if (_state != "ready") {return};_state = "stoping";this.move(this.pageWidth, true)};this.play = function () {if (!this.autoPlay) {return};clearInterval(_autoTimeObj);_autoTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].next()", this.autoPlayTime * 1000)};this.stop = function () {clearInterval(_autoTimeObj)};this.pageTo = function (num) {if (_state != "ready") {return};_state = "stoping";var fill = num * this.frameWidth - this.scrollContDiv.scrollLeft;this.move(fill, true)};this.accountPageIndex = function () {this.pageIndex = Math.round(this.scrollContDiv.scrollLeft / this.frameWidth);if (this.pageIndex > Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4) - 1) {this.pageIndex = 0};var i;for (i = 0; i < this.dotObjArr.length; i++) {if (i == this.pageIndex) {this.dotObjArr[i].className = this.dotClassName} else {this.dotObjArr[i].className = this.dotOnClassName}}}};参数说明：var scrollPic = new ScrollPic(); //定义变量，并初始化⽅法 scrollContId //滚动容器的ID arrLeftId //左按钮ID arrRightId //右按钮ID frameWidth //显⽰框宽度 pageWidth //翻页宽度 speed //移动速度(单位毫秒，越⼩越快) space //每次移动像素(单位px，越⼤越快) autoPlay //⾃动播放 autoPlayTime //⾃动播放间隔时间(秒) initialize() //初始化完整实例代码点击此处。

excel二进制移位运算

excel二进制移位运算

excel二进制移位运算
在Excel中，可以使用位移函数 BITLSHIFT 和 BITRSHIFT 对二进制数进行左移和右移运算。

1. 左移运算：BITLSHIFT 函数将二进制数向左移动指定的位数。

语法如下：
```excel
=BITLSHIFT(二进制数, 位数)
```
其中，二进制数是需要进行位移运算的数值，位数是需要向左移动的位数。

例如，要将二进制数1101左移3位，可以使用以下公式： ```excel
=BITLSHIFT(1101, 3)
```
结果为 1101000。

2. 右移运算：BITRSHIFT 函数将二进制数向右移动指定的位数。

语法如下：
```excel
=BITRSHIFT(二进制数, 位数)
```
其中，二进制数是需要进行位移运算的数值，位数是需要向右移动的位数。

例如，要将二进制数1101右移2位，可以使用以下公式： ```excel
=BITRSHIFT(1101, 2)
```
结果为 11。

注意：
- 以上函数仅适用于 Excel 365 版本及以上版本。

- 在 Excel 中，默认情况下，二进制数字是作为十进制数字处理的，因此使用位操作函数之前，请确保将二进制数的格式设置为二进制。

jsp,表格左右滑动

jsp,表格左右滑动

竭诚为您提供优质文档/双击可除jsp,表格左右滑动篇一：jsp+js实现可排序表格首先，定义一个js：tablesort.js:functionsort(tableid,sortcolumn,nodetype){vartable=document.getelementbyid("thetable");vartablebody=table.tbodies[0];vartableRows=tablebody.rows;varrowarray=newarray();for(vari=0;i rowarray[i]=tableRows[i];}if(table.sortcolumn==sortcolumn){rowarray.reverse();}else{rowarray.sort(generatecomparetR(sortcolumn,nodetype ));}vartbodyFragment=document.createdocumentFragment();for(vari=0;itbodyFragment.appendchild(rowarray[i]);}tablebody.appendchild(tbodyFragment);table.sortcolumn=sortcolumn;}functiongeneratecomparetR(sortcolumn,nodetype){ returnfunctioncomparetR(trleft,trRight){varleftValue=convert(trleft.cells[sortcolumn].first child.nodeValue,nodetype);varrightValue=convert(trRight.cells[sortcolumn].fir stchild.nodeValue,nodetype);if(leftValuereturn-1;}else{if(leftValue>rightValue){return1;}else{return0;}}};}functionconvert(value,datatype){switch(datatype){case"int":returnparseint(value);case"float":returnparseFloat(value);case"date":returnnewdate(date.parse(value));default:returnvalue.tostring();}}然后是使用：stringpath=request.getcontextpath();stringbasepath=request.getscheme()+"://"+request.getservername()+":"+request.getserverport()+path+"/";%>">myjsptabel.jspstartingpageription"content="thisismypage"> -->标题1标题2标题3标题4标题5标题6标题723456723篇二：表格的处理与图文混排.jsp实验七表格的处理与图文混排一、实验目的1.掌握word20xx中表格的使用。

excel表格换列位置的几种方法

excel表格换列位置的几种方法

Excel表格是办公人员经常使用的重要工具之一，而在处理Excel表格时，有时会遇到需要换列位置的情况。

对于这种情况，我们可以通过多种方法来实现。

以下是几种常用的Excel表格换列位置的方法：1. 使用“剪切-粘贴”功能这是最直接也是最常用的方法。

选中需要换列位置的列，然后使用“剪切”命令（Ctrl+X）将其剪切下来；选中需要插入的位置，使用“粘贴”命令（Ctrl+V）将之前剪切的列粘贴到这个位置。

这样就可以实现列位置的换位。

2. 使用“拖拽”功能在Excel中，我们还可以通过拖拽的方式来改变列的位置。

选中需要改变位置的列的标题，然后将鼠标悬停在选中的范围边框上。

当鼠标变成一个十字箭头时，按住鼠标左键，拖动列的位置至想要放置的位置，松开鼠标左键即可完成列位置的换位。

3. 使用“插入-删除”功能Excel还提供了“插入”和“删除”功能，我们可以利用这个功能来实现列位置的调整。

选中需要插入列的位置，然后在菜单栏中选择“插入”命令，在弹出的对话框中选择“整列”选项，确定即可在选中的位置插入新的列。

同样的，如果需要删除某一列，也可以选中这一列，然后选择“删除”命令，在弹出的对话框中选择“整列”选项，确定即可删除这一列。

4. 使用“排序”功能如果表格中的数据需要按照某一列进行重新排序，我们也可以通过“排序”功能来实现列位置的调整。

选中整个表格，然后在菜单栏中选择“数据”命令，再选择“排序”选项。

在弹出的对话框中，选择需要排序的列，指定排序的顺序（升序或降序），确定即可实现列位置的调整。

5. 使用宏对于熟练掌握Excel的高级用户来说，还可以通过编写宏来实现列位置的调整。

通过编写一些代码，可以实现更加复杂和个性化的列位置调整。

在Excel中，选择“开发工具”选项卡，点击“宏”按钮，进入宏的编辑界面，编写相应的代码，保存后即可在需要的时候调用。

总结：在Excel表格中，调整列位置是一个经常会遇到的操作。

针对不同的情况，我们可以选择不同的方法来实现列位置的调整。

excel的移动或复制的使用方法

excel的移动或复制的使用方法

excel的移动或复制的使用方法
以下是一些常见的使用方法：
1. 移动或复制工作表：
- 打开要操作的工作簿，在工作表标签上右键单击要移动或复制的工作表，然后选择“移动或复制”。

- 在“移动或复制工作表”对话框中，选择要移动到的目标位置（可以是同一工作簿中的其他位置或其他工作簿）。

- 如果要复制工作表而不是移动，请勾选“建立副本”选项。

- 点击“确定”按钮完成操作。

2. 移动或复制单元格、行或列：
- 选择要移动或复制的单元格、行或列。

- 将鼠标指针放在所选内容的边框上，当鼠标指针变为十字箭头时，按住左键并拖动到目标位置。

- 如果要复制而不是移动，请在拖动时按住Ctrl 键。

你还可以使用“剪切”和“粘贴”命令来实现移动或复制操作，具体方法是：选择要移动或复制的内容，然后按Ctrl + X 进行剪切或按
Ctrl + C 进行复制，接着将光标移动到目标位置，按Ctrl + V 进行粘贴。

如何在Excel中进行数据移动

如何在Excel中进行数据移动

如何在Excel中进行数据移动Excel是一款广泛使用的电子表格软件，通过它可以对数据进行排序、筛选、计算等操作。

数据在Excel中的移动是一项基本操作，本文将介绍如何在Excel中进行数据移动。

一、复制粘贴数据复制粘贴是Excel中最常用的数据移动方式，可以快速将数据从一个单元格或一区域复制到另一个单元格或另一区域。

1. 选中需要复制的单元格或区域，可以使用鼠标拖动选中或按住Ctrl键选择多个单元格。

2. 右键点击选中的单元格或区域，选择“复制”或使用快捷键Ctrl + C进行复制。

3. 移动到目标位置，选中目标单元格或区域。

4. 右键点击目标单元格或区域，选择“粘贴”或使用快捷键Ctrl + V 进行粘贴。

二、剪切粘贴数据剪切粘贴是将数据从原位置移动到目标位置的操作，与复制粘贴类似，但剪切粘贴会删除原来的数据。

1. 选中需要剪切的单元格或区域，可以使用鼠标拖动选中或按住Ctrl键选择多个单元格。

2. 右键点击选中的单元格或区域，选择“剪切”或使用快捷键Ctrl +X进行剪切。

3. 移动到目标位置，选中目标单元格或区域。

4. 右键点击目标单元格或区域，选择“粘贴”或使用快捷键Ctrl + V进行粘贴。

三、拖拽移动数据在Excel中，还可以通过拖拽方式移动数据，这种方式适用于移动单行或单列数据。

1. 选中需要移动的单元格或区域。

2. 将鼠标移动到选中区域的边缘，光标会变为十字箭头。

3. 按住左键不放，拖拽选中的单元格或区域到目标位置。

4. 松开鼠标左键，数据将被移动到目标位置。

四、使用“填充”功能移动数据Excel的“填充”功能可以根据已有数据的规律自动填充其他单元格，通过调整填充方式，也可以进行数据的移动。

1. 选中需要移动的单元格或区域。

2. 鼠标移动到选中区域的右下角，光标会变为黑十字。

3. 点击并拖拽该点，即可向其他单元格拖动填充数据。

4. 拖动填充时，可以按住Ctrl键调整填充方式，选择拖动填充数据还是填充格式等选项。

表格第一列固定，右边内容可以左右滑动

表格第⼀列固定，右边内容可以左右滑动<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格第⼀列固定，右边内容可以左右滑动</title><style type="text/css">*{margin: 0; padding: 0}.table-wrapper{overflow-x:scroll;overflow-y:visible;width:230px;margin-left: 120px;border: 1px solid #f00;}td, th{padding: 5px 20px;width: 100px;}th:first-child{position: fixed;left: 5px}</style></head><body><div class="table-wrapper"><table id="consumption-data" class="data"><thead class="header"><tr><th>Month</th><th>第⼀列</th><th>第⼆列</th><th>第三列</th><th>第四列</th></tr></thead><tbody class="results"><tr><th>Jan</th><td>3163</td><td>3163</td><td>3163</td><td>3163</td></tr><tr><th>Feb</th><td>3163</td><td>3163</td><td>3163</td><td>3163</td></tr><tr><th>Mar</th><td>3163</td><td>3163</td><td>3163</td><td>3163</td></tr><tr><th>Apr</th><td>3163</td><td>3163</td><td>3163</td><td>3163</td></tr><tr><th>May</th><td>3163</td><td>3163</td><td>3163</td><td>3163</td></tr><tr><th>Jun</th><td>3163</td><td>3163</td><td>3163</td><td>3163</td></tr><tr><th>Jun</th><td>3163</td><td>3163</td><td>3163</td><td>3163</td></tr></tbody></table></div></body></html>。

如何在Excel中移动数据

如何在Excel中移动数据在Excel中移动数据是一个非常常见且实用的操作。

无论是对数据表格进行整理、筛选，还是将数据从一个位置移动到另一个位置，Excel都提供了多种方法来帮助我们完成这些任务。

接下来，本文将介绍几种在Excel中移动数据的常用技巧和方法。

1. 拖动单元格：拖动单元格是最简单、最直观的移动数据方法之一。

首先，选中要移动的单元格或单元格范围。

然后，将鼠标放在选中单元格的右下角，光标会变成一个四方箭头的图标。

点击并按住鼠标左键，拖动单元格到目标位置，放开鼠标即可完成移动。

这种方法适用于少量数据的移动。

2. 剪切和粘贴：剪切和粘贴是另一种常用的移动数据方法。

首先，选中要移动的单元格或单元格范围。

然后，点击剪切按钮（剪切图标通常是剪刀形状），或者使用快捷键Ctrl+X，将选中的数据剪切到剪贴板。

接着，将光标移到目标位置，点击粘贴按钮（粘贴图标通常是复制图标的变体），或者使用快捷键Ctrl+V，将数据粘贴到目标位置。

3. 复制和粘贴：复制和粘贴可用于在Excel中移动数据的另一种方法。

与剪切和粘贴类似，首先选中要移动的单元格或单元格范围。

然后，点击复制按钮（复制图标通常是两个文件重叠的形状），或者使用快捷键Ctrl+C，将选中的数据复制到剪贴板。

接着，将光标移到目标位置，点击粘贴按钮，或者使用快捷键Ctrl+V，将数据粘贴到目标位置。

与剪切和粘贴不同，复制和粘贴不会删除或清空原始数据。

4. 排序和筛选：Excel提供了强大的排序和筛选功能，可以对数据进行有序的移动和重排。

通过排序功能，可以按照特定的条件对数据进行升序或降序排列。

首先，选中要排序的数据范围，然后点击“排序”按钮（通常是A到Z或Z到A的图标），选择排序的条件和顺序，点击确定即可完成排序。

通过筛选功能，可以根据设定的条件筛选出符合条件的数据，并将它们移动到新的位置。

首先，选中要筛选的数据范围，点击“筛选”按钮（通常是漏斗形状的图标），选择要筛选的条件，点击确定即可完成筛选。

JS实现的表格操作类详解（添加，删除，排序，上移，下移）

JS实现的表格操作类详解（添加，删除，排序，上移，下移）本⽂实例讲述了JS实现的表格操作类。

分享给⼤家供⼤家参考，具体如下：运⾏效果截图如下：点击此处查看。

具体代码如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">*{font-size:14px}button{margin:3px}</style><script type="text/javascript">var mytable=null,mytable2=null;window.onload=function(){mytable=new CTable("tbl",10);mytable2=new CTable("tbl2",6);}Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this[i],i,this)}function $A(arrayLike){for(var i=0,ret=[];i<arrayLike.length;i++) ret.push(arrayLike[i]);return ret}Function.prototype.bind = function() {var __method = this, args = $A(arguments), object = args.shift();return function() {return __method.apply(object, args.concat($A(arguments)));}}function CTable(id,rows){this.tbl=typeof(id)=="string"?document.getElementById(id):id;if (rows && /^\d+$/.test(rows)) this.addrows(rows)}CTable.prototype={addrows:function(n){ //随机添加n个trnew Array(n).each(this.add.bind(this))},add:function(){ //添加1个trvar self=this;var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1),td3= tr.insertCell(-1);var chkbox=document.createElement("INPUT")chkbox.type="checkbox"chkbox.onclick=self.highlight.bind(self)td1.appendChild(chkbox)td1.setAttribute("width","35")td2.innerHTML=Math.ceil(Math.random()*99)td3.innerHTML=Math.ceil(Math.random()*99)},del:function(){ //删除所选trvar self=this$A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)})},up:function(){ //上移所选trvar self=thisvar upOne=function(tr){ //上移1个trif (tr.rowIndex>0){self.swapTr(tr,self.tbl.rows[tr.rowIndex-1])self.getChkBox(tr).checked=true}}var arr=$A(self.tbl.rows).reverse()if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){for(var i=arr.length-1;i>=0;i--){if (self.getChkBox(arr[i]).checked){arr.pop()}else{break}}arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)});},down:function(){var self=thisvar downOne=function(tr){if (tr.rowIndex<self.tbl.rows.length-1) {self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]);self.getChkBox(tr).checked=true;}}var arr=$A(self.tbl.rows)if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){for(var i=arr.length-1;i>=0;i--){if (self.getChkBox(arr[i]).checked){arr.pop()}else{break}}}arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)});},sort:function(){ //排序var self=this,order=arguments[0];var sortBy=function(a,b){if (typeof(order)=="number"){ //数字,则按数字指⽰的列排序return Number(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)?1:-1; //转化为数字类型⽐较⼤⼩}else if (typeof(order)=="function"){ //为程序,按程序的返回结果排序return order(a,b);}else{return 1;}}$A(self.tbl.rows).sort(sortBy).each(function(x){var checkStatus=self.getChkBox(x).checked;self.tbl.firstChild.appendChild(x);if (checkStatus) self.getChkBox(x).checked=checkStatus;});},rnd:function(){ //随即选择⼏⾏trvar self=this,selmax=0,tbl=self.tbl;if (tbl.rows.length){selmax=Math.max(Math.ceil(tbl.rows.length/4),1); //选择的⾏数不超过tr数的1/4$A(tbl.rows).each(function(x){self.getChkBox(x).checked=false;self.restoreBgColor(x)})}else{return alert("⽆数据可以选")}new Array(selmax).each(function(){var tr=tbl.rows[Math.floor(Math.random()*tbl.rows.length)]self.getChkBox(tr).checked=true;self.highlight({target:self.getChkBox(tr)})})},highlight:function(){ //设置tr的背景⾊var self=this;var evt=arguments[0] || window.eventvar chkbox=evt.srcElement || evt.targetvar tr=chkbox.parentNode.parentNodechkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr)},swapTr:function(tr1,tr2){ //交换tr1和tr2的位置var target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2;var tBody=tr1.parentNodetBody.replaceChild(tr2,tr1);tBody.insertBefore(tr1,target);},getChkBox:function(tr){ //从tr得到 checkbox对象return tr.cells[0].firstChild},restoreBgColor:function(tr){tr.style.backgroundColor="#ffffff"setBgColor:function(tr){tr.style.backgroundColor="#c0c0c0"}}function f(a,b){var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)}; return sumRow(a)>sumRow(b)?1:-1;}</script></head><body><button onClick="javascript:mytable.rnd()">随机选择⾏</button><button onClick="javascript:mytable.add()">添加⼀⾏</button><button onClick="javascript:mytable.del()">删除选定⾏</button><button onClick="javascript:mytable.up()">上移选定⾏</button><button onClick="javascript:mytable.down()">下移选定⾏</button><button onClick="javascript:mytable.sort(1)">按第⼀列数字排序</button><button onClick="javascript:mytable.sort(f)">按每⾏数据的和排序</button><table width=100%><tr><td valign="top"><table border id="tbl" width="80%"></table></td><td valign="top"><table border id="tbl2" width="80%"></table></td></tr></table><button onClick="javascript:mytable2.rnd()">随机选择⾏</button><button onClick="javascript:mytable2.add()">添加⼀⾏</button><button onClick="javascript:mytable2.del()">删除选定⾏</button><button onClick="javascript:mytable2.up()">上移选定⾏</button><button onClick="javascript:mytable2.down()">下移选定⾏</button><button onClick="javascript:mytable2.sort(2)">按第⼆列数字排序</button><button onClick="javascript:mytable2.sort(f)">按每⾏数据的和排序</button></body></html>希望本⽂所述对⼤家JavaScript程序设计有所帮助。

BootstrapTable表格数据左右移动功能遇到的问题（数据左右移动，列表拖拽排序，模。。。

BootstrapTable表格数据左右移动功能遇到的问题（数据左右移动，列表拖拽排序，模。

使⽤bootstrapTable实现数据左右移动的功能其实做过很多了，但原来实现的功能都是⽐较单⼀，都是选中单条数据进⾏移动。

这次需要实现的功能⽐较全⾯，中间遇到不少的坑，此次正好在这⾥将所有的功能代码梳理⼀下。

实现以下功能：1.选中单条数据进⾏左右移动2.将列表中所有数据全部进⾏左右移动3.左边的数据移动到右边后，为其增加⼀个序号列，并根据右侧列表的数据⾃动递增序号4.右侧列表中的数据可以随意拖动排序，序号⾃动变更5.在列表上的搜索框输⼊关键字，定位到列表中对应的数据并选中html代码：1<div class="movebox clearfix box-padding10">2<div class="movebox-left fl">3<p>可选考核项⽬</p>4<div class="form-inline form-inline-auto" style="padding-right: 0;">5<div class="form-group t-right10">6<select class="form-control" style="min-width: 110px" id="kaoheFW" name="kaoheFW">7<option value="2">专科</option>8<option value="1">公共</option>9</select>10</div>11<div class="form-control-radio" style="width: auto; min-width: 0;">12<input type="radio" class="radio" name="leixing" value="" checked>13<label class="f-left t-right10 t-lineheight28">全部</label>14<input type="radio" class="radio" name="leixing" value="2">15<label class="f-left t-right10 t-lineheight28">操作</label>16<input type="radio" class="radio" name="leixing" value="1">17<label class="f-left t-right10 t-lineheight28">理论</label>18</div>19<div class="form-group">20<input class="form-control" placeholder="请输⼊考核项⽬" type="text" value="" id="kaoheXM">21</div>22</div>23<div class="clear"></div>24<div class="form-table-height main-y-scroll" id="kaoheXMList">25<table class="table table-striped table-bordered table-hover text-center" id="tableleft">26<thead>2728</thead>29<tbody></tbody>30</table>31</div>32<div class="space"></div>33</div>34<div class="movebox-btn fl">35<span id="add_all" class="icon iconfont icon-youshuangjiantou"></span>36<span id="add" class="icon iconfont icon-jiantou-you" onclick="add_keShiKHXM()"></span>37<span id="remove" class="icon iconfont icon-jiantou-zuo" onclick="remove_keShiKHXM()"></span>38<span id="remove_all" class="icon iconfont icon-zuoshuangjiantou"></span>39</div>40<div class="movebox-right fl">41<p>已选择考核项⽬</p>42<div class="form-inline form-inline-auto" style="padding-right: 0;">43<div class="form-group t-right10">44<select class="form-control" style="min-width: 110px" id="keshiKHFW" name="keshiKHFW">45<option value="2">专科</option>46<option value="1">公共</option>47</select>48</div>49<div class="form-control-radio" style="width: auto; min-width: 0;">50<input type="radio" class="radio" name="keshiLX" value="" checked>51<label class="f-left t-right10 t-lineheight28">全部</label>52<input type="radio" class="radio" name="keshiLX" value="2">53<label class="f-left t-right10 t-lineheight28">操作</label>54<input type="radio" class="radio" name="keshiLX" value="1">55<label class="f-left t-right10 t-lineheight28">理论</label>56</div>57<div class="form-group">58<input class="form-control" placeholder="请输⼊考核项⽬" type="text" value="" id="keshiKHXM">59</div>60</div>61<div class="clear"></div>62<div class="form-table-height main-y-scroll" id="keshiKHXMList">63<table class="table table-striped table-bordered table-hover text-center" id="tableright">64<thead>6566</thead>67<tbody>68</tbody>69</table>70</div>71<p class="t-gray">说明：拖拽⾏进⾏排序</p>72</div>73</div>View Code初始化bootstraptable:1function Init_kaoHeXM() {23//获取关键字4var kaoHeFW = $('#kaoheFW option:selected').val();;5var kaoHeLX = $('input[name="leixing"]:checked').val();67 $('#tableleft').bootstrapTable("destroy");8//初始化table9 $('#tableleft').bootstrapTable({10 url: "/HLGL/ChengJiGL/GetkaoheXMList",11 postData: function () {12return { "keShiID": keShiID, "kaoHeFW": kaoHeFW, "kaoHeLX": kaoHeLX }13 },14 columns: [15 { field: 'KAOHEXMID', title: "考核项⽬ID", visible: true },16 { field: 'XIANGMUMC', title: "项⽬名称", visible: true },17 { field: 'KAOHELX', title: "考核类型", visible: true, formatterType: 'JSON', formatter: { '1': '理论', '2': '操作' } }1819 ],20 pagination: false,21 autoSelectFirstRow: false,22//height: $(window).height() - 11723 });24 }25function Init_keShiKHXM() {26//获取关键字27var kaoHeFW = $('#keshiKHFW option:selected').val();;28var kaoHeLX = $('input[name="keshiLX"]:checked').val();2930 $('#tableright').bootstrapTable("destroy");31 $('#tableright').bootstrapTable({32 url: "/HLGL/ChengJiGL/GetkeshiKHXMList",33 postData: function () {34return { "keShiID": keShiID, "kaoHeFW": kaoHeFW, "kaoHeLX": kaoHeLX }35 },36 columns: [37 { field: 'PAIXUXH', title: "排序序号", width: "5%", visible: true, class: "index", },38 { field: 'KESHIKHXMID', title: "科室考核项⽬ID", visible: false },39 { field: 'KAOHEXMID', title: "考核项⽬ID", visible: true },40 { field: 'XIANGMUMC', title: "项⽬名称", visible: true },41 { field: 'KAOHELX', title: "考核类型", visible: true, formatterType: 'JSON', formatter: { '1': '理论', '2': '操作' } }4243 ],44 pagination: false,//不分页45 autoSelectFirstRow: false//默认不选中第⼀⾏46//height: $(window).height() - 11747 })48 }View Code初始化后定义了两个变量存放bootstrapTable：$tableLeft = $('#tableleft').bootstrapTable();$tableRight = $('#tableright').bootstrapTable();下⾯就开始实现第⼀个功能：选中单条数据进⾏左右移动，右移时增加序号列并在原有基础上递增这个功能⽐较简单，没有什么需要注意的地⽅1//添加科室考核项⽬2function add_keShiKHXM() {3//注意getSelectedRow这个是内部重新封装的⽅法，原⽣获取选中⾏应该是$("#tableleft").bootstrapTable('getSelections');4var selectContent = $tableLeft.bootstrapTable('getSelectedRow');5if (selectContent == "" || selectContent==null || selectContent == undefined) {6 HRP.AlertError("请先选择需要操作的数据！");7return false;8 }9 selectContent.KESHIID = keShiID;1011//获取到右侧列表的排序序号，给左侧选中⾏进⾏设置12var len = $('#tableright tr .index').length;13if (len == 1)14 { selectContent.PAIXUXH = 1; }15else {16 selectContent.PAIXUXH = parseInt($('#tableright tr').eq(len - 1).children(0).eq(0)[0].innerText) + 1;//len-1 是因为有标题列17 }181920 $tableRight.bootstrapTable("append", selectContent);21var selects = $tableLeft.bootstrapTable('getSelectedRow');2223var KAOHEXMID = selects.KAOHEXMID;2425 $tableLeft.bootstrapTable('remove', {26 field: 'KAOHEXMID',27 values: [String(KAOHEXMID)]28 });2930 }3132//移除科室考核项⽬33function remove_keShiKHXM() {34//注意getSelectedRow这个是内部重新封装的⽅法，原⽣获取选中⾏应该是$("#tableright").bootstrapTable('getSelections');35var selectContent = $tableRight.bootstrapTable('getSelectedRow');36if (selectContent == "" || selectContent==null || selectContent == undefined) {37 HRP.AlertError("请先选择需要操作的数据！");38return false;39 }404142 $tableLeft.bootstrapTable("append", selectContent);43var selects = $tableRight.bootstrapTable('getSelectedRow');4445var daima = selects.KAOHEXMID;46 $tableRight.bootstrapTable('remove', {47 field: 'KAOHEXMID',48 values: [String(daima)]49 });50 };第⼆个功能：将列表所有数据进⾏左右移动1 $("#add_all").click(function () {23if ($("#tableleft tbody tr.no-records-found").length > 0) {4 HRP.AlertError("当前没有可以操作的数据！");5return false;6 }7 $("#tableright tbody tr.no-records-found").remove();//这⼀句是删除掉表格中没有数据时的提⽰⾏8// $("#tableright").find(".no-records-found").remove();·9var len = 0;10if ($("#tableright tbody tr").length == 0) {11 len = 1;12 }13else {14 len = parseInt($("#tableright tbody tr:last-child .index").html()) + 1;15 }1617//下⾯两个for循环不能合在⼀起，因为delete以后eq(i)获取的数据会随着改变，不是原来索引的数据18for (var i = 0; i < $("#tableleft tbody tr").length; i++) {19var content = {"PAIXUXH":len,"KAOHEXMID":$("#tableleft tbody tr").eq(i).find("td")[0].innerText,"XIANGMUMC":$("#tableleft tbody tr").eq(i).find("td")[1].innerText,"KAOHELX":$("#tableleft tbody tr").eq(i).find("td")[220 $tableRight.bootstrapTable("append", content);21 len++;22 }2324//$("#tableleft tbody tr").remove();25//这⾥不能⽤remove，此时需要⽤bootstrapTable⾃带的删除，否则下次对表进⾏操作时remove的数据会再次出现26//2728var xiangMuLength = $("#tableleft tbody tr").length;29for (var j = 0; j < xiangMuLength; j++) {30var index = $("#tableleft tbody tr").eq(0).attr("data-index");31 $tableLeft.bootstrapTable('deleteRow',index.toNumber());32 }33 });3435 $("#remove_all").click(function () {36if ($("#tableright tbody tr.no-records-found").length > 0) {37 HRP.AlertError("当前没有可以操作的数据！");38return false;39 }40 $("#tableleft tbody tr.no-records-found").remove();41 $("#tableright tbody td.index").remove();424344//下⾯两个for循环不能合在⼀起，因为delete以后eq(i)获取的数据会随着改变，不是原来索引的数据45for (var i = 0; i < $("#tableright tbody tr").length; i++) {4647var content = {};48 content = {"KAOHEXMID":$("#tableright tbody tr").eq(i).find("td")[0].innerText,"XIANGMUMC":$("#tableright tbody tr").eq(i).find("td")[1].innerText,"KAOHELX":$("#tableright tbody tr").eq(i).find("td")[2].innerText}49 $tableLeft.bootstrapTable("append", content);50 }5152var keShiXMLength = $("#tableright tbody tr").length;53for (var j = 0; j < keShiXMLength; j++) {5455var index = $("#tableright tbody tr").eq(0).attr("data-index");56 $tableRight.bootstrapTable('deleteRow',index.toNumber());57 }585960 }); 这⾥全部数据的左右移动我⽤的是遍历再使⽤bootstrapTable的append⽅法来进⾏插⼊，原本我是直接使⽤的html的appendto⽅法来进⾏实现，结果发现存在严重的bug。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

分享主题
时
间
2010-7-22 记录员 陈德峰

分
享
主
题
描
述

Ext.EditorGridPanel可编辑表格，编辑后随鼠标焦点平移问题。
具
体
内
容

1.在第一次使用
EditorGridPanel时候遇到一个随鼠标焦点自动右移的问题。

如图：

而且下方不会自动出现下拉框。
解决办法：1.
autoExpandColumn: '',不能添加该属性，自适应宽度。

2．自动填满grid
viewConfig: {
forceFit:true
},
这个属性也需要去掉。
3.需要将表格中的每列固定长度，因为上面2个属性注释掉表格列宽会变得比较混乱，我自己
的解决办法是手动设定了列宽，问题就解决了。

网上给的办法是将
ext-all-debug.js，中的this.view.focusCell(ed.row, ed.col); 这段代码注释掉，
我试验了结果不好使。

相关文档
最新文档