让table变成exls的示例代码_jquery

网页代码

复制代码 代码如下:

<script> <BR>$(document).ready(function(e) { <BR>$("#GridTable").ManualTable({ <BR>//ChangeAction:function(){ <BR>// var inputs=$(this).parent().parent().find("input"); <BR>//alert(inputs.length); <BR>} <BR>}); <BR>}); <BR></script>

员工编号	姓名	工作部门	职务	家庭住址	联系电话	手机	备注
456456	456456	456456	456456	456456	456456	456456	456456
456456	456456	456456	456456	456456	456456	456456	456456
456456	456456	456456	456456	456456	456456	456456	456456
456456	456456	456456	456456	456456	456456	456456	456456

// 根据网上前辈的脚本改了一下，添加了一些功能，也许对初学者有些帮助 <br>//这个脚本就是个装饰作用,对原生的table支持，不过不支持table有其它元素 <br>(function ($) { <br>$.fn.ManualTable = function (options) { <br>var tabid = $(this).attr("id"); <br>var lineMove = false; <br>var currTh = null; <br>var opts = $.extend({}, $.fn.ManualTable.defaults, options); <br><br>$(this).css({ <br>"*border-collapse": "collapse", <br>"border-spacing": 0, <br>"width": "100%", <br>"border": "solid " + opts.BorderColor + " 1px", <br>"font-size": opts.TableFontSize <br>}); <br>$("#" + tabid + " th").css({ <br>"background": opts.ThBackColor, <br>"border-left": "solid " + opts.BorderColor + " 1px", <br>"height": opts.ThHeight, <br>"color": opts.ThColor <br>}); <br><br>$("#" + tabid + " td").css({ <br>"border-left": "solid " + opts.BorderColor + " 1px", <br>"height": opts.TdHeight, <br>"border-top": "solid " + opts.BorderColor + " 1px", <br>"padding": "0", <br>"color": opts.TdColor, <br>"background": opts.TdBackColor <br>}); <br>$("#" + tabid + " th:first-child,#" + tabid + " td:first-child").css({ <br>"border-left": "none" <br>}); <br><br>/* <br><br>*/ <br>var str = $("#" + tabid + " td").html(); <br>$("#" + tabid + " td").html("<input style="width:100%; border:none; height:100%;vertical-align:middle" value='" + str + "' readonly>"); <br><br><br>$("#" + tabid + " input").css({ <br>"background-color": opts.TdBackColor, <br><br>"color": opts.TdColor <br>}); <br>if (opts.IsODDChange) { <br>$("#" + tabid + " tr:even").find("input").css({ <br>"background-color": opts.ChangeColor1 <br>}); <br>} <br>if (opts.IsMoveChange == true) { <br>$("#" + tabid + " tr").hover(function () { <br>$(this).find("input").css("background", opts.ChangeColor2); <br>}, function () { <br>$(this).find("input").css("background", opts.TdBackColor); <br><br>}); <br>} <br>$.each($("#" + tabid + " tr"), function () { <br>for (var i = 0; i $(this).find("input").eq(opts.CenterIndex[i]).css({ <br>"text-align": "center" <br>}); <br>} <br>for (var i = 0; i $(this).find("input").eq(opts.EditIndex[i]).removeAttr("readonly"); <br>} <br>}); <br><br>$("body").append("<div id='\"markline\"' style='\"width:1px;height:200px;border-left:1px' solid position:absolute></div> "); <br>$("body").bind("mousemove", function (event) { <br>if (lineMove == true) { <br>$("#markline").css({ <br>"left": event.clientX <br>}).show(); <br>} <br>}); <br><br>$("#" + tabid + " th").bind("mousemove", function (event) { <br>$("body").attr({ <br>onselectstart: "event.returnValue=false" <br>}); <br>var th = $(this); <br>var left = th.offset().left; <br><br>if (th.prevAll().length if ((th.width() - (event.clientX - left)) th.css({ <br>'cursor': 'col-resize' <br>}); <br>} <br>else { <br>th.css({ <br>'cursor': 'default' <br>}); <br>} <br><br>} else if (th.nextAll().length if (event.clientX - left th.css({ <br>'cursor': 'col-resize' <br>}); <br>} <br>else { <br>th.css({ <br>'cursor': 'default' <br>}); <br>} <br><br>} else { <br>if (event.clientX - left th.css({ <br>'cursor': 'col-resize' <br>}); <br>} <br>else { <br>th.css({ <br>'cursor': 'default' <br>}); <br>} <br>} <br>}); <br><br>$("#" + tabid + " th").bind("mousedown", function (event) { <br><br>var th = $(this); <br>var pos = th.offset(); <br>if (th.prevAll().length if ((th.width() - (event.clientX - pos.left)) var height = th.parent().parent().parent().height(); <br>var top = pos.top; <br>$("#markline").css({ <br>"height": height, <br>"top": top, <br>"left": event.clientX, <br>"display": "" <br>}); <br>lineMove = true; <br>if (event.clientX - pos.left currTh = th.prev(); <br>} <br>else { <br>currTh = th; <br>} <br>} <br>} else if (th.nextAll().length if (event.clientX - pos.left var height = th.parent().parent().parent().height(); <br>var top = pos.top; <br>$("#markline").css({ <br>"height": height, <br>"top": top, <br>"left": event.clientX, <br>"display": "" <br>}); <br>lineMove = true; <br>if (event.clientX - pos.left currTh = th.prev(); <br>} <br>else { <br>currTh = th; <br>} <br>} <br><br>} else { <br>if (event.clientX - pos.left var height = th.parent().parent().parent().height(); <br>var top = pos.top; <br>$("#markline").css({ <br>"height": height, <br>"top": top, <br>"left": event.clientX, <br>"display": "" <br>}); <br>lineMove = true; <br>if (event.clientX - pos.left currTh = th.prev(); <br>} <br>else { <br>currTh = th; <br>} <br>} <br>} <br>}); <br>$("body").bind("mouseup", function (event) { <br>$("body").removeAttr("onselectstart"); <br>if (lineMove == true) { <br>$("#markline").hide(); <br>lineMove = false; <br>var pos = currTh.offset(); <br>var index = currTh.prevAll().length; <br>currTh.width(event.clientX - pos.left); <br>$(this).find("tr").each(function () { <br>$(this).children().eq(index).width(event.clientX - pos.left); <br>}); //.children().eq(index).width(event.clientX - pos.left); <br>} <br>}); <br>$("#" + tabid + " tr").bind(opts.RowsType, opts.RowsClick); <br>$("#" + tabid + " input").bind("change", opts.ChangeAction); <br>$("#" + tabid + " input").focus(function (e) { <br>$(this).css({ <br>"border": "none" <br>}) <br>}); <br>$("#" + tabid + " th").bind("mouseup", function (event) { <br>$("body").removeAttr("onselectstart"); <br>if (lineMove == true) { <br>$("#markline").hide(); <br>lineMove = false; <br>var pos = currTh.offset(); <br>var index = currTh.prevAll().length; <br>currTh.width(event.clientX - pos.left); <br>currTh.parent().parent().find("tr").each(function () { <br>$(this).children().eq(index).width(event.clientX - pos.left); <br>}); <br>} <br>}); <br>}; <br>$.fn.ManualTable.defaults = { <br>UpDataUrl: "Updata.do", <br>//定义编辑更新数据远程请求地址（可以不要） <br>TableFontSize: "12px", <br>//定义表格字体大小 <br>ThBackColor: "#005AD2", <br>//定义TH表头背景颜色 <br>ThColor: "#fff", <br>//定义表头文字颜色 <br>ThHeight: "30px", <br>//定义表头高度 <br>TdBackColor: "#FFF", <br>//定义TD背景颜色 <br>TdColor: "red", <br>//定义TD文字颜色 <br>TdHeight: "20px", <br>//定义TD高度 <br>BorderColor: "#555", <br>//定义表格边框线条颜色 <br>IsODDChange: false, <br>//是否隔行变色 这个与鼠标滑动变色不能同时使用 <br>ChangeColor1: "#ff0", <br>//隔行变色颜色 <br>IsMoveChange: true, <br>//是否鼠标滑动变色 <br>ChangeColor2: "#00f", <br>//鼠标滑动变色颜色 <br>CenterIndex: [3, 4, 5, 6], <br>//定义居中列index 0开始 <br>EditIndex: [2, 3, 5], <br>//定义可编辑列index 0开始 <br>//定义编辑触发函数，自动更新保存数据 <br>ChangeAction: function () { <br>var basepath = $.fn.ManualTable.defaults.UpDataUrl; <br>var tds = $(this).parent().parent().find("input"); <br>var str = ""; <br>$.each(tds, function (i) { <br>str += str == "" ? "arg" + i + "=" + $(this).val() : "&arg" + i + "=" + $(this).val(); <br>}); <br>alert(basepath + "?" + str); <br>//$.get($.fn.ManualTable.defaults.UpDataUrl+"?"+str,function(data){ <br>// alert(data); <br>//}); <br>}, <br>//定义行辑触发函数 <br>IsRowsClick: true, <br>//是否触发 <br>RowsType: "dblclick", <br>//触发方式 <br>//触发函数 <br>RowsClick: function () { <br>alert($.fn.ManualTable.defaults.UpDataUrl); <br>} <br><br>}; <br>})(jQuery);