thomas0988
- 浏览: 484994 次
- 性别:
- 来自: 南阳
-
文章分类
最新评论
-
yuanhongb：
这么说来，感觉CGI和现在的JSP或ASP技术有点像啊
cgi -
draem0507：
放假了还这么勤啊
JXL操作Excel -
chenjun1634：
学习中！！
PHP/Java Bridge -
Jelen_123：
好文章，给了我好大帮助！多谢！
hadoop安装配置 ubuntu9.10 hadoop0.20.2 -
lancezhcj：
一直用job
Oracle存储过程定时执行2种方法(转)
终于能闲下来做点自己想做的事情了..
简单表格排序
可以双击编辑 自定义编辑后的 规则
可拖动列进行列替换
可推动边框进行列宽度的缩放
ie6下 中文不自动换行
非ie下字母和数字也不自动换行确实让人恼火
chrome浏览器下点击运行好像问题很大 拿到本地测试会比较好
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Table</title>
</head>
<style type="text/css">
body{ font-size:12px}
#tab{ border-collapse: collapse;}
.edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;}
#tab thead td{ background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp);color:#183C94;word-break:break-all}
#tab tbody td{overflow:hidden;word-break:break-all;}
#tab td{border: 1px solid #CECFCE;height:20px;line-height:20px;vertical-align:middle; }
#tab td.tc{text-align:center;}
.div{width:10px;height:6px; border:1px solid #999999; background-color:#FFFFFF; position:absolute; display:none;}
.line{ width:2px; background-color:#999999; position:absolute; display:none}
.dr{height:100%;width:2px;background:#CECFCE;float:right;margin-right:-1px;cursor:sw-resize}
.r{float:right;}
.l{float:left;}
#tab thead td.thover{ background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif);background-repeat:repeat-x;}
</style>
<body >
<table id="tab" border="0" cellspacing="1" cellpadding="0">
<thead>
<tr>
<td width="80"class="tc" ><span class="l">ID</span><div class="r dr"></div></td>
<td width="80"class="tc"><span class="l">选中</span><div class="r dr"></div></td>
<td width="130" class="tc"><span class="l">姓名</span><div class="r dr"></div></td>
<td width="130" class="tc" ><span class="l">生日</span><div class="r dr"></div></td>
<td width="220" class="tc" ><span class="l">备注</span><div class="r dr"></div></td>
</tr>
</thead>
<tbody>
<tr>
<td height="16">1</td>
<td><input type ="checkbox"><input name="ss" type="radio" /></td>
<td>小三</td>
<td>1982-05-27</td>
<td>杯具,全是杯具</td>
</tr>
<tr>
<td>3</td>
<td><input type ="checkbox"><input name="ss" type="radio" /></td>
<td>李四</td>
<td>1983-06-27</td>
<td>恩恩我魔兽技术不错</td>
</tr>
<tr>
<td>2</td>
<td><input type ="checkbox"><input name="ss" type="radio" /></td>
<td>王五</td>
<td>1987-05-27</td>
<td>波斯王子 时之刃还不错</td>
</tr>
<tr>
<td>4</td>
<td><input type ="checkbox"><input name="ss" type="radio" /></td>
<td>赵六</td>
<td>1988-05-27</td>
<td>我叫赵六</td>
</tr>
<tr>
<td>5</td>
<td><input type ="checkbox"><input name="ss" type="radio" /></td>
<td>朱八</td>
<td>1984-05-27</td>
<td>洗洗睡吧</td>
</tr>
<tr>
<td>6</td>
<td><input type ="checkbox"><input name="ss" type="radio" /></td>
<td>阿斯多夫</td>
<td>1984-06-27</td>
<td>阿斯多夫暗室逢灯</td>
</tr>
<tr>
<td>7</td>
<td><input type ="checkbox"><input name="ss" type="radio" /></td>
<td>杯具</td>
<td>1984-06-27</td>
<td>很多的杯具</td>
</tr>
<tr>
<td>8</td>
<td><input type ="checkbox"><input name="ss" type="radio" /></td>
<td>餐具</td>
<td>1984-02-27</td>
<td>很多的餐具</td>
</tr>
<tr>
<td>8</td>
<td><input type ="checkbox"><input name="ss" type="radio" /></td>
<td>洗具</td>
<td>1984-08-27</td>
<td>很多的洗具</td>
</tr>
<tr>
<td>9</td>
<td><input type ="checkbox"><input name="ss" type="radio" /></td>
<td>内牛满面</td>
<td>1984-12-27</td>
<td>10快一晚</td>
</tr>
<tr>
<td>10</td>
<td><input type ="checkbox"><input name="ss" type="radio" /></td>
<td>犀利哥</td>
<td>1984-12-21</td>
<td>嘿嘿</td>
</tr>
</tbody>
</table>
<script language="javascript">
(function(window,undefined){
window.Sys = function (ua){
var b = {
ie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
},vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
}
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
b.ie6 = b.ie && parseInt(b.version, 10) == 6;
b.ie7 = b.ie && parseInt(b.version, 10) == 7;
b.ie8 = b.ie && parseInt(b.version, 10) == 8;
return b;
}(window.navigator.userAgent.toLowerCase());
window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);
window.$ = function(Id){
return document.getElementById(Id);
};
window.addListener = function(element,e,fn){
!element.events&&(element.events = {});
element.events[e]&&(element.events[e][addListener.guid++]=fn)||(element.events[e] = {'0':fn});
element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);
};
window.addListener.guid = 1;
window.removeListener = function(element,e,fn){
var handlers = element.events[e],type;
if(fn){
for(type in handlers)
if(handlers[type]===fn){
element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn);
delete handlers[type];
}
}else{
for(type in handlers){
element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]);
delete handlers[type];
}
}
};
window.setStyle = function(e,o){
if(typeof o=="string")
e.style.cssText=o;
else
for(var i in o)
e.style[i] = o[i];
};
var slice = Array.prototype.slice;
window.Bind = function(object, fun) {
var args = slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
};
};
window.BindAsEventListener = function(object, fun,args) {
var args = slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
};
//copy from jQ
window.Extend = function(){
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options;
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
i = 2;
}
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
target = {};
for(;i<length;i++){
if ( (options = arguments[ i ]) != null )
for(var name in options){
var src = target[ name ], copy = options[ name ];
if ( target === copy )
continue;
if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
}
else if(copy !== undefined)
target[ name ] = copy;
}
}
return target;
};
window.objPos = function(o){
var x = 0, y = 0;
do{x += o.offsetLeft;y += o.offsetTop;}while((o=o.offsetParent));
return {'x':x,'y':y};
}
window.Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
window.hasClass = function(element, className){
return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
} ;
window.addClass = function(element, className) {
!this.hasClass(element, className)&&(element.className += " "+className);
}
window.removeClass = function(element, className) {
hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' '));
}
})(window);
var Table = new Class({
options :{
minWidth : 62
},
initialize : function(tab,set){
this.table = tab;
this.rows = []; //里面记录所有tr的引用
this.sortCol = null; //记录哪列正在排序中
this.inputtd = null; //记录哪个td正在被编辑了
this.editconfig = {}; //编辑表格的规则和提示
this.thead = tab.getElementsByTagName('thead')[0];
this.theadTds = tab.getElementsByTagName('thead')[0].getElementsByTagName('td'); //常常用到的dom集合可以用个属性来引用
this.tbodyTds = tab.getElementsByTagName('tbody')[0].getElementsByTagName('td');
this.closConfig = {
on : false,
td : null,
totd : null
};
this.widthConfig = {
td : null,
nexttd : null,
x : 0,
tdwidth : 0,
nexttdwidth : 0
};
Extend(this,this.options);
//不知道原因 反正不设置就会乱跳
(Sys.ie6||Sys.chrome)&&(tab.width=tab.offsetWidth)
//记录那些checkbox,radio被选中了 ie6在做dom操作的时候不会记住这些状态
if(Sys.ie6){
this.checkbox = {};
var checkboxs = tab.getElementsByTagName('input'),i=0,l=checkboxs.length;
for(;i<l;i++)
(checkboxs[i].type=="checkbox"||checkboxs[i].type=="radio")&&
addListener(checkboxs[i],"click",Bind(this,function(elm,i){
elm.checked==true?(this.checkbox[i] = elm):(delete this.checkbox[i]);
},checkboxs[i],i));
};
var i=0,l=set.length,rows =tab.tBodies[0].rows,d=document,tabTads=tab.getElementsByTagName('td'),length=this.theadTds.length;
//编辑用的input
this.input = d.createElement('input');
this.input.type = "text";
this.input.className = 'edit';
//用于显示正在拖拽的div
this.div = d.body.appendChild(d.createElement('div'));
this.div.className ="div";
//进行缩放的时候显示的竖线
this.line = d.body.appendChild(d.createElement('div'));
this.line.className = 'line';
this.line.style.top = objPos(tab).y +"px";
//遍历set 做一些设置
for(;i<l;i++){
//给需要排序的猎头绑定事件
addListener(this.theadTds[set[i].id],'click',Bind(this,this.sortTable,this.theadTds[set[i].id],set[i].type));
//给需要编辑的表给列定义所需配置
set[i].edit&&(this.editconfig[set[i].id]={rule:set[i].edit.rule,message:set[i].edit.message});
}
//把 所有的tr放到一个数组 用于排序
for( i=0,l=rows.length;i<l;i++)
this.rows[i]=rows[i];
//遍历所有的td 做一些设置
for( i=0,l=tabTads.length;i<l;i++){
//将头部的td全部做上标记 拖拽的时候要用到
i<length&&tabTads[i].setAttribute('clos',i);
//将需要编辑的td添加edit属性
i>=length&&this.editconfig[i%length]&&tabTads[i].setAttribute('edit',i%length);
}
//绑定 拖拽 和缩放的操作
addListener(this.thead,'mousedown',BindAsEventListener(this,this.dragOrWidth));
//拖拽的时候 记录移动到了那列td上
addListener(this.thead,'mouseover',BindAsEventListener(this,this.theadHover));
//唉
addListener(this.thead,'mouseout',BindAsEventListener(this,this.theadOut));
//绑定编辑事件 根据e.srcElement or e.target去判断是哪个表格被编辑
addListener(tab,'dblclick',BindAsEventListener(this,this.edit));
//当离开input时候保存下修改的内容
addListener(this.input,'blur',Bind(this,this.save,this.input));
},
sortTable :function(td,type){ //td为点击的那个元素 n 为哪一列进行排序 type为进行什么类型的排序
var frag=document.createDocumentFragment(),span=td.getElementsByTagName('span')[0],str= span.innerHTML;
if(td===this.sortCol){
this.rows.reverse();
span.innerHTML =str.replace(/.$/,str.charAt(str.length-1)=="↓"?"↑":"↓") ;
}else{
this.rows.sort(this.compare(td.getAttribute('clos'),type));
span.innerHTML = span.innerHTML + "↑";
this.sortCol!=null&&(this.sortCol.getElementsByTagName('span')[0].innerHTML = this.sortCol.getElementsByTagName('span')[0].innerHTML.replace(/.$/,''));//把之前那列排序的标识去掉
};
for(var i=0,l=this.rows.length;i<l;i++)
frag.appendChild(this.rows[i]);
this.table.tBodies[0].appendChild(frag);
if(Sys.ie6){
for(var s in this.checkbox)
this.checkbox[s].checked = true;
}
this.sortCol = td; //记录哪一列正在排序中
},
compare :function(n,type){
return function (a1,a2){
var convert ={
int : function(v){return parseInt(v)},
float : function(v){return parseFloat(v)},
date : function(v){return v.toString()},
string : function(v){return v.toString()}
};
!convert[type]&&(convert[type]=function(v){return v.toString()});
a1 =convert[type](a1.cells[n].innerHTML);
a2 =convert[type](a2.cells[n].innerHTML);
return a1==a2?0:a1<a2?-1:1;
};
},
edit: function(e){
var elem = this.inputtd=e.srcElement || e.target;
if(!elem.getAttribute('edit'))return;
this.input.value = elem.innerHTML;
elem.innerHTML = "";
elem.appendChild(this.input);
this.input.focus();
},
save : function(elem){
var editinfo=this.editconfig[elem.parentNode.getAttribute('edit')],status={
"[object Function]" : 'length' in editinfo.rule&&editinfo.rule(this.input.value)||false,
"[object RegExp]" : 'test' in editinfo.rule&&editinfo.rule.test(this.input.value)||false
}[Object.prototype.toString.call(editinfo.rule)],_self=this;
//如果不符合条件 修改提示信息
typeof status != "boolean"&&(editinfo.message = status);
if(status===true){
this.inputtd.innerHTML = this.input.value;
this.inputtd=null;
}else{
alert(editinfo.message);
//firefox下 直接用input.focus()不会执行 用setTimeout可以执行
setTimeout(function(){_self.input.focus()},0);
}
},
theadHover : function(e){
var elem = e.srcElement || e.target;
if(elem.nodeName.toLowerCase() ==='td'&&this.closConfig.on){
this.closConfig.totd = elem.getAttribute('clos');
!hasClass(elem,'thover')&&addClass(elem,'thover');
}
},
theadOut : function(e){
var elem = e.srcElement || e.target;
if(elem.nodeName.toLowerCase() ==='td'&&this.closConfig.on)removeClass(elem,'thover')
},
dragOrWidth : function(e){
var elem = e.srcElement || e.target,widthConfig=this.widthConfig;
//执行拖拽
if(elem.nodeName.toLowerCase()==='td'){
this.closConfig.td = elem.getAttribute('clos');
addListener(document,'mousemove',BindAsEventListener(this,this.dragMove));
addListener(document,'mouseup',Bind(this,this.dragUp));
this.closConfig.on = true;
Sys.ie?this.thead.setCapture(false):e.preventDefault();
}
//执行宽度缩放
if(elem.nodeName.toLowerCase()==='div'){
Sys.ie?(e.cancelBubble=true):e.stopPropagation();
//如果是最后一个td里面的div 不进行缩放
if(this.theadTds[this.theadTds.length-1]===elem.parentNode)return
Sys.ie?this.thead.setCapture(false):e.preventDefault();
widthConfig.x = e.clientX;
widthConfig.td = elem.parentNode;
widthConfig.nexttd = widthConfig.td.nextSibling;
while(widthConfig.nexttd.nodeName.toLowerCase()!="td"){
widthConfig.nexttd = widthConfig.nexttd.nextSibling;
};
widthConfig.tdwidth = widthConfig.td.offsetWidth;
widthConfig.nexttdwidth = widthConfig.nexttd.offsetWidth;
this.line.style.height = this.table.offsetHeight +"px";
addListener(document,'mousemove',BindAsEventListener(this,this.widthMove));
addListener(document,'mouseup',Bind(this,this.widthUp));
}
},
dragMove : function(e){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
setStyle(this.div,{display:"block",left:e.clientX+9+"px",top:e.clientY+20+"px"});
},
dragUp :function(){
var closConfig = this.closConfig,rows = this.table.getElementsByTagName('tr'),td,n,o,i=0,l=rows.length;
this.div.style.display = "none";
removeListener(document,'mousemove');
removeListener(document,'mouseup');
Sys.ie&&this.thead.releaseCapture();
closConfig.on = false;
if(closConfig.totd===null)return;
removeClass(this.theadTds[closConfig.totd],'thover');
//在同一列 不进行列替换
if(closConfig.td === closConfig.totd)return;
//进行列替换 如果
if(closConfig.td*1+1===closConfig.totd*1){
n = closConfig.totd;
o = closConfig.td;
}else{
n = closConfig.td;
o = closConfig.totd;
}
for(;i<l;i++){
td = rows[i].getElementsByTagName('td');
rows[i].insertBefore(td[n],td[o]);
}
//重新标识表头
for(i=0,l=this.theadTds.length;i<l;i++)
this.theadTds[i].setAttribute('clos',i);
closConfig.totd=closConfig.td=null;
},
widthMove : function(e){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var widthConfig = this.widthConfig,x = e.clientX - widthConfig.x,left = e.clientX,clientX=left;
if(clientX<widthConfig.x&&widthConfig.x - clientX>widthConfig.tdwidth-this.minWidth){
left = widthConfig.x - widthConfig.tdwidth+this.minWidth;
}
if(clientX>widthConfig.x&&clientX - widthConfig.x>widthConfig.nexttdwidth-this.minWidth){
left =widthConfig.x + widthConfig.nexttdwidth-this.minWidth;
}
setStyle(this.line,{display:"block",left:left+"px"});
},
widthUp : function(){
this.line.style.display = "none";
var widthConfig = this.widthConfig,x= parseInt(this.line.style.left) - widthConfig.x;
widthConfig.nexttd.style.width = widthConfig.nexttdwidth -x -1 +'px';
widthConfig.td.style.width = widthConfig.tdwidth + x -1 +'px';
Sys.ie&&this.thead.releaseCapture();
removeListener(document,'mousemove');
removeListener(document,'mouseup');
}
});
window.onload = function(){
function checkName(val){
if(val.replace(/^\s+$/g,'')==='') return '姓名输入不能为空';
if(val.replace(/^\s+|\s+$/,'').length>10) return '姓名长度不能大于10个字符';
if(!/^[\u4e00-\u9fa5a-z]+$/i.test(val)) return '姓名只能输入中文或者是字母';
return true;
};
function checkRemark(val){
if(val.replace(/^\s+$/g,'')==='') return '备注输入不能为空';
if(val.replace(/^\s+|\s+$/,'').length>15) return '备注长度不能大于15个字符';
if(!/^[\u4e00-\u9fa5\w\s]+$/i.test(val)) return '备注只能输入中文数字下划线空格';
return true;
}
var set = [
{id:0,type:"int"},
{id:2,type:"string",edit:{rule:checkName,message:''}},
{id:3,type:"date",edit:{rule:/^\d{4}\-\d{2}\-\d{2}$/,message:"按这中格式输入日期 1985-02-30"}},
{id:4,type:"string",edit:{rule:checkRemark,message:''}}
];
new Table($("tab"),set);
}
</script>
</body>
</html>
分享到：
发表评论
-
mysql 定时任务
2015-11-03 09:57 778定时任务 查看event是否开启: show variabl ... -
tomcat服务器大数量数据提交Post too large解决办法
2015-10-29 11:05 738tomcat默认设置能接收HTTP POST请求的大小最大 ... -
Tomcat启动内存设置
2015-10-20 15:40 696Tomcat的启动分为startupo.bat启动和注册为w ... -
Java串口包Javax.comm的安装
2015-10-12 16:32 698安装个java的串口包安装了半天，一直找不到串口，现在终于搞 ... -
在 Java 应用程序中访问 USB 设备
2015-10-10 17:49 961介绍 USB、jUSB 和 JSR- ... -
mysql定时器
2015-08-04 14:01 6065.1以后可以使用 ALTER EVENT `tes ... -
oracle安装成功后，更改字符集
2015-07-23 11:53 641看了网上的文章，乱码有以下几种可能 1. 操作系统的字符集 ... -
js iframe 打印 打印预览 页眉页脚的设立
2015-06-08 15:21 1187js iframe 打印 打印预览 页眉页脚的设置 1、 ... -
不同小图标的编码网页中的大于号，小于号，应该用编码来代替,HTML中特殊字符和与之对应的ASCII代码
2015-06-08 14:44 3275上面两个符号的HTML代 ... -
利用html5调用本地摄像头拍照上传图片
2015-05-18 09:36 2610测试只有PC上可以，手机上不行 <!DOCTYPE ... -
必须Mark！最佳HTML5应用开发工具推荐
2015-05-15 22:50 964摘要：HTML5自诞生以来，作为新一代的Web标准，越来 ... -
Mobl试用二
2015-05-13 14:28 648最近有空又看了一下Mobl的一些说语法，备忘一下： 1 ... -
Nginx安装部署
2015-05-08 19:59 481Nginx ("engine x") 是 ... -
Nginx配置文件详细说明
2015-05-08 19:58 616在此记录下Nginx服务器nginx.conf的配置文件说明 ... -
table中的超长字符串用省略号表示的css样式
2015-05-06 15:54 1344<style> table td{white- ... -
axis调用cxf
2015-04-23 13:51 5571、写address时不用加？wsdl Service s ... -
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2015-04-19 18:03 611<html> <head>< ... -
javascript:window.print() 打印
2015-04-17 17:03 6441.JavaScript打印<input id=&qu ... -
网页设置A4大小
2015-04-16 19:53 1224在公制长度单位与屏幕分辨率进行换算时，必须用到一个DPI(D ... -
表格设置边框 效果
2015-04-16 18:22 632第1种对表格设置边框 效果 站名 网址 说明 ...
相关推荐
简单表格排序 可以双击编辑 自定义编辑后的 规则 可拖动列进行列替换 可推动边框进行列宽度的缩放 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
数据表格自定义排序 数据表格添加复选框 数据表格自定分页工具栏 数据表格行内编辑器 扩展数据表格行内编辑器 数据表格列运算 合并数据表格单元格 创建自定义视图 创建数据表格页底摘要 条件设置...
5. **自定义事件监听**：在实现拖动效果时，通常需要监听`mousedown`、`mousemove`和`mouseup`等事件，根据用户的鼠标动作来更新表格的DOM结构。 6. **CSS动画增强**：为了使拖动过程更流畅，开发者会利用CSS3的...
5. 缩放表格：调整表格边框，或者设置表格比例以适应文档需求。 三、设置表格格式 优化表格外观，提升阅读体验： 1. 表格的自动套用格式：点击“设计”菜单的“套用表格样式”进行快速格式化。 2. 表格的自动调整：...
这些功能通常用于创建可自定义排序的列表、布局调整或图像编辑等场景。 1. **js行拖动**： js行拖动通常涉及到HTML表格中的行或者列表项（li）的拖放。这种功能可以通过监听鼠标事件，如`mousedown`，`mousemove`...
按住Shift键拖动列边框可等比例缩放，按住Alt键拖动行边框可等比例缩放行高。 3. **表格样式**：在“设计”选项卡中，可以改变表格的边框样式、颜色、宽度，以及表格的整体样式，包括预设的表格主题。 4. **合并与...
2. 表格排序：在可排序的表格中，用户可以通过拖拽行来调整数据顺序。 3. 网页布局：在网页设计工具或画布类应用中，用户可以通过拖拽元素调整布局。 4. 游戏：在某些网页游戏中，角色或物品的拖放操作也是必不可...
对于需要处理数据或展示信息的场景，ueditor提供了完整的表格创建和编辑功能，包括单元格合并、行列增删、排序等。 6. **多语言支持** 由于ueditor是开源项目，开发者可以根据需求自定义编辑器的语言环境，支持...
5. **数据排序与筛选**：在【数据】功能区的【排序和筛选】分组中，可以对数据进行升序或降序的排序，同时进行自定义筛选，如设置成绩大于或等于80且实验成绩大于或等于17的条件，帮助快速找到符合特定条件的数据。...
5. **滚动与缩放**：MDSpreadView支持水平和垂直滚动，对于大数据量的表格，可以调整行列的可见范围，提高浏览效率。 6. **事件处理**：提供丰富的触摸和键盘事件处理接口，方便开发者响应用户的操作，如点击、双击...
报表可以包含各种元素，如文本、表格、图表、图片等，这些元素可以通过LabVIEW的工具栏或者编程接口添加和编辑。 对于“插入文字”功能，LabVIEW提供了文本框控件，可以用于输入和展示静态或动态的文字信息。可以...
- **元素放置**：可以将各种图形对象、文本框、表格等元素放置到页面上，这些元素可以通过拖拽的方式进行调整位置和大小。 - **样式设定**：为报表中的各个元素定义样式，包括字体、颜色、边框等，以确保报表的...
除了表格排序，jQuery还能实现列表项的拖放排序。用户可以通过拖动来重新排列列表，这种功能在待办事项列表或项目管理工具中常见。 ### 10. **拖动2例（More Dragging Examples）** 除了基础的拖动，还有更高级的...
- 除了基本的升序和降序排序外，还可以根据自定义的排序条件来进行排序，这为数据分析提供了极大的灵活性。 2. **撤销与重复操作**： - “撤销”功能允许用户取消上一步的操作，这对于防止误操作导致的数据丢失...
22.11 Ajax效果：可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性的对象 22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及...
以上就是从提供的文件内容中提取出的相关知识点，涵盖了Excel的基本操作，包括排序、计算、日期格式化、逻辑函数以及图表编辑，以及PowerPoint中的幻灯片设计、背景设置、声音和图片的插入与设置。这些都是在IT技术...
第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 ...22.11 Ajax效果：可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性...
2. **表格组件**：LigerUI 表格组件提供了强大的数据展示和操作功能，包括分页、排序、过滤、行编辑等，同时支持异步加载数据，提高了用户体验。 3. **对话框组件**：LigerUI 的对话框可以用来显示提示信息、进行...