VUE-表格佈局、表格查詢、工具欄、表格、分頁欄
概述
VUE-表格佈局、表格查詢、工具欄、表格、分頁欄
效果圖
具體程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.outer {
width: 100%;
height: 100%;
background: #dcdfe6;
padding-top: 200px;
padding-bottom: 50px;
box-sizing: border-box;
position: relative;
}
.search {
height: 100px;
background: #5daf34;
position: absolute; top: 0 ; left: 0 ; width: 100%;
}
.funtools {
height: 100px;
background: #3a8ee6;
position: absolute; top: 100px ; left: 0 ; width: 100%;
}
.gridPanle {
height: 100%;
background: #4efffb;
/*border: 5px solid red;*/
}
.fenye {
background: #9933ff;
width:100%;
height: 50px;
position: absolute; bottom: 0px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function hideSearch(){
$('#search').hide();
$('#funtools').css("top",0);
$('.outer').css("padding-top", "100px");
}
function showSearch(){
$('#search').show();
$('#funtools').css("top",'100px');
$('.outer').css("padding-top", "200px");
}
</script>
</head>
<body>
<div class="outer">
<div id="search" class="search">
search<br/>
search<br/>
</div>
<div id="funtools" class="funtools">
funtools
<input type="button" value="隱藏查詢欄" onclick="hideSearch()">
<input type="button" value="顯示查詢欄" onclick="showSearch()">
</div>
<div id="gridPanle" class="gridPanle">
grid
</div>
<div class="fenye">分頁</div>
</div>
</body>
</html>
相關文章
- 表格佈局
- 等寬類表格佈局
- 小書MybatisPlus第4篇-表格分頁與下拉分頁查詢MyBatis
- Android之TableLayout(表格佈局)Android
- bootstrap13-邊框表格佈局boot
- android:TableLayout表格佈局詳解Android
- excel表格查詢功能在哪裡 excel表格怎麼快速查詢Excel
- 小程式簡單實現表格佈局
- bootstrap17-響應式表格佈局boot
- MSSQL基礎教程:多表格查詢SQL
- jQuery根據表格欄位升序和降序詳解jQuery
- PHP--動態生成sql查詢表格PHPSQL
- Flutter 分頁功能表格控制元件Flutter控制元件
- CSS 兩欄佈局和三欄佈局CSS
- 常用兩欄佈局和三欄佈局
- 超 Nice 的表格響應式佈局小技巧
- Android UI控制元件系列:TableLayout(表格佈局)AndroidUI控制元件
- 使用MASA Blazor開發一個標準的查詢表格頁Blazor
- JSP頁面動態生成表格併為表格新增事件JS事件
- 解決:layUI資料表格+簡單查詢UI
- 居中佈局、三欄佈局
- Poi向Word插入表格,設定表格邊框和表格居中
- Vue + Element UI + Lumen 實現通用表格功能 - 分頁VueUI
- easyui-table表格客戶端分頁例項UI客戶端
- CSS佈局之三欄佈局CSS
- HTML表格HTML
- vue頁面表格元件高度控制Vue元件
- 如何在 SAP Fiori Elements List Report 表格工具欄裡增添新的自定義按鈕
- CSS:兩欄佈局CSS
- 中後臺專案 - 查詢表格業務最佳實踐
- CSS-常見兩欄、三欄佈局(雙飛翼佈局、聖盃佈局)CSS
- element-UI庫Table表格匯出Excel表格UIExcel
- JavaScript動態建立表格和增加表格的行JavaScript
- CSS display屬性的表格佈局相關屬性的解釋CSS
- 表格式佈局讓每個列高度等於該行最大高度
- excel查詢快捷鍵是什麼 excel表格怎麼快速查詢Excel
- WPS表格中自適應成績查詢系統
- 用WPS表格打造方便查詢的成績分析表