Exemple de code pour transformer la table en exls_jquery

Code de la page Web

Copier le code Le code est le suivant :

<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 "' lecture seule/>"); <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 < opts.CenterIndex.length; i++) { <BR>$(this).find("input").eq(opts.CenterIndex[i]).css({ <BR>"text-align": "center" <BR>}); <BR>} <BR>for (var i = 0; i < opts.EditIndex.length; i++) { <BR>$(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 #999; position:absolute;display:none\" ></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 < 1) { <BR>if ((th.width() - (event.clientX - gauche)) < 4) { <BR>th.css({ <BR>'cursor': 'col-resize' <BR>} <BR>} <BR>else { <BR>th.css( { <BR>'curseur': 'default' <BR>}); <BR>} <br><br>} else if (th.nextAll().length < 1) { <BR>if (event. clientX - gauche < 4) { <BR>th.css({ <BR>'cursor': 'col-resize' <BR>} <BR>} <BR>else { <BR>th.css( { <BR>'curseur' : 'par défaut' <BR>}); <BR>} <br><br>} else { <BR>if (event.clientX - gauche < 4 || (th.width( ) - (event.clientX - gauche)) < 4) { <BR>th.css({ <BR>'cursor': 'col-resize' <BR>}); <BR>th.css({ <BR>'curseur' : 'default' <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 < 1) { <br>if ((th.width() - (event.clientX - pos.left)) < 4) { <br>var hauteur = th.parent().parent().parent().height(); <BR>var top = pos.top; <BR>$("#markline").css({ <BR>"height": hauteur, <BR>"top": haut, <BR>"left": event.clientX, <BR>"display": "" <BR>}); <BR>lineMove = true; <BR>if (event.clientX - pos.left < th.width() / 2) { <BR>currTh = th.prev(); <BR>} <BR>else { <BR>currTh = th; <BR>} <BR>} <BR>} else if (th.nextAll().length < 1) { <BR>if (event.clientX - pos.left < 4) { <BR>var hauteur = th.parent().parent().parent().height(); <BR>var top = pos.top; <BR>$("#markline").css({ <BR>"height": hauteur, <BR>"top": haut, <BR>"left": event.clientX, <BR>"display": "" <BR>}); <BR>lineMove = true; <BR>if (event.clientX - pos.left < th.width() / 2) { <BR>currTh = th.prev(); <BR>} <BR>else { <BR>currTh = th; <BR>} <BR>} <BR><BR>} else { <BR>if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left) ) < 4) { <BR>var hauteur = th.parent().parent().parent().height(); <br>var top = pos.top; <br>$("#markline").css({ <BR>"height": hauteur, <BR>"top": haut, <BR>"left": event.clientX, <BR>"display": "" <BR>}); <BR>lineMove = true; <BR>if (event.clientX - pos.left < th.width() / 2) { <BR>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; 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>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, > //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 "=" $( ceci).val(); <BR>}); <BR>alert(basepath "?" str); <BR>//$.get($.fn.ManualTable.defaults.UpDataUrl "?" str,function(data){ <BR>// alert(data) ; >//Méthode de déclenchement<BR>//Fonction de déclenchement<BR>RowsClick: function () { <BR>alert($.fn.ManualTable.defaults.UpDataUrl <BR>} <BR><BR>}); <BR>})(jQuery);