㈠ 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，可以看到如下效果，