kk Blog —— 通用基础


date [-d @int|str] [+%s|"+%F %T"]
netstat -ltunp
sar -n DEV 1

用html+css+js实现一个无限级树形控件

http://t.zoukankan.com/rxbook-p-10975673.html

gg.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>树形菜单示例</title>

	<style type="text/css">
	ul>li {
		list-style: none;
	}

	/* 可展开*/
	.switch-open {
		margin-left:-12px;
		border:6px solid transparent;
		display:inline-block;
		height:0px;
		border-top-color: black;
	}

	/* 展开完毕*/
	.switch-close {
		margin-left:-12px;
		border:6px solid transparent;
		display:inline-block;
		height:0px;
		border-left-color: black;
		margin-bottom: 2px;

	}
	/* 改变CheckBox样式*/
	input[type='checkbox'] {
		height: 20px;

		-webkit-appearance:none;
		-moz-appearance: none;
		border: 1px solid #c9c9c9;
		border-radius: 3px;
		outline: none;
		color:white;
		text-align: center;
	}
	input[type='checkbox']:before {
		content: '√ ';
		color:transparent;
	}
	input[type=checkbox]:checked {
		background-color: #30add6;
	}
	input[type=checkbox]:checked:before {
		content: '√';
		color:white;
		font-weight: bold;
	}

	</style>
</head>

<body>

<div class="warp">
	<ul id="container">
	</ul>
</div>

<script type="text/javascript">

	//结构
	var json = {
		'0-0': {
			'0-0-0': {},
			'0-0-1': {
				'0-0-1-0': {},
				'0-0-1-1': {},
				'0-0-1-2': {}
			},
			'0-0-2': {}
		},
		'0-1': {
			'0-1-0': {},
			'0-1-1': {}
		},
		'0-2': {}
	};

	//这里生成DOM
	function generate(json, par)
	{
		for (var attr in json) {
			var ele = document.createElement('li');
			if (json[attr].length > 0) {
				ele.innerHTML = ' <input type="checkbox"></input>'+attr;
			} else {
				ele.innerHTML = '<span><span class="switch-open" onclick="toggle(this)"></span><input type="checkbox" onclick="checkChange(this)"></input>'+attr+'</span>';
				var nextpar = document.createElement('ul');
				ele.appendChild(nextpar);
				generate(json[attr], nextpar);
			}
			par.appendChild(ele);
		}
	}

	generate(json, document.getElementById('container'));


	//处理展开和收起
	function toggle(eve)
	{
		var par = eve.parentNode.nextElementSibling;
		if (par.style.display == 'none') {
			par.style.display = 'block';
			eve.className = 'switch-open';
		} else {
			par.style.display = 'none';
			eve.className = 'switch-close';
		}
	}

	//处理全部勾选和全部不选
	function checkChange(eve)
	{
		var oul = eve.parentNode.nextElementSibling;
		if (eve.checked) {
			for (var i = 0; i < oul.querySelectorAll('input').length; i++) {
				oul.querySelectorAll('input')[i].checked = true;
			}
		} else {
			for (var i = 0; i < oul.querySelectorAll('input').length; i++) {
				oul.querySelectorAll('input')[i].checked = false;
			}
		}
	}

</script>

</body>
</html>

两个 table 实现固定列

https://blog.csdn.net/psp0001060/article/details/49705247

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!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=utf-8" /> 
  <title>固定列头</title> 
  <script src="/rs/js/jquery.min.js" type="text/javascript"></script>
  <style type="text/css">

	.ui-table {
		border-collapse: collapse;
		width:100%;
		white-space: nowrap;
	}
	.ui-table th {
		border: 1px solid #ffffff;
		padding: 1px;
		text-align: center;
		height: 28px;
	}
	.ui-table td {
		border: 1px solid #ffffff;
		background-color: #eeeeee;
		padding: 3px;
		height: 28px;
	}
	div.x_auto_box {
		position: absolute;
		z-index: 1;
	}

	div.lock_box {
		float: left;
		position: sticky;
		left: 0;
		z-index: 5;

	}
	</style> 
 </head> 
 <body> 
  <!-- 左侧DIV --> 
  <div id="list" > 
   <div class="lock_box" style='display: inline-block'> 
    <table class="ui-table"> 
     <thead>
      <tr> 
       <td>No号</td> 
       <td>员工号</td> 
       <td>部门</td> 
      </tr> 
     </thead>
     <tbody>
<?php
	for ($i = 0; $i < 30; $i ++) {
		echo "<tr>";
		echo "<td>$i</td>";
		echo "<td>DHL130023</td>";
		echo "<td>动画联盟</td>";
		echo "</tr>";
	}
?>
     </tbody>
    </table> 
   </div> 

   <!-- 右侧 --> 
   <div class="x_auto_box" id="showDiv" style='display: inline-block'> 
<?php
	for ($i = 0; $i < 30; $i ++) {
		echo '<input type="hidden" name="dto.position" value="1" />';
	}
?>
    <table id="tableRight" class="ui-table"> 
     <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> 
       <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> 
       <td>备注</td> 
      </tr>
     </thead>
     <tbody>
<?php
$h = <<<here
      <tr οnclick="javascript:window.location.href='/HRMS2/pages/personManageInfo.jsp?userid=SX00001'"> 
       <td>男</td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td>未婚</td> 
       <td>小学</td> 
       <td>普通员工</td> 
       <td></td> 
       <td></td> 
       <td>专升本</td> 
       <td></td> 
       <td>0</td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td>0.0</td> 
       <td></td> 
       <td>0</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> 
here;
	for ($i = 0; $i < 30; $i ++) {
		echo $h;
	}
?>
     </tbody>
    </table> 
   </div> 
  </div>  
 </body>
</html>

一个 table 实现固定行、列

https://www.cnblogs.com/tiandi/p/13883306.html

https://www.cnblogs.com/acmilan/p/4217121.html

https://blog.csdn.net/m0_54281425/article/details/124478023

all.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body {
        font-family: Tahoma, Times New Roman, Times, serif;
        font-size: 13px;
        background-color: #E8E8E8;
}
table {
        border: 0px;
        font-size: 12.99px;
        border-collapse:collapse;
        margin-bottom: 10px;
        margin-top: 10px;
}
th {
        padding-left: 1px;
        padding-right: 1px;
        border: 1px solid #B9B9B9;
        height: 28px;
        min-width: 55px;
}
td {
        padding-left: 3px;
        padding-right: 5px;
        white-space: nowrap;
        border: 1px solid #B9B9B9;
        height: 28px;
        min-width: 10px;
}

child2.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
thead, thead tr th {
        position: sticky;
        z-index: 2;
        top: 0;
        background-clip: padding-box;
        background-color: #E8E8E8;
        outline-color: #B9B9B9;
        outline-style: solid;
        outline-width: thin;
}

@-moz-document url-prefix(){
thead, thead tr th {
        border: none;
}
}

th:nth-child(2) {
        position: sticky;
        z-index: 3;
        left: 0;
        background-clip: padding-box;
        background-color: #E8E8E8;
}
td:nth-child(2) {
        position: sticky;
        z-index: 1;
        left: 0;
        background-clip: padding-box;
        background-color: #E8E8E8;
}

table

1
2
3
4
5
6
7
8
9
10
<table >
<thead>
	<tr>
	<th></th>
	</tr>
</thead>

<tr>
</tr>
</table>

需要用到的2个属性

1
2
table-layout : fixed  
position : sticky

table-layout

table-layout属性有两种特定值:

auto(预设值)-表格的总宽度决定每一个储存格(cell)的最大值

fixed - 表格的总宽度决定于表格width的定义,以及各栏位(column)width的定义

为了让表格呈现滚动效果,必须设定table-layout:fixed 并且给与表格宽度。

1
2
3
4
table {
	table-layout: fixed;
	width: 100%;
}

Position

大家对position 的作用应该不陌生,而固定表格则需要使用到 position : sticky 的设定

sticky 的表现类似于relative 和fixed 的合体,在目标区域中可见时,他的行为就像relative 不会有任何变化,而当页面滚动超出目标区域时,他的表现改为fixed会固定于目标位置

要注意的是当position : sticky应用于table,只能作用于和,并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果!

1
2
3
4
thead tr th {
	position:sticky;
	top:0;
}