当前位置: 编程技术>WEB前端
让table变成exls的示例代码
来源: 互联网 发布时间:2014-08-25
本文导语: 网页代码 代码如下: 无标题文档 $(document).ready(function(e) { $("#GridTable").ManualTable({ //ChangeAction:function(){ // var inputs=$(this).parent().parent().find("input"); //alert(inputs.length); } }); }); 员工编号 姓名 工作部门 职务 家庭住址 联系电...
网页代码
无标题文档
$(document).ready(function(e) {
$("#GridTable").ManualTable({
//ChangeAction:function(){
// var inputs=$(this).parent().parent().find("input");
//alert(inputs.length);
}
});
});
员工编号
姓名
工作部门
职务
家庭住址
联系电话
手机
备注
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
代码如下:
无标题文档
$(document).ready(function(e) {
$("#GridTable").ManualTable({
//ChangeAction:function(){
// var inputs=$(this).parent().parent().find("input");
//alert(inputs.length);
}
});
});
员工编号
姓名
工作部门
职务
家庭住址
联系电话
手机
备注
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
// 根据网上前辈的脚本改了一下,添加了一些功能,也许对初学者有些帮助
//这个脚本就是个装饰作用,对原生的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("");
$("#" + 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(" ");
$("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);