JS table源码

最新推荐文章于 2023-04-28 16:14:29 发布
最新推荐文章于 2023-04-28 16:14:29 发布
阅读量219 收藏 1
点赞数
分类专栏： VUE,Andriod,js...前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35911309/article/details/115489675
版权

文章目录

一、JS源码

1.jquery-table

在这里插入图片描述

代码如下）：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>组网专线.襄阳电信</title>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/tableExport.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//显示日期
				var now;
				now = new Date();
				$(".nowTime").html(now.getFullYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日" + now.getHours() +
					"时");

				//获取单位名称
				$.get("http://:8080/zwzx/DbService/getCustName",
					function(data) {
						$.each(data, function(index, item) {
							s = "<option>" + item.CUST_NAME + " </option>";
							$("#cust_name").append(s);
						})
					}, "json")

				//增加地区名称
				s = "<option>" + "襄阳市樊城区" + " </option>" +
					"<option>" + "襄阳市樊西区" + " </option>" +
					"<option>" + "襄阳市高新区" + " </option>" +
					"<option>" + "襄阳市襄城区" + " </option>" +
					"<option>" + "襄阳市襄州区" + " </option>" +
					"<option>" + "襄阳市老河口" + " </option>" +
					"<option>" + "襄阳市枣阳市" + " </option>" +
					"<option>" + "襄阳市宜城市" + " </option>" +
					"<option>" + "襄阳市谷城县" + " </option>" +
					"<option>" + "襄阳市南漳县" + " </option>" +
					"<option>" + "襄阳市保康县" + " </option>"
				$("#region_name").append(s);

				var indexSum = 0; //数量
			
				var OperState = ""; //ONU运行状态
				var LastOffTime = "" //ONU最近一次脱网时间
				var Length = "" //光纤长度
				var Temperature = "" //ONU温度
				var RxPower = "" //接收光功率
				var TxPower = "" //发送光功率
				var PTxPower = "" //OLT发送光功率
				var PRxPower = "" //OLT接收光功率

				//下拉框选择执行的事件 
				//客户名称选择
				$("#cust_name").change(function() {
					var custOption = $("#cust_name option:selected").val(); //获取下拉框值

					for (var i = 0; i < indexSum; i++) {
						var custNameTd = $("#tbody tr:eq(" + i + ") td:eq(1)").html(); //获取table中的值

						if (custOption == "---------客户名称---------") {
							$("#tbody tr:eq(" + i + ")").show();
						} else if (custNameTd == custOption) {
							$("#tbody tr:eq(" + i + ")").show();
						} else {
							$("#tbody tr:eq(" + i + ")").hide();
						}
					}
				});
		
				//获取所有Pon数据
				$.get("http://:8080/zwzx/api/v1/get/pons",
					function(data) {
						$.each(data.data, function(index, item) {
							s = "<tr><td>" + (index + 1) + "</td><td>" + item.cust_name + "</td><td>" + item.useraddress.substring(0, 6) +
								"</td><td>" +item.sn + "</td><td>" + item.factory +"</td><td>" + OperState + "</td><td>" + LastOffTime + "</td><td>" +
								Length + "</td><td>" + Temperature + "</td><td>" + TxPower + "</td><td>" +
								RxPower + "</td><td>" + PTxPower + "</td><td>" + PRxPower + "</td><td>" +
								item.acc_num + "</td><td>" + item.useraddress + "</td><td>" + item.region_name +
								"</td></tr>";
							$("#tbody").append(s);

							indexSum = index + 1; //赋值总数量；

							//由SN获取状态
							var url = "http://:8080/zwzx/api/v1/get/onustate/sn/?sn=" + item.sn + "";
							$.getJSON(url,
								function(dataSn, status) {

									if (dataSn.resultCode == 'success') {
										OperState = dataSn.data.operState;
										LastOffTime = dataSn.data.lastOffTime;
										Length = dataSn.data.length;
										Temperature = dataSn.data.temperature;
										TxPower = dataSn.data.txPower;
										RxPower = dataSn.data.rxPower;
										PTxPower = dataSn.data.ptxPower;
										PRxPower = dataSn.data.prxPower;
										//console.log(OperState+item.region_name+item.useraddress)
									} else {
										OperState = dataSn.resultCode;
									}

									//非正常状态显示红色
									if (OperState != "UP") {
										$("#tbody tr:eq(" + index + ") ").css({
											color: "red"
										});
									}

									$("#tbody tr:eq(" + index + ") td:eq(5)").html(OperState);
									$("#tbody tr:eq(" + index + ") td:eq(6)").html(LastOffTime);
									$("#tbody tr:eq(" + index + ") td:eq(7)").html(Length);
									$("#tbody tr:eq(" + index + ") td:eq(8)").html(Temperature);
									$("#tbody tr:eq(" + index + ") td:eq(9)").html(TxPower);
									$("#tbody tr:eq(" + index + ") td:eq(10)").html(RxPower);
									$("#tbody tr:eq(" + index + ") td:eq(11)").html(PTxPower);
									$("#tbody tr:eq(" + index + ") td:eq(12)").html(PRxPower);

								}, "json");
						})

					}, "json");
			});
		</script>
	</head>

	<body>
		<h2>组网专线监测平台</h2>
		<h3>&nbsp;&nbsp;

			<button onClick="$('#fl-table').tableExport({ type: 'excel', escape: 'false', fileName: '组网专线'})">导出Excel</button>
			<span class="nowTime">当前时间</span>
			<a class="text-success" style="color:#F00">
				（up：正常状态；Power-Off：断电状态；Other：未注册；LOS：光纤线路问题；空白：网管无数据）
			</a>
		</h3>
		<div class="table-wrapper">
			<table class="fl-table" id="fl-table">
				<thead>
					<tr>
						<th>序号</th>
						<th><select id="cust_name">
								<option>---------客户名称---------</option>
							</select></th>
						<!-- <th><select id="region_name">
								<option>------区域------</option>
							</select></th> -->
						<th>区域</th>
						<th>SN号</th>
						<th>OLT厂家</th>
						
						<th>ONU状态</th>
						<th>最近一次脱网时间</th>
						<th>光纤长度(km)</th>
						<th>温度(℃)</th>
						<th>发送光功率(dBm)</th>
						<th>接收光功率(dBm)</th>
						<th>OLT发送光功率(dBm)</th>
						<th>OLT接收光功率(dBm)</th>

						<th>接入号码</th>
						<th>安装地址</th>
						<th>地区</th>
					</tr>
				</thead>
				<tbody id="tbody">
					<!-- 			    <tr>
                    <td id="cust_name">cust_name</td>
                </tr>  -->
				<tbody>
			</table>
		</div>

	</body>

	<style>
		* {
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
		}

		body {
			font-family: Helvetica;
			-webkit-font-smoothing: antialiased;
			background: white;
		}

		h2 {
			text-align: center;
			font-size: 36px;
			text-transform: uppercase;
			letter-spacing: 1px;
			color: black;
			padding: 5px 0;
		}


		h3 {
			font-size: 16px;
			margin-left: 12px;

			color: dodgerblue;
			;
			padding-left: 50px;
		}

		/* Table Styles */

		.table-wrapper {
			margin: 10px 70px 70px;
			box-shadow: 0px 35px 50px rgba(0, 0, 0, 0.2);
		}

		.fl-table {
			border-radius: 5px;
			font-size: 12px;
			font-weight: normal;
			border: none;
			border-collapse: collapse;
			width: 100%;
			max-width: 100%;
			white-space: nowrap;
			background-color: white;
		}

		.fl-table td,
		.fl-table th,
		.fl-table select {
			text-align: center;
			padding: 8px;
		}

		.fl-table td {
			border-right: 1px solid #f8f8f8;
			font-size: 12px;
		}

		.fl-table thead th {
			color: #ffffff;
			background: #4FC3A1;
		}


		.fl-table thead th:nth-child(odd) {
			color: #ffffff;
			background: #324960;
		}

		.fl-table tr:nth-child(even) {
			background: #F8F8F8;
		}

		/* Responsive */

		@media (max-width: 767px) {
			.fl-table {
				display: block;
				width: 100%;
			}

			.table-wrapper:before {
				content: "Scroll horizontally >";
				display: block;
				text-align: right;
				font-size: 11px;
				color: white;
				padding: 0 0 10px;
			}

			.fl-table thead,
			.fl-table tbody,
			.fl-table thead th {
				display: block;
			}

			.fl-table thead th:last-child {
				border-bottom: none;
			}

			.fl-table thead {
				float: left;
			}

			.fl-table tbody {
				width: auto;
				position: relative;
				overflow-x: auto;
			}

			.fl-table td,
			.fl-table th {
				padding: 20px .625em .625em .625em;
				height: 60px;
				vertical-align: middle;
				box-sizing: border-box;
				overflow-x: hidden;
				overflow-y: auto;
				width: 120px;
				font-size: 13px;
				text-overflow: ellipsis;
			}

			.fl-table thead th {
				text-align: left;
				border-bottom: 1px solid #f7f7f9;
			}

			.fl-table tbody tr {
				display: table-cell;
			}

			.fl-table tbody tr:nth-child(odd) {
				background: none;
			}

			.fl-table tr:nth-child(even) {
				background: transparent;
			}

			.fl-table tr td:nth-child(odd) {
				background: #F8F8F8;
				border-right: 1px solid #E6E4E4;
			}

			.fl-table tr td:nth-child(even) {
				border-right: 1px solid #E6E4E4;
			}

			.fl-table tbody td {
				display: block;
				text-align: center;
			}

		}
	</style>

</html>

在这里插入图片描述

<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>


<script>
    {#var tableData=new Array(); // 用于存放表格数据#}
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
         // 加载提示
        var loadingMsg = layer.msg('数据请求中...', {icon: 16,   shade: [0.5],   scrollbar: false,   time: 0});

        var tableData = []; //存放数据
        //获取所有Pon数据
        $.get("http://:8080/zwzx/api/v1/get/pons/custid/?custid=39008781920",
            function (data) {

                $.each(data.data, function (index, item) {

                    tableData.push({
                        cust_name: item.cust_name,
                        sn: item.sn,
                        factory: item.factory,
                        acc_num: item.acc_num,
                        useraddress: item.useraddress,
                        region_name: item.region_name
                    });

                    var url = "http://:8080/zwzx/api/v1/get/onustate/sn/?sn=" + item.sn + "";

                    $.getJSON(url,
                        function (dataSn, status) {

                            for (var i = 0, tableDataLen = tableData.length; i < tableDataLen; i++) {

                                    if (tableData[i].sn === item.sn ) {
                                        tableData[i].operState=dataSn.data.operState;
                                        tableData[i].lastOffTime=dataSn.data.lastOffTime;
                                        tableData[i].length=dataSn.data.length+"(km)";
                                        tableData[i].temperature=dataSn.data.temperature+"(℃)";
                                        tableData[i].txPower =dataSn.data.txPower+"(dBm)";
                                        tableData[i].rxPower =dataSn.data.rxPower+"(dBm)";
                                        tableData[i].ptxPower =dataSn.data.ptxPower+"(dBm)";
                                        tableData[i].prxPower =dataSn.data.prxPower+"(dBm)";
                                     }
                            }

                            setTimeout(function () {
                                table.render({
                                    elem: '#currentTableId',
                                    toolbar: '#toolbarDemo',
                                    cellMinWidth: 80,
                                    defaultToolbar: ['filter', 'exports', 'print', {
                                        title: '提示',
                                        layEvent: 'LAYTABLE_TIPS',
                                        icon: 'layui-icon-tips'
                                    }],
                                    cols: [[
                                        {type: 'numbers', sort: true, fixed: 'left'},
                                        {field: 'cust_name', title: '客户名称',  width:160,align: 'left', sort: true, fixed: 'left'},
                                        {field: 'sn', title: 'SN号', width:110, fixed: 'left', sort: true},
                                        {field: 'factory', title: 'OLT',width: 80,align: 'left',sort: true,fixed: 'left',
                                            templet: function (d) {
                                                if (d.factory == "HW") {
                                                    dev = '华为'
                                                } else if (d.factory == "ZX") {
                                                    dev = '中兴'
                                                } else if (d.factory == "FH") {
                                                    dev = '烽火'
                                                }
                                                return dev;
                                            }
                                        },
                                        {field: 'operState',title: 'ONU状态',width: 110,align: 'left',fixed: 'left',
                                          style:'background-color: #eee;',sort: true,
                                            templet: function (d) {
                                                if (d.operState == "UP") {
                                                    res = '正常'
                                                } else if (d.operState == "Power-Off") {
                                                    res = '<span style="color: #c00;"> 断电状态</span>'

                                                } else if (d.operState == "Other") {
                                                    res = '<span style="color: #c00;"> 未注册</span>'

                                                } else if (d.operState == "LOS") {
                                                    res = '<span style="color: #c00;"> 线路问题</span>'

                                                } else {
                                                    res = '<span style="color: #c00;"> 网管无数</span>'
                                                }
                                                return res;
                                            }
                                        },
                                        {field: 'lastOffTime', title: '最近一次脱网时间', width:160,align: 'left', sort: true},
                                        {field: 'length', title: '光纤长度',  width:110,align: 'left', sort: true},
                                        {field: 'temperature', title: '温度',  width:90,align: 'left'},
                                        {field: 'txPower', title: '发送光功率',  width:110,align: 'left'},
                                        {field: 'rxPower', title: '接收光功率',  width:110,align: 'left'},
                                        {field: 'ptxPower', title: 'OLT发送光功率', width:130, align: 'left'},
                                        {field: 'prxPower', title: 'OLT接收光功率',  width:130,align: 'left'},

                                        {field: 'useraddress', title: '安装地址', width:360, align: 'left'},
                                        {field: 'acc_num', title: '接入号码', width:110, align: 'left', fixed: 'right',style:'background-color: #eee;', sort: true},
                                        {field: 'region_name', title: '地区', width:80, align: 'left',  fixed: 'right',sort: true},

                                    ]],
                                    data: tableData,
                                    initSort: {
                                        field: 'operState' ,//排序字段，对应 cols 设定的各字段名
                                        type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                                    },
                                    page: true, //是否显示分页
                                    limits: [10,20,50,100,200],
                                    limit: 10, //每页默认显示的数量
                                    even: true,
                                    done: function (res, curr, count) {
                                        /** 数据渲染完的回调 */
                                        // 关闭提示层
                                        layer.close(loadingMsg);
                                     }
                                    //skin: 'line' //表格风格
                                });

                            }, 10);

                        }, "json");

                }, "json");
            }
        );



    })
</script>

2.layui-table

在这里插入图片描述

代码如下：

<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter">

<script src="/static/layui-v2.6.1/layui/layui.js" charset="utf-8"></script>

<script>
    {#var tableData=new Array(); // 用于存放表格数据#}
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        var tableData = []; //存放数据

        //获取所有Pon数据
        $.get("http://:8080/zwzx/api/v1/get/pons/custid/?custid=39001632062",
            function (data) {
                $.each(data.data, function (index, item) {
                    tableData.push({
                        cust_name: item.cust_name, sn: item.sn, factory: item.factory,
                        acc_num: item.acc_num, useraddress: item.useraddress, region_name: item.region_name
                    });
                }, "json");

                table.render({
                    elem: '#currentTableId',
                    cols: [[
                        {type: 'numbers', sort: true},
                        {field: 'cust_name', title: '客户名称', width: 160, align: 'left', sort: true},
                        {field: 'sn', title: 'SN号'},
                        {field: 'factory', title: 'OLT厂家', align: 'left',sort: true},

                        {field: 'operState', title: 'ONU状态', align: 'left'},
                        {field: 'lastOffTime', title: '最近一次脱网时间', align: 'left',sort: true},
                        {field: 'length', title: '光纤长度(km)', align: 'left', sort: true},
                        {field: 'temperature', title: '温度(℃)', align: 'left',},
                        {field: 'txPower', title: '发送光功率(dBm)', align: 'left', sort: true},
                        {field: 'rxPower', title: '接收光功率(dBm)', align: 'left', sort: true},
                        {field: 'ptxPower', title: 'OLT发送光功率(dBm)', align: 'left', sort: true},
                        {field: 'prxPower', title: 'OLT接收光功率(dBm)', align: 'left'},

                        {field: 'acc_num', title: '接入号码', align: 'left', sort: true},
                        {field: 'useraddress', title: '安装地址', align: 'left', sort: true},
                        {field: 'region_name', title: '地区',align: 'left'}
                    ]],
                    data: tableData,
                    page: true, //是否显示分页
                    limits: [5, 10, 20, 50],
                    limit: 10, //每页默认显示的数量
                    //skin: 'line' //表格风格
                });
            }
        )
    });
</script>

或

table.render({
            elem: '#currentTableId',
            url: 'http://:8080/zwzx/api/v1/get/pons/custid/?custid=39001632062',
            {#url: 'http://:8080/zwzx/api/v1/get/onustate/sn/?sn=XY1412977',#}
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                {type: 'numbers', sort: true},
                {field: 'cust_name', width: 80, title: '客户名称', sort: true},
                {field: 'sn', width: 80, title: 'SN号'},
                {field: 'factory', width: 80, title: 'OLT厂家', sort: true},

                {field: 'operState', title: 'ONU状态', minWidth: 150},
                {field: 'lastOffTime', width: 80, title: '最近一次脱网时间', sort: true},
                {field: 'length', width: 80, title: '光纤长度(km)', sort: true},
                {field: 'temperature', width: 80, title: '温度(℃)'},
                {field: 'txPower', width: 135, title: '发送光功率(dBm)', sort: true},
                {field: 'rxPower', width: 80, title: '接收光功率(dBm)', sort: true},
                {field: 'ptxPower', width: 80, title: 'OLT发送光功率(dBm)', sort: true},
                {field: 'prxPower', width: 80, title: 'OLT接收光功率(dBm)'},

                {field: 'acc_num', width: 135, title: '接入号码', sort: true},
                {field: 'useraddress', width: 80, title: '安装地址', sort: true},
                {field: 'region_name', width: 80, title: '地区'},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],

            response: {
                statusName: 'resultCode' //规定数据状态的字段名称，默认：code
                , statusCode: 'success' //规定成功的状态码，默认：0
                , msgName: 'msg' //规定状态信息的字段名称，默认：msg
                , dataName: 'data' //规定数据列表的字段名称，默认：data
                , countName: 'count' //规定数据总数的字段名称，默认：count
            },
            page: true,
            limits: [5, 10, 15, 20, 25, 50, 100],
            limit: 5,
            skin: 'line'
        });

<script>
    {#var tableData=new Array(); // 用于存放表格数据#}
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        var OperState = "" //ONU运行状态
        var tableData = []; //存放数据

        //获取所有Pon数据
        $.get("http://:8080/zwzx/api/v1/get/pons/custid/?custid=39001632062",
            function (data) {

                $.each(data.data, function (index, item) {

                    var url = "http://:8080/zwzx/api/v1/get/onustate/sn/?sn=" + item.sn + "";

                    $.getJSON(url,
                        function (dataSn, status) {
                            if (dataSn.resultCode == 'success') {
                                tableData.push({
                                    cust_name: item.cust_name,
                                    sn: item.sn,
                                    factory: item.factory,
                                    operState: dataSn.data.operState,
                                    lastOffTime: dataSn.data.lastOffTime,
                                    length: dataSn.data.length,
                                    temperature: dataSn.data.temperature,
                                    txPower: dataSn.data.txPower,
                                    rxPower: dataSn.data.rxPower,
                                    ptxPower: dataSn.data.ptxPower,
                                    prxPower: dataSn.data.prxPower,
                                    acc_num: item.acc_num,
                                    useraddress: item.useraddress,
                                    region_name: item.region_name
                                });
                            } else {
                                OperState = dataSn.resultCode;
                            }
                            i++;
                        }, "json");

                        setTimeout(function () {
                                table.render({
                                    elem: '#currentTableId',
                                    toolbar: '#toolbarDemo',
                                    defaultToolbar: ['filter', 'exports', 'print', {
                                        title: '提示',
                                        layEvent: 'LAYTABLE_TIPS',
                                        icon: 'layui-icon-tips'
                                    }],
                                    cols: [[
                                        {type: 'numbers', sort: true},
                                        {field: 'cust_name', title: '客户名称', align: 'left', sort: true},
                                        {field: 'sn', title: 'SN号', templet: '#sn'},
                                        {field: 'factory', title: 'OLT厂家', align: 'left', unresize: true, sort: true},

                                        {field: 'operState', title: 'ONU状态', align: 'left'},
                                        {field: 'lastOffTime', title: '最近一次脱网时间', align: 'left', sort: true},
                                        {field: 'length', title: '光纤长度(km)', align: 'left', sort: true},
                                        {field: 'temperature', title: '温度(℃)', align: 'left',},
                                        {field: 'txPower', title: '发送光功率(dBm)', align: 'left', sort: true},
                                        {field: 'rxPower', title: '接收光功率(dBm)', align: 'left', sort: true},
                                        {field: 'ptxPower', title: 'OLT发送光功率(dBm)', align: 'left', sort: true},
                                        {field: 'prxPower', title: 'OLT接收光功率(dBm)', align: 'left'},

                                        {field: 'acc_num', title: '接入号码', align: 'left', sort: true},
                                        {field: 'useraddress', title: '安装地址', align: 'left', sort: true},
                                        {field: 'region_name', title: '地区', align: 'left'}
                                    ]],
                                    data: tableData,
                                    page: true, //是否显示分页
                                    limits: [10, 20, 50, 100],
                                    limit: 10, //每页默认显示的数量
                                    even: true
                                    //skin: 'line' //表格风格
                                });
                        }, 6000);

                }, "json");
            }
        );
</script>

2.layui-table-编辑

在这里插入图片描述

layer.prompt({
        //表单元素类型 0=文本框 1=密码框 2=文本域
        formType:0,
        value:""   //初始时的值，默认空字符
    },function (value,index) {
        obj.update({
            cust_name:value
        });
        layer.close(index);
    });
昵称已存在l
关注
专栏目录
BOOTSTRAP-TABLE源码
01-05
BOOTSTRAP-TABLE源码，官方最新版本，喜欢的朋友可以去下载使用
LWUIT table 源码 表格的实现
Lightweight User Interface Toolkit
11-27 1837
对于lwuit 表格的实现，目前发布的lwuit.jar 并没有 出现table 和tree 这两项。在此之前都是通过lwuit 1.2.1 中的list 和grid 来实现表格。。     http://blog.csdn.net/hellogv/archive/2009/01/12/3759984.aspx http://blog.csdn.net/lwuit/arc
web html表格源码,JS_table
weixin_39854440的博客
06-16 283
JS桌面\css\desktop.css......\...\ext-all.css......\desktop.html......\images\accordian.gif......\......\bogus.png......\......\default\box\corners-blue.gif......\......\.......\...\corners.gif......\......
course-table源码
10-14
course-table源码，是一个很不错的Android代码，有兴趣的伙伴们抽时间可以看一下把。
js操作表格
12-18
js操作表格 实例 js操作表格 实例 js操作表格 实例
layui-高级表格-soul-table功能-HTML源码
10-02
在使用layui-soul-table时，你需要引入layui的CSS和JS文件，以及soul-table的特定文件。在HTML代码中，定义表格结构，并通过JavaScript进行初始化和配置。例如： ```html <!DOCTYPE html> <script src="layui....
基于Vue和Javascript的layui-table扩展插件设计源码
05-31
layui-table扩展插件项目源码，共321个文件，采用JavaScript、CSS、HTML和Vue等语言开发，涉及多种文件类型如JavaScript脚本、SCSS样式表、Markdown文档、JSON配置文件、CSS样式表、HTML文档、Vue组件、TTF字体文件...
sheetjs xlsx 源码
07-13
SheetJS 是一个强大的开源库，专门用于处理电子表格数据，特别是在JavaScript环境中操作Excel文件。它提供了`xlsx`模块，能够方便地读取、写入和转换Excel文件（.xlsx 和 .xls 格式）。这个库在Web应用、数据处理和...
基于JavaScript的JQuery Ajax Tree Table设计源码，支持编辑功能
最新发布
09-28
该项目是一款基于JavaScript的JQuery Ajax Tree Table（JQATT）设计源码，具备树形数据表展示功能，并新增了编辑特性。该项目包含27个文件，涉及14个JavaScript文件、4个HTML文件、2个JSON文件、1个Git忽略文件、1个...
vue3新拟态组件库开发流程——table组件源码
SanOrintea的博客
04-28 1566
vue3新拟态组件库开发流程——table组件源码
js实现漂亮的table表格
07-26
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
table
03-18
桌子 该项目是使用版本11.2.3生成的。 开发服务器 为开发服务器运行ng serve 。导航到http://localhost:4200/ 。如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。构建工件将存储在dist/目录中。使用--prod标志进行生产构建。 运行单元测试 运行ng test以通过执行单元测试。 运行端到端测试 运行ng e2e通过执行端到端测试。 进一步的帮助 要获得有关Angular CLI的更多帮助，请使用ng help或查看“ 页面。
js-table-example
04-16
___ ______ ____ _ _ ___ / \ \ / / ___| / ___| | ___ _ _ __| |/ _ \ / _ \ \ /\ / /\___ \ | | | |/ _ \| | | |/ _` | (_) | / ___ \ V V / ___) | | |___| | (_) | |_| | (_| |\__, | /_/ \_\_/\_/ |____/ \____|_|\___/ \__,_|\__,_| /_/ 你好呀！ 欢迎使用AWS Cloud9！ 首先，创建一些文件，在终端上播放，或访问以获取我们的文档。 祝您编码愉快！
layui实现table加载的示例代码
01-21
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', height : 'full-20', // 容器高度 url : '/csCloud-admin
JQuery 动态生成Table表格实例代码
11-29
JQuery动态生成Table表格 主要用到了JQuery中的append和appendto的方法,具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>动态创建表格</title> <script type="text/javascript" sr
jquery-table2excel源码
编辑编辑器
08-26 550
/* * jQuery table2excel - v1.1.2 * jQuery plugin to export an .xls file in browser from an HTML table * https://github.com/rainabba/jquery-table2excel * * Made by rainabba * Under MIT License */ //table2excel.js (function ( $, window, document,
bootstrap-table源码解读
ronon77的专栏
05-21 893
1.使用 简单场景： Js代码   &lt;table id="table"&gt;&lt;/table&gt;      $("#table").bootstrapTable({       url: options.url,        method: options.method || 'get',      //请求方式（*）       //toolb...
一段js动态操作table代码
jianfpeng241241的专栏
05-25 475
1 查找表对象 /** * 查找对象 * */ function findObj(theObj, theDoc) { var p, i, foundObj; if(!theDoc) theDoc = document; if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) { theDoc = parent.fram
Lua中table类型的源码实现
MaximusZhou的专栏
04-14 6016
1、概述 table是lua中唯一的表示数据结构的工具。它可以用于实现数据容器、函数环境（Env）、元表（metatable）、模块（module）和注册表（registery）等其他各种用途。因此了解table的实现是非常有必要的，根据《Lua中数据类型的源码实现》中知道，在Lua中，table是由结构体体Table来实现的。下面将以Lua 5.2.1的源码来看table的实现。 2、实现原
layui table 源码开发
11-17
如果想要开发Layui table模块的源码，可以按照以下步骤进行： 1. 首先，在HTML页面中引入Layui的相关文件，包括layui.js和layui.css。 2. 在HTML页面中添加一个table元素，并为其添加一个id属性，例如： ```html...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值