찾다

집 >웹 프론트엔드 >JS 튜토리얼 >테이블을 exls_jquery로 변환하는 샘플 코드

테이블을 exls_jquery로 변환하는 샘플 코드

WBOY
WBOY원래의
2016-05-16 16:54:32959검색

웹페이지 코드

코드 복사 코드는 다음과 같습니다.



<머리>



无标题文档
<스크립트>
$(document).ready(function(e) {
$("#GridTable").ManualTable({
//ChangeAction:function(){
// var inputs=$( this).parent().parent().find("input");
//alert(inputs.length)
}
});



<본문>

<머리>
번째>员工编号
<일>姓명
<일>공작부门
<일>职务
가족장일>
<일>联系电话
<일>핸드机
<일>备注

















































//了一些功能，也许对初학술자유些帮助 <br>//这个脚本就是个装饰작용,对樹持table支持，不过不支持table有其它元素 <br>(function ($) { <br>$.fn. ManualTable = 함수(옵션) { <br>var tabid = $(this).attr("id"); <br>var lineMove = false; <br>var currTh = null; ({}, $.fn.ManualTable.defaults, 옵션); <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>"배경": 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>"색상": opts.TdColor, <br>"배경": 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 "' 읽기 전용/>"); <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>"왼쪽": event.clientX <br>}).show(); <br>} <br>}) <br><br>$("#" tabid " th").bind("mousemove ", 함수(이벤트) { <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 - 왼쪽)) < 4) { <BR>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 < 1) { <BR>if (event. clientX - 왼쪽 < 4) { <BR>th.css({ <BR>'cursor': 'col-resize' <BR>}) <BR>} <BR>else { <BR>th.css( { <BR>'커서': '기본값' <BR>}); <BR>} <br><br>} else { <BR>if (event.clientX - 왼쪽 < 4 || (th.width( ) - (event.clientX - 왼쪽)) < 4) { <BR>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 < 1) { <BR>if ((th.width() - (event.clientX - pos.left)) < 4) { <BR>var height = th.parent().parent().parent().height(); <BR>var top = pos.top; <BR>$("#markline").css({ <BR>"height": 높이, <BR>"top": 상단, <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 = 일; <BR>} <BR>} <BR>} else if (th.nextAll().length < 1) { <BR>if (event.clientX - pos.left < 4) { <BR>var height = th.parent().parent().parent().height(); <BR>var top = pos.top; <BR>$("#markline").css({ <BR>"height": 높이, <BR>"top": 상단, <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 = 일; <BR>} <BR>} <br><br>} else { <BR>if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left) ) < 4) { <BR>var height = th.parent().parent().parent().height(); <BR>var top = pos.top; <BR>$("#markline").css({ <BR>"height": 높이, <BR>"top": 상단, <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 = 일; <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>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表头背景颜color <BR>ThColor: "#fff", <BR>//정정表头文字颜color <BR>ThHeight: "30px", <BR>//정정表头높이도 <BR>TdBackColor: "#FFF", <BR>//정정TD背景颜color <BR>TdColor: "red", <BR>//정정 TD문자 글자색 <BR>TdHeight: "20px", <BR>//정정TD고도 <BR>BorderColor: "#555", <BR>//결정义表格边框线条颜color <BR>IsODDChange: false, <BR> //是否隔行变color 这个与鼠标滑动变color不能同时使用 <BR>ChangeColor1: "#ff0", <BR>//隔行变color颜color <BR>IsMoveChange: <BR>//是妐鼠标滑动变color <BR> ChangeColor2: "#00f", <BR>//鼠标滑动变color颜color <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>RowsClick: function () { <BR>alert($.fn.ManualTable.defaults.UpDataUrl) <BR>} <BR><BR>}; <BR>})(jQuery);





성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jquery는 더 나은 테이블 선택 행을 달성합니다.다음 기사：jquery는 더 나은 테이블 선택 행을 달성합니다.
관련 기사
더보기
        
 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