Exemple de code pour transformer la table en exls_jquery

// 根据网上前辈的脚本改了一下，添加了一些功能，也许对初学者有些帮助 <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);