当前位置:  编程技术>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









// 根据网上前辈的脚本改了一下,添加了一些功能,也许对初学者有些帮助 
//这个脚本就是个装饰作用,对原生的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);



 



    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery特效 table鼠标滑过变色的实现代码
  • jquery获取table中内容的代码分享
  • sql代码:select database select all table
  • 天看linux得源代码有这样一段,不甚明白,ENTRY(gdt_table)
  • jquery通过a标签删除table中的一行的代码
  • jquery 实现table隔行变色、复选框的选择变色的代码
  • SQL Server Table中XML列的操作代码
  • jquery操作table的实例代码
  • jQuery操作checkbox选择(list/table)的代码分享
  • 请问如何即时刷新table中鼠标所选中的那条记录?程序代码见内。高分请教
  • java命名空间javax.swing.table类jtableheader的类成员方法: table定义及介绍
  • mysql下优化表和修复表命令使用说明(REPAIR TABLE和OPTIMIZE TABLE)
  • java命名空间javax.swing.plaf.synth类region的类成员方法: table定义及介绍
  • 我在table中选中一行删除后,数据库中是删除了,但我的table中这一行还显示,我怎么让他不显示??
  • java命名空间javax.accessibility类accessiblerole的类成员方法: table定义及介绍
  • 用new JTalbe(10, 20)创建了一个table,如何设置该table列(column)的宽度
  • java命名空间javax.swing.plaf.basic类basictableui的类成员方法: table定义及介绍
  • 請問在一個分成上下兩個框架的整個頁面中,上面框架是包含一個form的form.jsp頁面,下面框架則是包含table的另一table.jsp頁面,當按下fo
  • java命名空间javax.swing.text.html类html.tag的类成员方法: table定义及介绍
  • GTK编程~我在hpanel里加了一个4*1table~里面放了四个button~怎么设置可以使四个button之间有一定的距离~设置table 的边框么?请教下怎么让app的界面固定~不能最大化
  • java命名空间javax.swing.table类jtableheader的类成员方法: gettable定义及介绍
  • Table Library
  • java命名空间javax.swing.plaf.synth类region的类成员方法: table_header定义及介绍
  • 困惑很久的问题,一个实体BEAN只能对应一个TABLE吗?如果有几百个TABLE,难道要写几百个实体BEAN?
  • java命名空间javax.sql.rowset.spi类syncprovider的类成员方法: datasource_table_lock定义及介绍
  • IP Tables State
  • java命名空间javax.swing.table类jtableheader的类成员方法: getcolumnmodel定义及介绍
  • 关于定死table宽度
  • java命名空间javax.swing.table类tablecolumn的类成员方法: identifier定义及介绍
  • 运行insmod ip_tables后,reboot后又无效了?
  • java命名空间javax.accessibility类accessiblecontext的类成员方法: accessible_table_model_changed定义及介绍


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3