让table变成exls的示例代码

2024-09-27 11:07:34

网页代码

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="ManualTable2.js"></script>
<title>无标题文档</title>
<script>
$(document).ready(function(e) {
$("#GridTable").ManualTable({
//ChangeAction:function(){
// var inputs=$(this).parent().parent().find("input");
//alert(inputs.length);
}
});
});
</script>
</head>

</table>

</body>
</html>

<pre code_snippet_id="251084" snippet_file_name="blog_20140322_1_1781185" name="code" class="javascript">// 根据网上前辈的脚本改了一下，添加了一些功能，也许对初学者有些帮助
//这个脚本就是个装饰作用,对原生的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("<input style='width:100%; border:none; height:100%;vertical-align:middle' value='" + str + "' readonly/>");

$("#" + 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("<div id=\"markline\" style=\"width:1px;height:200px;border-left:1px solid #999; position:absolute;display:none\" ></div> ");
$("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) {

} 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);</pre><br>

让table变成exls的示例代码

网页代码复制代码代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery-2.0.3.min.js"></script> <script type="text/javascript" src="
layui实现table加载的示例代码

js实现: layui.use(['table','form'], function() { $ = layui.jquery; table = layui.table; tableIns = initTable(); }); //加载列表 function initTable(){ // 执行渲染 tableIns = table.render({ id: 'idTest', elem : '#deviceTable', // 指定原始表格元素选择器(推荐id选择器) size: 'lg',
Javascript遍历table中的元素示例代码

例如: <table id=tb> <tr><th> </th><th> </th><th> </th><th> </th></tr> <tr><td> </td><td> </td><td> </td><td> </td></tr> <tr>&
bootstrap table 多选框分页保留示例代码

在使用bootstrap table的复选框功能的时候,由于采用服务端分页,当在第一页选择了某些数据,然后点击第二页选择一些数据,再次点回第一页,发现原先选择的数据已经清空了,原来的多选框并不支持翻页保留多选数据. 解决思路: 在分页的时候,吧原先选择的数据用一个全局变量保存,当再次翻页回来时,判断当前页数据是否存在于保存的数据数组中,存在则状态为选择.当然当取消选择的时候也要去删除数组中相应的数据. 为了解决这个问题,在查github上查文档发现有人提出了这个问题,并且作者wenzhixin
C# 实现TXT文档转Table的示例代码

代码: public DataTable TXTToDataTable(string fileName, string columnName) { DataTable dt = new DataTable(); FileStream fs = new FileStream(fileName, System.IO.FileMode.Open, System.IO.FileAccess.Read); StreamReader sr = new StreamReader(fs, System.Text
vue+element table表格实现动态列筛选的示例代码

需求:在用列表展示数据时,出现了很多项信息需要展示导致表格横向特别长,展示就不够明晰,用户使用起来可能会觉得抓不住自己的重点. 设想实现:用户手动选择表格的列隐藏还是展示,并且记录用户选择的状态,在下次进入该时仍保留选择的状态. 效果图如下: 原: 不需要的关掉默认的勾选: 实现代码: HTML部分就是用一个多选框组件展示列选项用v-if="colData[i].istrue"控制显示隐藏,把列选项传到checkbox里再绑定勾选事件. <el-popover placemen
基于ElementUI中Table嵌套实现多选的示例代码

前言: 写这个是因为帮朋友修改项目中的bug 我也是第一次写这个功能,有不对的希望大家指正,如果看完有帮助点个赞! 代码中关键是js中Tree的路径查找这个核心,有不懂的自行百度多了不说了,有需要的可以私信找我要代码,来看下我怎么实现的思路: 从头开始看这个需求,我们需要知道用到哪写东西 1.表格Table 2.多选&全选 3.嵌套数据(下拉操作) 正好我们可以找下ElementUI官方文档找到了我们需要用到的API 在嵌套数据的时候需要使用tree-props 选中数据的时候使用togg
ElementUI table无缝循环滚动的示例代码

恰好实习的时候遇到了这个需求,而且网上的代码有点僵硬,所以我改了改,顺手水一篇博客出来. 部分思路来源:https://blog.csdn.net/qq_38543537/article/details/122842943 但是来源的代码,在滚动到底部时会有非常生硬的切换,我这里改了一些代码,让它的滚动变得流畅. 效果: 代码: HTML: <el-table ref="table" :data="TableData" stripe style="w
Table冻结表头示例代码

Table冻结表头: 复制代码代码如下: <script type="text/javascript"> function fixupFirstRow(tab) { var div=tab.parentNode; if(div.className.toLowerCase()=="freezediv"){ tab.rows[0].style.zIndex="1"; tab.rows[0].style.position="re
ASP.NET MVC4异步聊天室的示例代码

本文介绍了ASP.NET MVC4异步聊天室的示例代码,分享给大家,具体如下: 类图: Domain层 IChatRoom.cs using System; using System.Collections.Generic; namespace MvcAsyncChat.Domain { public interface IChatRoom { void AddMessage(string message); void AddParticipant(string name); void GetM

让table变成exls的示例代码

相关推荐

随机推荐