让table变成exls的示例代码


Posted in Javascript onMarch 24, 2014

网页代码

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript" src="jquery-2.0.3.min.js"></script> 
<script type="text/javascript" src="ManualTable2.js"></script> 
<title>无标题文档</title> 
<script> 
$(document).ready(function(e) { 
$("#GridTable").ManualTable({ 
//ChangeAction:function(){ 
// var inputs=$(this).parent().parent().find("input"); 
//alert(inputs.length); 
} 
}); 
}); 
</script> 
</head> <body > 
<table id="GridTable"> 
<thead> 
<th>员工编号</th> 
<th >姓名</th> 
<th >工作部门</th> 
<th>职务</th> 
<th>家庭住址</th> 
<th >联系电话</th> 
<th >手机</th> 
<th>备注</th> 
</thead> 
<tr> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
</tr> 
<tr> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
</tr> 
<tr> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
</tr> 
<tr> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
<td>456456</td> 
</tr> 
</table> 
</body> 
</html> 

<pre code_snippet_id="251084" snippet_file_name="blog_20140322_1_1781185" name="code" class="javascript">// 根据网上前辈的脚本改了一下,添加了一些功能,也许对初学者有些帮助 
//这个脚本就是个装饰作用,对原生的table支持,不过不支持table有其它元素 
(function ($) { 
$.fn.ManualTable = function (options) { 
var tabid = $(this).attr("id"); 
var lineMove = false; 
var currTh = null; 
var opts = $.extend({}, $.fn.ManualTable.defaults, options); 
$(this).css({ 
"*border-collapse": "collapse", 
"border-spacing": 0, 
"width": "100%", 
"border": "solid " + opts.BorderColor + " 1px", 
"font-size": opts.TableFontSize 
}); 
$("#" + tabid + " th").css({ 
"background": opts.ThBackColor, 
"border-left": "solid " + opts.BorderColor + " 1px", 
"height": opts.ThHeight, 
"color": opts.ThColor 
}); 
$("#" + tabid + " td").css({ 
"border-left": "solid " + opts.BorderColor + " 1px", 
"height": opts.TdHeight, 
"border-top": "solid " + opts.BorderColor + " 1px", 
"padding": "0", 
"color": opts.TdColor, 
"background": opts.TdBackColor 
}); 
$("#" + tabid + " th:first-child,#" + tabid + " td:first-child").css({ 
"border-left": "none" 
}); 
/* 
*/ 
var str = $("#" + tabid + " td").html(); 
$("#" + tabid + " td").html("<input style='width:100%; border:none; height:100%;vertical-align:middle' value='" + str + "' readonly/>"); 

$("#" + tabid + " input").css({ 
"background-color": opts.TdBackColor, 
"color": opts.TdColor 
}); 
if (opts.IsODDChange) { 
$("#" + tabid + " tr:even").find("input").css({ 
"background-color": opts.ChangeColor1 
}); 
} 
if (opts.IsMoveChange == true) { 
$("#" + tabid + " tr").hover(function () { 
$(this).find("input").css("background", opts.ChangeColor2); 
}, function () { 
$(this).find("input").css("background", opts.TdBackColor); 
}); 
} 
$.each($("#" + tabid + " tr"), function () { 
for (var i = 0; i < opts.CenterIndex.length; i++) { 
$(this).find("input").eq(opts.CenterIndex[i]).css({ 
"text-align": "center" 
}); 
} 
for (var i = 0; i < opts.EditIndex.length; i++) { 
$(this).find("input").eq(opts.EditIndex[i]).removeAttr("readonly"); 
} 
}); 
$("body").append("<div id=\"markline\" style=\"width:1px;height:200px;border-left:1px solid #999; position:absolute;display:none\" ></div> "); 
$("body").bind("mousemove", function (event) { 
if (lineMove == true) { 
$("#markline").css({ 
"left": event.clientX 
}).show(); 
} 
}); 
$("#" + tabid + " th").bind("mousemove", function (event) { 
$("body").attr({ 
onselectstart: "event.returnValue=false" 
}); 
var th = $(this); 
var left = th.offset().left; 
if (th.prevAll().length < 1) { 
if ((th.width() - (event.clientX - left)) < 4) { 
th.css({ 
'cursor': 'col-resize' 
}); 
} 
else { 
th.css({ 
'cursor': 'default' 
}); 
} 
} else if (th.nextAll().length < 1) { 
if (event.clientX - left < 4) { 
th.css({ 
'cursor': 'col-resize' 
}); 
} 
else { 
th.css({ 
'cursor': 'default' 
}); 
} 
} else { 
if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) { 
th.css({ 
'cursor': 'col-resize' 
}); 
} 
else { 
th.css({ 
'cursor': 'default' 
}); 
} 
} 
}); 
$("#" + tabid + " th").bind("mousedown", function (event) { 
var th = $(this); 
var pos = th.offset(); 
if (th.prevAll().length < 1) { 
if ((th.width() - (event.clientX - pos.left)) < 4) { 
var height = th.parent().parent().parent().height(); 
var top = pos.top; 
$("#markline").css({ 
"height": height, 
"top": top, 
"left": event.clientX, 
"display": "" 
}); 
lineMove = true; 
if (event.clientX - pos.left < th.width() / 2) { 
currTh = th.prev(); 
} 
else { 
currTh = th; 
} 
} 
} else if (th.nextAll().length < 1) { 
if (event.clientX - pos.left < 4) { 
var height = th.parent().parent().parent().height(); 
var top = pos.top; 
$("#markline").css({ 
"height": height, 
"top": top, 
"left": event.clientX, 
"display": "" 
}); 
lineMove = true; 
if (event.clientX - pos.left < th.width() / 2) { 
currTh = th.prev(); 
} 
else { 
currTh = th; 
} 
} 
} else { 
if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) { 
var height = th.parent().parent().parent().height(); 
var top = pos.top; 
$("#markline").css({ 
"height": height, 
"top": top, 
"left": event.clientX, 
"display": "" 
}); 
lineMove = true; 
if (event.clientX - pos.left < th.width() / 2) { 
currTh = th.prev(); 
} 
else { 
currTh = th; 
} 
} 
} 
}); 
$("body").bind("mouseup", function (event) { 
$("body").removeAttr("onselectstart"); 
if (lineMove == true) { 
$("#markline").hide(); 
lineMove = false; 
var pos = currTh.offset(); 
var index = currTh.prevAll().length; 
currTh.width(event.clientX - pos.left); 
$(this).find("tr").each(function () { 
$(this).children().eq(index).width(event.clientX - pos.left); 
}); //.children().eq(index).width(event.clientX - pos.left); 
} 
}); 
$("#" + tabid + " tr").bind(opts.RowsType, opts.RowsClick); 
$("#" + tabid + " input").bind("change", opts.ChangeAction); 
$("#" + tabid + " input").focus(function (e) { 
$(this).css({ 
"border": "none" 
}) 
}); 
$("#" + tabid + " th").bind("mouseup", function (event) { 
$("body").removeAttr("onselectstart"); 
if (lineMove == true) { 
$("#markline").hide(); 
lineMove = false; 
var pos = currTh.offset(); 
var index = currTh.prevAll().length; 
currTh.width(event.clientX - pos.left); 
currTh.parent().parent().find("tr").each(function () { 
$(this).children().eq(index).width(event.clientX - pos.left); 
}); 
} 
}); 
}; 
$.fn.ManualTable.defaults = { 
UpDataUrl: "Updata.do", 
//定义编辑更新数据远程请求地址(可以不要) 
TableFontSize: "12px", 
//定义表格字体大小 
ThBackColor: "#005AD2", 
//定义TH表头背景颜色 
ThColor: "#fff", 
//定义表头文字颜色 
ThHeight: "30px", 
//定义表头高度 
TdBackColor: "#FFF", 
//定义TD背景颜色 
TdColor: "red", 
//定义TD文字颜色 
TdHeight: "20px", 
//定义TD高度 
BorderColor: "#555", 
//定义表格边框线条颜色 
IsODDChange: false, 
//是否隔行变色 这个与鼠标滑动变色不能同时使用 
ChangeColor1: "#ff0", 
//隔行变色颜色 
IsMoveChange: true, 
//是否鼠标滑动变色 
ChangeColor2: "#00f", 
//鼠标滑动变色颜色 
CenterIndex: [3, 4, 5, 6], 
//定义居中列index 0开始 
EditIndex: [2, 3, 5], 
//定义可编辑列index 0开始 
//定义编辑触发函数,自动更新保存数据 
ChangeAction: function () { 
var basepath = $.fn.ManualTable.defaults.UpDataUrl; 
var tds = $(this).parent().parent().find("input"); 
var str = ""; 
$.each(tds, function (i) { 
str += str == "" ? "arg" + i + "=" + $(this).val() : "&arg" + i + "=" + $(this).val(); 
}); 
alert(basepath + "?" + str); 
//$.get($.fn.ManualTable.defaults.UpDataUrl+"?"+str,function(data){ 
// alert(data); 
//}); 
}, 
//定义行辑触发函数 
IsRowsClick: true, 
//是否触发 
RowsType: "dblclick", 
//触发方式 
//触发函数 
RowsClick: function () { 
alert($.fn.ManualTable.defaults.UpDataUrl); 
} 
}; 
})(jQuery);</pre><br> 
<pre></pre> 
<br>
Javascript 相关文章推荐
用js判断页面是否加载完成实现代码
Dec 11 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 #Javascript
JS中判断null、undefined与NaN的方法
Mar 24 #Javascript
jquery高级编程的最佳实践详解
Mar 23 #Javascript
js 判断浏览器使用的语言示例代码
Mar 22 #Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 #Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 #Javascript
jquery获取复选框被选中的值
Mar 22 #Javascript
You might like
PHP脚本的10个技巧(4)
2006/10/09 PHP
?繁体转换的class
2006/10/09 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
初识laravel5
2015/03/02 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python numpy 点数组去重的实例
2018/04/18 Python
python实现俄罗斯方块游戏
2020/03/25 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
应届生财务会计求职信
2013/11/05 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
2015年复活节活动总结
2015/02/27 职场文书
学风建设主题班会
2015/08/17 职场文书
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python