固定表格行和列的方法(1)------Grid.js

最新推荐文章于 2022-02-23 14:34:53 发布
最新推荐文章于 2022-02-23 14:34:53 发布
阅读量615 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/wangzhijie/blog/983234
版权

demo:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Grid Demo</title>
		<meta name="description" content="HTML-based table with fixed headers, fixed footers, fixed left columns, row selection, sorting and more. Open source.">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<link rel="stylesheet" href = "grid.css"></link>
        <script src = "grid.js"></script>
	</head>
	<body>
		
		<div id="demoDiv">
			<div id="demoGrid">
				<table id="demoTable">
					<colgroup><col id="demoTableCol1"></colgroup>
					<thead>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<th colspan = "2"><span id="demoHdr0">Team</span></th>
							
							<th class="num"  colspan = "2"><span id="demoHdr2" title="Losses">L</span></th>
							
							<th class="num"  colspan = "2"><span id="demoHdr4" title="Win Percentage">Pct</span></th>
							
							<th class="num"  colspan = "2"><span id="demoHdr6" title="Points Against">PA</span></th>
							
							<th class="num"  colspan = "2"><span id="demoHdr8" title="Home Record">Home</span></th>
							
							<th class="num"  colspan = "2"><span id="demoHdr10" title="Division Record">Div</span></th>
							
							<th class="num"  colspan = "2"><span id="demoHdr12" title="Last 5 Games">Last 5</span></th>
							
							<th><span id="demoHdr14">Division</span></th>
							<th><span id="demoHdr15">Conference</span></th>
						</tr>
						<tr>
							<th><span id="demoHdr0">Team</span></th>
							<th class="num"><span id="demoHdr1" title="Wins">W</span></th>
							<th class="num"><span id="demoHdr2" title="Losses">L</span></th>
							<th class="num"><span id="demoHdr3" title="Ties">T</span></th>
							<th class="num"><span id="demoHdr4" title="Win Percentage">Pct</span></th>
							<th class="num"><span id="demoHdr5" title="Points For">PF</span></th>
							<th class="num"><span id="demoHdr6" title="Points Against">PA</span></th>
							<th class="num"><span id="demoHdr7" title="Net Points">Net Pts</span></th>
							<th class="num"><span id="demoHdr8" title="Home Record">Home</span></th>
							<th class="num"><span id="demoHdr9" title="Road Record">Road</span></th>
							<th class="num"><span id="demoHdr10" title="Division Record">Div</span></th>
							<th class="num"><span id="demoHdr11" title="Conference Record">Conf</span></th>
							<th class="num"><span id="demoHdr12" title="Last 5 Games">Last 5</span></th>
							<th><span id="demoHdr13">Streak</span></th>
							<th><span id="demoHdr14">Division</span></th>
							<th><span id="demoHdr15">Conference</span></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="txt">New England Patriots</td>
							<td>13</td>
							<td>3</td>
							<td>0</td>
							<td>.812</td>
							<td>513</td>
							<td>342</td>
							<td>+171</td>
							<td>7-1-0</td>
							<td>6-2-0</td>
							<td>5-1-0</td>
							<td>10-2-0</td>
							<td>5-0-0</td>
							<td class="txt">Won 8</td>
							<td class="txt">East</td>
							<td class="txt">AFC</td>
						</tr>
						<tr><td class="txt">New York Jets</td><td>8</td><td>8</td><td>0</td><td>.500</td><td>377</td><td>363</td><td>+14</td><td>6-2-0</td><td>2-6-0</td><td>3-3-0</td><td>6-6-0</td><td>2-3-0</td><td class="txt">Lost 3</td><td class="txt">East</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Miami Dolphins</td><td>6</td><td>10</td><td>0</td><td>.375</td><td>329</td><td>313</td><td>+16</td><td>4-4-0</td><td>2-6-0</td><td>3-3-0</td><td>5-7-0</td><td>3-2-0</td><td class="txt">Won 1</td><td class="txt">East</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Buffalo Bills</td><td>6</td><td>10</td><td>0</td><td>.375</td><td>372</td><td>434</td><td>-62</td><td>5-3-0</td><td>1-7-0</td><td>1-5-0</td><td>4-8-0</td><td>1-4-0</td><td class="txt">Lost 1</td><td class="txt">East</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Baltimore Ravens</td><td>12</td><td>4</td><td>0</td><td>.750</td><td>378</td><td>266</td><td>+112</td><td>8-0-0</td><td>4-4-0</td><td>6-0-0</td><td>9-3-0</td><td>4-1-0</td><td class="txt">Won 2</td><td class="txt">North</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Pittsburgh Steelers</td><td>12</td><td>4</td><td>0</td><td>.750</td><td>325</td><td>227</td><td>+98</td><td>7-1-0</td><td>5-3-0</td><td>4-2-0</td><td>9-3-0</td><td>4-1-0</td><td class="txt">Won 2</td><td class="txt">North</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Cincinnati Bengals</td><td>9</td><td>7</td><td>0</td><td>.562</td><td>344</td><td>323</td><td>+21</td><td>4-4-0</td><td>5-3-0</td><td>2-4-0</td><td>6-6-0</td><td>2-3-0</td><td class="txt">Lost 1</td><td class="txt">North</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Cleveland Browns</td><td>4</td><td>12</td><td>0</td><td>.250</td><td>218</td><td>307</td><td>-89</td><td>3-5-0</td><td>1-7-0</td><td>0-6-0</td><td>3-9-0</td><td>0-5-0</td><td class="txt">Lost 6</td><td class="txt">North</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Houston Texans</td><td>10</td><td>6</td><td>0</td><td>.625</td><td>381</td><td>278</td><td>+103</td><td>5-3-0</td><td>5-3-0</td><td>4-2-0</td><td>8-4-0</td><td>2-3-0</td><td class="txt">Lost 3</td><td class="txt">South</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Tennessee Titans</td><td>9</td><td>7</td><td>0</td><td>.562</td><td>325</td><td>317</td><td>+8</td><td>5-3-0</td><td>4-4-0</td><td>3-3-0</td><td>7-5-0</td><td>3-2-0</td><td class="txt">Won 2</td><td class="txt">South</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Jacksonville Jaguars</td><td>5</td><td>11</td><td>0</td><td>.312</td><td>243</td><td>329</td><td>-86</td><td>4-4-0</td><td>1-7-0</td><td>3-3-0</td><td>4-8-0</td><td>2-3-0</td><td class="txt">Won 1</td><td class="txt">South</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Indianapolis Colts</td><td>2</td><td>14</td><td>0</td><td>.125</td><td>243</td><td>430</td><td>-187</td><td>2-6-0</td><td>0-8-0</td><td>2-4-0</td><td>2-10-0</td><td>2-3-0</td><td class="txt">Lost 1</td><td class="txt">South</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Denver Broncos</td><td>8</td><td>8</td><td>0</td><td>.500</td><td>309</td><td>390</td><td>-81</td><td>3-5-0</td><td>5-3-0</td><td>3-3-0</td><td>6-6-0</td><td>2-3-0</td><td class="txt">Lost 3</td><td class="txt">West</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">San Diego Chargers</td><td>8</td><td>8</td><td>0</td><td>.500</td><td>406</td><td>377</td><td>+29</td><td>5-3-0</td><td>3-5-0</td><td>3-3-0</td><td>7-5-0</td><td>4-1-0</td><td class="txt">Won 1</td><td class="txt">West</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Oakland Raiders</td><td>8</td><td>8</td><td>0</td><td>.500</td><td>359</td><td>433</td><td>-74</td><td>3-5-0</td><td>5-3-0</td><td>3-3-0</td><td>6-6-0</td><td>1-4-0</td><td class="txt">Lost 1</td><td class="txt">West</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">Kansas City Chiefs</td><td>7</td><td>9</td><td>0</td><td>.438</td><td>212</td><td>338</td><td>-126</td><td>3-5-0</td><td>4-4-0</td><td>3-3-0</td><td>4-8-0</td><td>3-2-0</td><td class="txt">Won 1</td><td class="txt">West</td><td class="txt">AFC</td></tr>
						<tr><td class="txt">New York Giants</td><td>9</td><td>7</td><td>0</td><td>.562</td><td>394</td><td>400</td><td>-6</td><td>4-4-0</td><td>5-3-0</td><td>3-3-0</td><td>5-7-0</td><td>3-2-0</td><td class="txt">Won 2</td><td class="txt">East</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">Philadelphia Eagles</td><td>8</td><td>8</td><td>0</td><td>.500</td><td>396</td><td>328</td><td>+68</td><td>3-5-0</td><td>5-3-0</td><td>5-1-0</td><td>6-6-0</td><td>4-1-0</td><td class="txt">Won 4</td><td class="txt">East</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">Dallas Cowboys</td><td>8</td><td>8</td><td>0</td><td>.500</td><td>369</td><td>347</td><td>+22</td><td>5-3-0</td><td>3-5-0</td><td>2-4-0</td><td>6-6-0</td><td>1-4-0</td><td class="txt">Lost 2</td><td class="txt">East</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">Washington Redskins</td><td>5</td><td>11</td><td>0</td><td>.312</td><td>288</td><td>367</td><td>-79</td><td>2-6-0</td><td>3-5-0</td><td>2-4-0</td><td>5-7-0</td><td>1-4-0</td><td class="txt">Lost 2</td><td class="txt">East</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">Green Bay Packers</td><td>15</td><td>1</td><td>0</td><td>.938</td><td>560</td><td>359</td><td>+201</td><td>8-0-0</td><td>7-1-0</td><td>6-0-0</td><td>12-0-0</td><td>4-1-0</td><td class="txt">Won 2</td><td class="txt">North</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">Detroit Lions</td><td>10</td><td>6</td><td>0</td><td>.625</td><td>474</td><td>387</td><td>+87</td><td>5-3-0</td><td>5-3-0</td><td>3-3-0</td><td>6-6-0</td><td>3-2-0</td><td class="txt">Lost 1</td><td class="txt">North</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">Chicago Bears</td><td>8</td><td>8</td><td>0</td><td>.500</td><td>353</td><td>341</td><td>+12</td><td>5-3-0</td><td>3-5-0</td><td>3-3-0</td><td>7-5-0</td><td>1-4-0</td><td class="txt">Won 1</td><td class="txt">North</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">Minnesota Vikings</td><td>3</td><td>13</td><td>0</td><td>.188</td><td>340</td><td>449</td><td>-109</td><td>1-7-0</td><td>2-6-0</td><td>0-6-0</td><td>3-9-0</td><td>1-4-0</td><td class="txt">Lost 1</td><td class="txt">North</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">New Orleans Saints</td><td>13</td><td>3</td><td>0</td><td>.812</td><td>547</td><td>339</td><td>+208</td><td>8-0-0</td><td>5-3-0</td><td>5-1-0</td><td>9-3-0</td><td>5-0-0</td><td class="txt">Won 8</td><td class="txt">South</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">Atlanta Falcons</td><td>10</td><td>6</td><td>0</td><td>.625</td><td>402</td><td>350</td><td>+52</td><td>6-2-0</td><td>4-4-0</td><td>3-3-0</td><td>7-5-0</td><td>3-2-0</td><td class="txt">Won 1</td><td class="txt">South</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">Carolina Panthers</td><td>6</td><td>10</td><td>0</td><td>.375</td><td>406</td><td>429</td><td>-23</td><td>3-5-0</td><td>3-5-0</td><td>2-4-0</td><td>3-9-0</td><td>3-2-0</td><td class="txt">Lost 1</td><td class="txt">South</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">Tampa Bay Buccaneers</td><td>4</td><td>12</td><td>0</td><td>.250</td><td>287</td><td>494</td><td>-207</td><td>3-5-0</td><td>1-7-0</td><td>2-4-0</td><td>3-9-0</td><td>0-5-0</td><td class="txt">Lost 10</td><td class="txt">South</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">San Francisco 49ers</td><td>13</td><td>3</td><td>0</td><td>.812</td><td>380</td><td>229</td><td>+151</td><td>7-1-0</td><td>6-2-0</td><td>5-1-0</td><td>10-2-0</td><td>4-1-0</td><td class="txt">Won 3</td><td class="txt">West</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">Arizona Cardinals</td><td>8</td><td>8</td><td>0</td><td>.500</td><td>312</td><td>348</td><td>-36</td><td>6-2-0</td><td>2-6-0</td><td>4-2-0</td><td>7-5-0</td><td>4-1-0</td><td class="txt">Won 1</td><td class="txt">West</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">Seattle Seahawks</td><td>7</td><td>9</td><td>0</td><td>.438</td><td>321</td><td>315</td><td>+6</td><td>4-4-0</td><td>3-5-0</td><td>3-3-0</td><td>6-6-0</td><td>3-2-0</td><td class="txt">Lost 2</td><td class="txt">West</td><td class="txt">NFC</td></tr>
						<tr><td class="txt">St. Louis Rams</td><td>2</td><td>14</td><td>0</td><td>.125</td><td>193</td><td>407</td><td>-214</td><td>1-7-0</td><td>1-7-0</td><td>0-6-0</td><td>1-11-0</td><td>0-5-0</td><td class="txt">Lost 7</td><td class="txt">West</td><td class="txt">NFC</td></tr>
					</tbody>
				</table>
			</div>
		</div>
		
		<script type="text/javascript">
			//调用方法
			(function(window, document, undefined) {
				"use strict";
				//这里需要注明每一列的主要数据类型
				var gridColSortTypes = ["string", "number", "number", "number", "number", "number", "number", "number", "number", "number", "number", "number", "number", "string", "string", "string"], 
				    gridColAlign = [];
				
				var onColumnSort = function(newIndexOrder, columnIndex, lastColumnIndex) {
					var doc = document;
					if (columnIndex !== lastColumnIndex) {
						if (lastColumnIndex > -1) {
							doc.getElementById("demoHdr" + (lastColumnIndex - 1)).parentNode.style.backgroundColor = "";
						}
						doc.getElementById("demoHdr" + (columnIndex - 1)).parentNode.style.backgroundColor = "#f7f7f7";
					}
				};
				
				var onResizeGrid = function(newWidth, newHeight) {
					var demoDivStyle = document.getElementById("demoDiv").style;
					demoDivStyle.width = newWidth + "px";
					demoDivStyle.height = newHeight + "px";
				};
				
				for (var i=0, col; col=gridColSortTypes[i]; i++) {
					gridColAlign[i] = (col === "number") ? "right" : "left";
				}
				
				var myGrid = new Grid("demoGrid", {
				    	srcType : "dom", 
				    	srcData : "demoTable", 
				    	allowGridResize : true, 
				    	allowColumnResize : true, 
				    	allowClientSideSorting : true, 
				    	allowSelections : true, 
				    	allowMultipleSelections : true, 
				    	showSelectionColumn : true, 
				    	onColumnSort : onColumnSort, 
				    	onResizeGrid : onResizeGrid, 
				    	colAlign : gridColAlign, 
				    	colBGColors : ["#fafafa"], 
				    	colSortTypes : gridColSortTypes, 
                        //这里是你想要固定的左侧的列数
				    	fixedCols : 1
				    });
			})(this, this.document);
		</script>
	</body>
</html>

效果如下图：

grid固定行和列（红色部分）

红色部分就是被固定的行和列；

此方法最大的缺点是：如果表头有colspan或是rowspan就会出现错位，所以在使用时要把table想办法补全，但是，对于没有colspan和rowspan属性的表格来说还是很好用的。

Grid.js下载地址：http://pan.baidu.com/s/1o84YEnC

Grid.css下载地址:http://pan.baidu.com/s/1i4GxZJf

转载于:https://my.oschina.net/wangzhijie/blog/983234

chibang4876
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML Table 首尾行、首列固定
kingwin28的博客
02-16 1289
HTML Table 首尾行、首列固定
关于js表格固定列实现
商嘉航的博客
12-17 2421
一、概述 在开发过程中前端列表展示数据对比查看的情况是比较常见的，我最近接到的一个任务就是要处理这样的数据；一般这种需求将某一列或几列进行横向固定然后其它不固定的列可以照常实现x轴的滚动； 话不多说先上图： 需求设计 这里实现了表格的x轴横向固定列和非固定列的滚动； 实现了表格y轴同步滚动； 实现思路 实现滚动条大家都知道怎么处理，但是设计固定列我一开始没有什么具体的想法，本来是考虑把...
表格实现固定行列
sun~的博客
02-23 488
Table 实现固定行列 - JackGIS - 博客园
js实现table行列固定
07-29
引用JS,固定table的前n行及前n列， @*表格冻结*@ [removed] $(function () { $(".fixTable").tableHeadFixer({ "left": 0 }); $(".fixTable").tableHeadFixer({ "top": 1 }); }); [removed]
jquery固定表格行列
04-12
如何使用jquery固定表格行列，固定table表头。
fixed-columns
06-02
7. **单元格交互**：当列被固定后，需要处理单元格的点击、排序和其他交互行为，确保这些功能在固定列和非固定列之间能够一致地工作。 通过以上技术，fixed-columns可以帮助我们创建出更高效、用户友好的数据展示...
前端项目-ag-grid.zip
09-03
1. **ag-grid简介**：ag-grid是一个高度可定制、高性能的JavaScript表格库，支持Web应用中的数据呈现和操作。它的核心特性包括数据绑定、实时更新、数据过滤、排序、分组和聚合等功能。 2. **框架无关性**：ag-grid...
table表格固定行和列
05-11
在网页设计中，表格（Table...以上就是关于“table表格固定行和列”的一些实现方法和注意事项，选择合适的方法取决于项目需求、团队技术栈以及对性能和可维护性的考虑。在实践中，可能需要结合多种技术来达到最佳效果。
Web-前端html+css从入门到精通 170. 布局扩展之等高布局.zip
05-23
这种方法通常适用于固定数量和位置的元素，对于动态内容或响应式设计可能不太适用。 5. **JavaScript解决方案**：在某些情况下，当浏览器支持不足或者需要更复杂的动态等高布局时，可以借助JavaScript来计算和设置...
HTML页面table表格固定行和列
01-04
这个例子中，我们使用了CSS Grid将表格分为两部分，左侧固定列和右侧可滚动列。`position: sticky`属性使表头在滚动时保持在视口顶部，`left: 0`确保它固定在左侧。 对于更复杂的情况，例如，当表格有交错的表头...
html+js+css固定表格行列
11-30
用js+css控制表格行列固定，下列浏览器可用 Firefox 2+ Internet Explorer 5.5+ Safari 3+ Opera 9 Chrome
JS固定表头及左边列
07-02
原生JS写的表头固定及左边列固定功能，原创代码，代码比较简单，兼容IE8+、谷歌、火狐等主流浏览器，文件中包含JS源代码和示例。 此版本修正了之前的固定列的BUG。
利用js+css+html实现固定table的列头不动
10-20
本文分享了利用js+css+html实现固定table的列头不动的实例代码。小编认为具有很好的参考价值，感兴趣的朋友可以看下
固定表格行列(expression)在IE下适用
12-12
这是一种在IE下适用的固定行列的方法.其具体代码如下: 代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <html> <head> <title> New Document </title> <style> .FixedTitleRow { position: relative; top: [removed]this.offsetParent.scrollTop); z-index: 10; width: 80px; background-color: #FFCC00; } .FixedDataCo
Html纯js固定表头、左侧首列
12-13
Html纯js固定表头、左侧首列，无须使用第三方插件
纯CSS（基于CSS3）实现表格固定行列（附：样式与JS配置实现固定列行）
timfeng2009的专栏
09-09 2620
方法一、CSS3（position:sticky）实现固定行与列 这个是我正在使用的固定行列的方式，使用的新最的CSS3样式：position:sticky。 感觉上去这个样式与position:fixed非常像。 差异在两个地方：1、但是fixed是相对于body元素，而sticky是相对于（第一个定位不为static的）父级容器；2、虽然已经定位position起来了，但是仍然还是在原来...
JS写的GRID控件 ,多表头, 合并行单元格, 冻结列. 还算比较实用. (原创)
ABC2801的博客
12-14 613
开发中一直用到各种样式的GRID. 每次都要花一些时间弄. 抽空写了个 控件. 代码水平有限,还请高手指点.目前来看 是支持IE6+,FF .其他的 就没试. 先上张效果图吧. 固定的表头和冻结列其实是用4个表格实现的. 具体的实现代码我这里就不讲了. 有源码.主要讲下怎么使用.数据源是JSON格式 控件属性定义:...
表格组件GridManager的固定列详解
永恒的避风港
03-31 804
从2019年初时，就想添加固定列功能。但由于是源生编码而又需要支持框架的引用，调试来调试去，空留下一个fixed分支。 受今年疫情的影响，周未有了大把的时间。于是把去年未完成的固定列功能进行了实现。 如何使用 由使用者配置的列 配置起来相当简单，不需要单独去维护一个列，只需要在配置项中的columnData中增加fixed属性即可实现。 fixed属性的默认值为undefined，共接收两个值...
vxe-grid 自动横向滚动条，表格表头跟着滚动
最新发布
03-25
vxe-grid 是一个基于 Vue.js 的表格组件库，提供了自动横向滚动条和表头跟着滚动的功能。 当表格内容过多，超出了容器宽度时，vxe-grid 会自动出现横向滚动条，用户可以通过滚动条来查看隐藏部分的内容。同时，表头...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值