㈠ Web前端怎樣實現像excel那樣的按列拖選的表格
Web前端實現像excel那樣的按列拖選表格的方法：
1.通過flash，flex實現FLEX 功能強大的datagrid
2.通過jquery插件，js實現
JS實現可編輯的表格，雙擊可編輯，可以刪除行和列，增加行和列，重置，導出表格，也可以上下移動元素
Flexigrid – Web 2.0 Javscript Grid for jQuery - 可變列寬，自動適應表頭寬度，可通過 Ajax 連接 XML 數據源，類似 Ext Grid，但基於 jQuery 因此更輕量小巧。
㈡ 做一個web前端的排版，靜態的，看著比較復雜，請問大家有沒有什麼簡單方法。寫代碼的.謝謝啦
最簡單的辦法就是用表格製作這樣的頁面。
如果只是這種排版的話，利用浮動並調整好寬高問題，這種樣子也不難
㈢ 前端，哪位大神知道這種布局的表格代碼怎麼寫
好了，至於樣式您再調一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
ul li{list-style: none;}
div{width: 600px;float: left;border: 1px solid #000000;text-align: center;}
div ul li{border-bottom: 1px solid #000000;}
div ul li:last-child ul li:last-child{border-bottom: 0px;}
div ul li ul li{margin-bottom: 0px;width: 100%;float: left;}
div ul li ul li span{width: 33.3%;float: left;border-right: 1px solid #000000;box-sizing: border-box;}
div ul li ul li span:last-child{border-right: 0px;}
</style>
</head>
<body>
<div>
<ul>
<li>
<h1>大標題1</h1>
<ul>
<li>
<span>溫度</span>
<span>濕度</span>
<span>熱量</span>
</li>
<li>
<span>10</span>
<span>20</span>
<span>30</span>
</li>
</ul>
</li>
<li>
<h1>大標題2</h1>
<ul>
<li>
<span>溫度</span>
<span>濕度</span>
<span>熱量</span>
</li>
<li>
<span>10</span>
<span>20</span>
<span>30</span>
</li>
</ul>
</li>
<li>
<h1>大標題3</h1>
<ul>
<li>
<span>溫度</span>
<span>濕度</span>
<span>熱量</span>
</li>
<li>
<span>10</span>
<span>20</span>
<span>30</span>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
㈣ 前端的表格控制項怎麼根據後端代碼來控制數量
首先要明確一下是控製表頭數量還是表格內容數量。
1.表頭數量的話，要獲取到表頭的所有項，不要用html標簽寫表格，而是用js循環創建表頭及表格。
2.表格內容的話，可以先用html的相關標簽固定好表頭，獲取到數據，然後循環數據，取到滿意的數量在繪制到表格中。比如想要10條，for(var i=0;i＜10;i++)這樣。
㈤ web前端大手子來，課程表怎麼做
課程表按星期或日期寫入到資料庫中，讀取的時候點擊某個日期得到星期幾具體日期，用ajax實現數據查詢，顯示
㈥ jq怎麼在前端做表格的篩選功能
簡單做了一個，看看是不是你要的效果：
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="Generator"content="EditPlus®">
<metaname="Author"content="">
<metaname="Keywords"content="">
<metaname="Description"content="">
<title>Document</title>
<linkrel="stylesheet"href="https://saeedalipoor.github.io/icono/icono.min.css">
<scripttype="text/javascript"src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--
<scripttype="text/javascript"src="jquery-3.2.1.js"></script>
-->
<styletype="text/css">
th{
background-color:rgba(3,169,244,0.8);
font-weight:300pt;
color:#fff;
}
th,td{
border:1pxsolid#ccc;
text-align:center;
}
.icon{
display:inline-block;
}
.filter{
text-align:left;
padding:5px10px;
color:rgba(33,150,243,0.8);
font-weight:100pt;width:100px;
display:none;
width:100px;
}
.modal{
display:block;
position:absolute;
overflow:hidden;
outline:0;
-webkit-overflow-scrolling:touch;
background-color:rgb(200,240,160);
filter:alpha(opacity=60);
background-color:rgba(200,240,160,0.45);
z-index:9999;
}
</style>
</head>
<body>
<divclass="lw-we-table"></div>
</body>
</html>
<scripttype="text/javascript">
vardatas=[];
//構造數據
varinitDatas=function(){
for(varidx=0;idx<10;idx++){
datas.push({
type:(idx%3==0?"人類":(idx%3==1?"鳥類":"魚類")),
unit:(idx%3==0?"個":(idx%3==1?"只":"條")),
quantity:((idx+10)-5)*4/2
});
}
};
//載入數據
varloadData=function(records){
vararr=[];
$(records).each(function(idx,item){
arr.push("<tr>");
arr.push("<td>"+item.type+"</td>");
arr.push("<td>"+item.unit+"</td>");
arr.push("<td>"+item.quantity+"</td>");
arr.push("</tr>");
});
$(".lw-we-table").find("tbody").html(arr.join(""));
};
//設置查詢條件
varsetFilter=function(){
$(".filter").addClass("modal");
};
//獲取所有選中的條件
vargetCheckedRecords=function(){
varchks=$(".filter").find("input[type='checkbox']:checked");
vararr=[];
$(chks).each(function(idx,item){
arr.push({
value:$(item).val(),
text:$(item).parent().text().trim()
});
});
returnarr;
};
//載入表格
varloadUI=function(){
vararr=[];
arr.push("<tablestyle='width:100%;border:1pxsolid#ccc;'>");
arr.push("<thead>");
arr.push("<thid='type'>種類<divclass='icon'onclick='setFilter(this);'><iclass='icono-hamburger'></i><div></th>");
arr.push("<thid='unit'>單位</th>");
arr.push("<thid='quantity'>數量</th>");
arr.push("</thead>");
arr.push("<tbody>");
arr.push("</tbody>");
arr.push("</table>");
$(".lw-we-table").html(arr.join(""));
//設置圖標
$(".icon").mouseover(function(){
$(this).find("i").css("color","#009688");
}).mouseleave(function(){
$(this).find("i").css("color","#ddd");
});
//設置條件
varfarr=[];
farr.push("<divclass='filter'>");
farr.push("<span><inputtype='checkbox'value='人類'checked>人類</span><br/>");
farr.push("<span><inputtype='checkbox'value='鳥類'checked>鳥類</span><br/>");
farr.push("<span><inputtype='checkbox'value='魚類'checked>魚類</span><br/>");
farr.push("</div>");
$(".icon").append(farr.join(""));
$(".filter").mouseleave(function(){
$(this).removeClass("modal");
});
//添加事件
$(".filter").find(":checkbox").click(function(){
varfilterDatas=[];
varfilters=getCheckedRecords();
for(varidx=0;idx<datas.length;idx++){
vardata=datas[idx];
for(varfi=0;fi<filters.length;fi++){
varobj=filters[fi];
if(data.type==obj.value){
filterDatas.push(data);
break;
}
}
}
loadData(filterDatas);
});
};
$(function(){
//獲取數據（可以從資料庫或其他地方獲取）
initDatas();
//載入界面UI
loadUI();
//載入數據
loadData(datas);
});
</script>
㈦ 前端、後台對excel表格的處理
這樣的需求需要通過一些專業的類Excel控制項來完成，這些類Excel控制項一般都會有Excel表格展示的功能，在您的系統頁面中嵌入上控制項之後頁面中就會初始化一個Excel表格，之後控制項一般都會將Excel的相關功能全部封裝成對應的API，例如Excel的導入，導出，公式，圖表，形狀，單元格操作等。之後根據需求需要用到哪些調用相應的API就可以完成了。
所以你上面說的讀進用戶的Excel，其實就是導入功能，求和就是公式相關操作的一種，提取列的數據就是正常的單元格操作的其中一種。
如果你是前端導入的話，這里推薦使用SpreadJS,這個是一個純前端的類Excel控制項，可以用JavaScript語言實現上述所有的功能。
㈧ 前端組件「可編輯表格」，怎麼設計才好
第一，view層，需要分層設計；
第二，model層，需要讓數據來控制view層；
思路的話，可以參考react的生命周期概念:
1，插入dom；
2，獲得新數據，重新渲染dom；
3，刪除dom；
咱們也一樣給這三種狀態各提供二種處理函數，
will是事前調用；
did是事後調用；
還要有公開出來的setget方法
㈨ 前端框架快速做出表格形狀的資料庫外觀， 有哪些，
bootstrap就有很多，或者你用vue寫使用iview的ui框架，其實還有很多ui框架都有你需要的功能
有各種樣式的表格，簡簡潔，美觀
㈩ 前端用echarts實現表格形柱形圖的有哪些
ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性 化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表 盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展 現。模塊化單文件引入(推薦)1新建一個echarts.html文件，為ECharts准備一個具備大小(寬高)的Dom，2新建script標簽引入模塊化單文件echarts.js，3新建script標簽中為模塊載入器配置echarts和所需圖表的路徑(相對路徑為從當前頁面鏈接到echarts.js)，4script標簽內動態載入echarts和所需圖表，回調函數中可以初始化圖表並驅動圖表的生成，5瀏覽器中打開ecarts.html，就可以看到以下效果，：END標簽式單文件引入新建一個echarts.html文件，為ECharts准備一個具備大小(寬高)的Dom，新建script標簽引入echart-all.js，新建script，使用全局變數echarts初始化圖表並驅動圖表的生成，瀏覽器中打開echarts.html，可以看到如下效果，