BootStrap table表格插件自适应固定表头(超好用)


Posted in Javascript onAugust 24, 2016

首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快)

当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦)

ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/

还有,使用前请引入bootstrap的相关css,js,jQuery,以及bootstrap-table的css,js至少这5个基本文件

一,html表格方式

例一:需求,简单的表格数据呈现,表头是两行,还有一个上下浮的箭头

分析:很简单,只需要html就可以实现,按照常规的表格来画,添加上bootstrap-table独有的自定义属性即可,注意如果不使用js请在最开始的table标签中加上data-toggle

html代码:

<div>
<table data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover" id="tableL01">
<thead>
<tr>
<th data-field="lhc" data-rowspan="2" data-align="center" data-valign="middle">来耗存</th>
<th data-field="dr" data-colspan="3" data-align="center" data-valign="middle">当日</th>
<th data-field="bz" data-colspan="3" data-align="center" data-valign="middle">本周</th>
<th data-field="by" data-colspan="3" data-align="center" data-valign="middle">本月</th>
</tr>
<tr>
<th data-field="drbq" data-align="center" data-valign="middle">本期</th>
<th data-field="drtb" data-align="center" data-valign="middle">同比</th>
<th data-field="drhb" data-align="center" data-valign="middle">环比</th>
<th data-field="bzbq" data-align="center" data-valign="middle">本期</th>
<th data-field="bztb" data-align="center" data-valign="middle">同比</th>
<th data-field="bzhb" data-align="center" data-valign="middle">环比</th>
<th data-field="bybq" data-align="center" data-valign="middle">本期</th>
<th data-field="bytb" data-align="center" data-valign="middle">同比</th>
<th data-field="byhb" data-align="center" data-valign="middle">环比</th>
</tr>
</thead>
<tbody>
<tr>
<td>来煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>来煤量</td>
<td>76573</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>4.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>1.45</td>
<td>234534</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>4.35</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.75</td>
<td>44225</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.74</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>3.45</td>
</tr>
<tr>
<td>耗煤量</td>
<td>43363</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>32422</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>13345</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>来煤量</td>
<td>34624</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>4.35</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>1.23</td>
<td>452346</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.32</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.05</td>
<td>94524</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>耗煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>耗煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>耗煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>耗煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>耗煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>耗煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
</tbody>
</table>
</div>

例二:需求,第二个表格后面有个显示进度的自定义单元格,并且第一行要求是做一个合计的统计展示,这两个功能需要用js来设定自定义行列

html代码:

<div>
<table data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover" id="tableL02">
<thead>
<tr>
<th data-field="id" data-align="center" data-valign="middle">序号</th>
<th data-field="gys" data-align="center" data-valign="middle">供应商</th>
<th data-field="pz" data-align="center" data-valign="middle">品种</th>
<th data-field="rz" data-align="center" data-valign="middle">热值</th>
<th data-field="mj" data-align="center" data-valign="middle">煤价</th>
<th data-field="bmdj" data-align="center" data-valign="middle">标煤单价</th>
<th data-field="drlm" data-align="center" data-valign="middle">当日来煤</th>
<th data-field="ljlm" data-align="center" data-valign="middle">累计来煤</th>
<th data-field="yjhl" data-align="center" data-valign="middle">月计划量</th>
<th data-field="yjhjd" data-align="center" data-valign="middle" data-formatter="progress">月计划完成进度</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>双欣矿业</td>
<td>低硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>6686.08</td>
<td>30000</td>
<td>22%</td>
</tr>
<tr>
<td>3</td>
<td>伊泰股份</td>
<td>工程煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>51888.72</td>
<td>70000</td>
<td>74%</td>
</tr>
<tr>
<td>4</td>
<td>嘉远公司</td>
<td>中高硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>20041.86</td>
<td>90000</td>
<td>100%</td>
</tr>
<tr>
<td>5</td>
<td>爱地能源</td>
<td>低硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>5191.08</td>
<td>30000</td>
<td>0%</td>
</tr>
<tr>
<td>6</td>
<td>恒泰煤炭</td>
<td>中高硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>18265.56</td>
<td>0</td>
<td>22%</td>
</tr>
<tr>
<td>7</td>
<td>双欣矿业</td>
<td>低硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>6686.08</td>
<td>30000</td>
<td>22%</td>
</tr>
<tr>
<td>8</td>
<td>双欣矿业</td>
<td>低硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>6686.08</td>
<td>30000</td>
<td>22%</td>
</tr>
<tr>
<td>9</td>
<td>双欣矿业</td>
<td>低硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>6686.08</td>
<td>30000</td>
<td>22%</td>
</tr>
</tbody>
</table>
</div>

js代码:

//声明用来统计合计(累计来煤,月计划)的变量
var yjhArr=[];
var ljlmArr=[];
//显示进度条的自定义列
function progress (value,row){
var width=parseInt(row.yjhjd);
var red='#e63737';
var blue='#b6ccf4';
yjhArr.push(row.yjhl);
ljlmArr.push(row.ljlm);
return "<div style='height:20px;border:1px solid #b6ccf4;'><span style='display:block;float:left;width:"+width+"%;height:100%;background-color:"+<br>



(width>=100?red:blue)+";'>"+value+"</span></div>"
}
//计算合计数值的方法
function yjhTotal(){
var subyjh=0;
var subljlm=0;
var row=[];
for(var i=0;i<yjhArr.length;i++){
if(yjhArr[i]==""){
yjhArr[i]=0;
}
subyjh+=parseFloat(yjhArr[i]);
}
for(var j=0;j<ljlmArr.length;j++){
if(ljlmArr[j]==""){
ljlmArr[j]=0;
}
subljlm+=parseFloat(ljlmArr[j]);
}
row.push({
id:1,
gys:'合计',
pz:'',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:subljlm.toFixed(2),
yjhl:subyjh,
yjhjd:'107%'
});
return row
}

分析:自定义行列需要添加data-formatter=‘方法名',其中progress()方法中的参数row,会在表格生成行的时候每生成一行就执行一次并将该行的对象传进来。

二:js方式

通过这种方法,可以很方便的为表格设置参数,处理数据方面十分便捷,尤其是设置请求方式和地址时,不过这个项目暂时只是静态页面,有关数据的以后接触在写上来

例一:同上例一

html:

<div>
<table class="table table-striped table-bordered table-hover" id="tableL01"></table>
</div>

js:

//表格插件(表一)开始
$('#tableL01').bootstrapTable({
height:268,
//模拟数据
columns: [[{
align:'center',
valign:'middle',
field: 'lhc',
title: '来耗存',
rowspan:2
}, {
align:'center',
valign:'middle',
field: 'dr',
title: '当日',
colspan:3
}, {
align:'center',
valign:'middle',
field: 'bz',
title: '本周',
colspan:3
},{
align:'center',
valign:'middle',
field: 'by',
title: '本月',
colspan:3}],
[{
align:'center',
valign:'middle',
field: 'drbq',
title: '本期'
}, {
align:'center',
valign:'middle',
field: 'drtb',
title: '同比',
formatter:trend
},{
align:'center',
valign:'middle',
field: 'drhb',
title: '环比',
formatter:trend}, {
align:'center',
valign:'middle',
field: 'bzbq',
title: '本期'
}, {
align:'center',
valign:'middle',
field: 'bztb',
title: '同比',
formatter:trend
},{
align:'center',
valign:'middle',
field: 'bzhb',
title: '环比',
formatter:trend}, {
align:'center',
valign:'middle',
field: 'bybq',
title: '本期'
}, {
align:'center',
valign:'middle',
field: 'bytb',
title: '同比',
formatter:trend},{
align:'center',
valign:'middle',
field: 'byhb',
title: '环比',
formatter:trend
}]],
data:[{
id:1,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:2,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:3,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:4,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:5,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:6,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:7,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:8,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:9,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:10,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:11,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:12,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
}]});
//模拟数据结束
//上下浮动箭头样式添加
function trend(value,row){
var trendIcon=row.id%2===0?'glyphicon glyphicon-arrow-down':'glyphicon glyphicon-arrow-up';
return "<i class='"+trendIcon+"'></ i>"+value
}
//表格插件一结束

分析:$('#tableL01').bootstrapTable({})是插件开始的标志,在其中添加表格的参数,然后在data:是表格的数据,而columns中则是设置列参数以及表格数据的地方,其中这个项目有代表性的是表头分为两部分,因此需要在columns中加两个数组【{}】,【{}】。之前都写在一个数组里,而源代码遍历的是columns的length

例二:

html相同都是只需要一个带id的table标签即可

js:

//表格插件(表二)开始
//声明用来统计合计(累计来煤,月计划)的变量
var yjhArr=[];
var ljlmArr=[];
$('#tableL02').bootstrapTable({
height:268,
//模拟数据
columns: [{
align:'center',
valign:'middle',
field: 'id',
title: '序号'
}, {
align:'center',
valign:'middle',
field: 'gys',
title: '供应商'
}, {
align:'center',
valign:'middle',
field: 'pz',
title: '品种'
},{
align:'center',
valign:'middle',
field: 'rz',
title: '热值'
},{
align:'center',
valign:'middle',
field: 'mj',
title: '煤价'
},{
align:'center',
valign:'middle',
field: 'bmdj',
title: '标煤单价'
},{
align:'center',
valign:'middle',
field: 'drlm',
title: '当日来煤'
},{
align:'center',
valign:'middle',
field: 'ljlm',
title: '累计来煤'
},{
align:'center',
valign:'middle',
field: 'yjhl',
title: '月计划量'
},{
align:'center',
valign:'middle',
field: 'yjhjd',
title: '月计划完成进度',
formatter:progress
}],
data:[{
id:2,
gys:'双欣矿业',
pz:'低硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'6686.08',
yjhl:'30000',
yjhjd:'22%'
},{
id:3,
gys:'伊泰股份',
pz:'工程煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'51888.72',
yjhl:'70000',
yjhjd:'74%'
},{
id:4,
gys:'嘉远公司',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'20041.86',
yjhl:'90000',
yjhjd:'100%'
},{
id:5,
gys:'爱地能源',
pz:'低硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'5191.08',
yjhl:'',
yjhjd:'0%'
},{
id:6,
gys:'恒泰煤炭',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'18265.56',
yjhl:'',
yjhjd:'0%'
},{
id:6,
gys:'恒泰煤炭',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'18265.56',
yjhl:'',
yjhjd:'0%'
},{
id:6,
gys:'恒泰煤炭',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'18265.56',
yjhl:'',
yjhjd:'0%'
}
]});
//模拟数据结束
//显示进度条的自定义列
function progress (value,row){
var width=parseInt(row.yjhjd);
var red='#e63737';
var blue='#b6ccf4';
yjhArr.push(row.yjhl);
ljlmArr.push(row.ljlm);
return "<div style='height:20px;border:1px solid #b6ccf4;'><span style='display:block;float:left;width:"+width+"%;height:100%;background-color:"+(width>=100?red:blue)+";'>"+value+"</span></div>"
}
//计算合计数值的方法
function yjhTotal(){
var subyjh=0;
var subljlm=0;
var row=[];
for(var i=0;i<yjhArr.length;i++){
if(yjhArr[i]==""){
yjhArr[i]=0;
}
subyjh+=parseFloat(yjhArr[i]);
}
for(var j=0;j<ljlmArr.length;j++){
if(ljlmArr[j]==""){
ljlmArr[j]=0;
}
subljlm+=parseFloat(ljlmArr[j]);
}
row.push({
id:1,
gys:'合计',
pz:'',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:subljlm,
yjhl:subyjh,
yjhjd:'107%'
});
return row
}

这个其实和第一种方式差别不大,只不过把自定义列放在数据中设置罢了。比较好理解。而关于其他参数可以参考官网,数据是动态的如何添加网上也有不少例子,只要都放在.bootstrapTable({})中就可以了

以上所述是小编给大家介绍的BootStrap table表格插件自适应固定表头(超好用),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 学习 - 提高篇
Feb 02 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
JS中数据结构之栈
Jan 01 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 #Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 #Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 #Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 #Javascript
JS简单实现无缝滚动效果实例
Aug 24 #Javascript
JS动态加载脚本并执行回调操作
Aug 24 #Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 #Javascript
You might like
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
详解python单例模式与metaclass
2016/01/15 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
python实现在一个画布上画多个子图
2020/01/19 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
平面设计岗位职责
2013/12/14 职场文书
工程项目经理任命书
2014/06/05 职场文书
2014年党小组工作总结
2014/12/20 职场文书
技能培训通讯稿
2015/07/18 职场文书
致短跑运动员加油稿
2015/07/21 职场文书