Ⅰ Web前端怎樣實現像excel那樣的按列拖選的表格
通過flash，flex實現
FLEX 功能強大的datagrid通過jquery插件，js實現
JS實現可編輯的表格，雙擊可編輯，可以刪除行和列，增加行和列，重置，導出表格，也可以上下移動元素
Ⅱ 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 因此更輕量小巧。
Ⅲ js如何實現點擊編輯按鈕，前端table表格行內指定td可修改。（table是動態生成的）
functionready(){varurl=base_path+"console/cfg/getBaseLayers/"+configId;$.ajax({url:url,type:"get",dataType:"json",success:function(result){//生成之前先清空tr,防止AJAX非同步載入重復生成$("#lottr").remove();varlength=result.length;for(vari=0;i<length;i++){varname=result[i].name;//服務名稱varalias=result[i].alias;//服務別名vartype=result[i].type;//服務類型varyear=result[i].year;//年份varurl=result[i].url;//服務地址varvisible=result[i].visible;//是否可見varid=result[i].id;//idserviceIdArray[i]=id;//此處將id塞給serviceIdArray，用於判斷是否添加。varstr="";if(visible==true){//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"checked="true"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="編輯"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}else{//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="編輯"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}var$tr=$(str);$("#lot").append($tr);
}
}
});
}
2）
//修改table行內元素(td)functioneditTd(id){//選中編輯按鈕的時候,把這行指定的幾個td變成文本框varb=$("input[type='button'][id='"+id+"']").parent();//tdvara=b.siblings();//td的兄弟節點if(a[1].children.length===0){a[1].innerHTML="<inputtype='text'value='"+a[1].innerText+"'/>";
}
if(a[2].children.length===0){a[2].innerHTML="<inputtype='text'value='"+a[2].innerText+"'/>";
}
if(a[3].children.length===0){a[3].innerHTML="<inputtype='text'value='"+a[3].innerText+"'/>";
}//將編輯改成保存和取消兩個按鈕b[0].innerHTML="<inputid='"+id+"'type='button'onclick='saveEditTd(this.id);'value='保存'/><inputtype='button'onclick='resertEditTd();'value='取消'/>";
//以下注掉的都是在網上找的參考。/*alert(a[0].getText());var$this=$(this).index();alert($this);*//*$('input[type="button"]').on('click',function(){var$this=$(this).parent().parent();//trready();});*//*var$=function(node){returntypeofnode=="string"?document.getElementById(node):node;}var$1=function(node,parent){varnd=document.createElement(node);if(parent)parent.appendChild(nd);returnnd;}/!**綁定事件流*!/varbind=function(obj,eventName,funcionName){if(obj.addEventListener){obj.addEventListener(eventName,funcionName,false);}elseif(obj.attachEvent){obj.attachEvent("on"+eventName,funcionName);}else{obj["on"+eventName]=funcionName;}};varfulltable=function(tbody,data){varpd=data.data;varcolumn=data.column;for(vari=0,len=data.rows;i<len;i++){vartr=$1("tr",tbody);varcd=pd[i];for(varj=0,jlen=column.length;j<jlen;j++){vartd=$1("td",tr);td.innerHTML=cd[column[j]];//innerText不兼容火狐，可以自己寫innerText和textContent的兼容，這里就直接用innerHTML了}}}varlittlehow_edit_table=function(tbody,ev){this.tbody=$(tbody);this.event=ev?ev:"click";//默認為單機事件this.init=function(data){//data可以是undefinedif(data){fulltable(this.tbody,data);}//調用可編輯this.edit();}this.edit=function(){vartds=this.tbody.getElementsByTagName("td");for(vari=0,len=tds.length;i<len;i++){bind(tds[i],this.event,this.click);}}this.click=function(){//alert(this.children.length);if(this.children.length>0)return;varv=this.innerHTML;this.innerHTML="";varinput=$1("input",this);input.type="text";input.value=v;input.focus();//游標聚集bind(input,"blur",blur);}varblur=function(){varv=this.value;this.parentNode.innerHTML=v;}}window.$$=function(id,ev){returnnewlittlehow_edit_table(id,ev);};*//*$('.editable').handleTable({"handleFirst":true,"cancel":"<spanclass='glyphiconglyphicon-remove'></span>","edit":"<spanclass='glyphiconglyphicon-edit'></span>","add":"<spanclass='glyphiconglyphicon-plus'></span>","save":"<spanclass='glyphiconglyphicon-saved'></span>","confirm":"<spanclass='glyphiconglyphicon-ok'></span>","operatePos":-1,"editableCols":[2,3,4],"order":["add","edit"],"saveCallback":function(data,isSuccess){//這里可以寫ajax內容，用於保存編輯後的內容//data:返回的數據//isSucess:方法，用於保存數據成功後，將可編輯狀態變為不可編輯狀態varflag=true;//ajax請求成功（保存數據成功），才回調isSuccess函數（修改保存狀態為編輯狀態）if(flag){isSuccess();alert(data+"保存成功");}else{alert(data+"保存失敗");}returntrue;},"addCallback":function(data,isSuccess){varflag=true;if(flag){isSuccess();alert(data+"增加成功");}else{alert(data+"增加失敗");}},"delCallback":function(isSuccess){varflag=true;if(flag){isSuccess();alert("刪除成功");}else{alert("刪除失敗");}}});*//*//dom創建文本框varinput=document.createElement("input");input.type="text";//得到當前的單元格varcurrentCell;functioneditCell(event){if(event==null){currentCell=window.event.srcElement;}else{currentCell=event.target;}//根據Dimmacro的建議修定下面的bug非常感謝if(currentCell.tagName=="TD"){//用單元格的值來填充文本框的值input.value=currentCell.innerHTML;//當文本框丟失焦點時調用lastinput.onblur=last;input.ondblclick=last;currentCell.innerHTML="";//把文本框加到當前單元格上.currentCell.appendChild(input);//根據liu_binq63的建議修定下面的bug非常感謝input.focus();}}functionlast(){//充文本框的值給當前單元格currentCell.innerHTML=input.value;}//最後為表格綁定處理方法.document.getElementById("table").ondblclick=editCell;*//*varttr=$(this).val()=="編輯"?"確定":"編輯";$(this).val(ttr);//按鈕被點擊後，在「編輯」和「確定」之間切換$(this).parent().siblings("td").each(function(){//獲取當前行的其他單元格varobj_text=$(this).find("input:text");//判斷單元格下是否有文本框if(!obj_text.length)//如果沒有文本框，則添加文本框使之可以編輯$(this).html("<inputtype='text'value='"+$(this).text()+"'>");else//如果已經存在文本框，則將其顯示為文本框修改的值$(this).html(obj_text.val());});*//*$('input[type="button"]').on('click',function(){var$this=$(this);var$td_arr=$this.parent().html('保存').prevAll('td');$.each($td_arr,function(){var$td=$(this);$td.html('<inputtype="text"value="'+$td.html()+'">');});});*/}
3）
//取消editTd編輯functionresertEditTd(){ready();//此方法是自己寫的，局部刷新頁面，重新載入數據
}
//保存editTd編輯functionsaveEditTd(id){vara=$("input[type='button'][id='"+id+"']").parent().siblings();//td的兄弟節點vartd_name=a[1].children[0].value;//服務名稱vartd_alias=a[2].children[0].value;//服務別名vartd_type=a[3].children[0].value;//服務類型varurl=base_path+"console/cfg/saveEditTd";$.ajax({url:url,type:"post",data:{"td_name":td_name,"td_alias":td_alias,"td_type":td_type,"id":id,"tpl":configId},datatype:"json",success:function(result){ready();//此方法是自己寫的，局部刷新頁面，重新載入數據
}
});
}
Ⅳ 前端組件「可編輯表格」，怎麼設計才好
第一，view層，需要分層設計；
第二，model層，需要讓數據來控制view層；
思路的話，可以參考react的生命周期概念:
1，插入dom；
2，獲得新數據，重新渲染dom；
3，刪除dom；
咱們也一樣給這三種狀態各提供二種處理函數，
will是事前調用；
did是事後調用；
還要有公開出來的setget方法
Ⅳ 前端、後台對excel表格的處理
這樣的需求需要通過一些專業的類Excel控制項來完成，這些類Excel控制項一般都會有Excel表格展示的功能，在您的系統頁面中嵌入上控制項之後頁面中就會初始化一個Excel表格，之後控制項一般都會將Excel的相關功能全部封裝成對應的API，例如Excel的導入，導出，公式，圖表，形狀，單元格操作等。之後根據需求需要用到哪些調用相應的API就可以完成了。
所以你上面說的讀進用戶的Excel，其實就是導入功能，求和就是公式相關操作的一種，提取列的數據就是正常的單元格操作的其中一種。
如果你是前端導入的話，這里推薦使用SpreadJS,這個是一個純前端的類Excel控制項，可以用JavaScript語言實現上述所有的功能。
Ⅵ 如何實現在網頁中在線編輯EXCEL表格,然後保存到伺服器中
我跟你也有類似的需求，想要做一個系統，用戶需要在系統上在線去上傳編輯Excel，頁面上能夠有一個像Excel這樣矩陣的表格可以在系統裡面填報編輯，最後還需要將用戶編輯的內容收錄到資料庫中進行存儲。在網頁搜索搜到了這個問題，也看了下面的回答，雖然都是些商業的推廣，但我也認真的看了，這里做一個客觀的總結，也可以給後面跟我有類似問題的用戶一個參考：
Zoho Docs：
知道上面一搜全是他們的回答， 但是網路上根本找不到官方網站，網路經驗里我看到了一張圖片，裡面的官方網站跟上面能夠搜索到的都不一致（從一個客戶角度首先對於這樣網站上都搜不到官網的產品我是充滿了不信任的），之後好不容易找到了官網，然後試用了產品，發現其所說的嵌入網頁只是一個iframe的地址
這個看上去跟Excel外觀一模一樣，而且據他們客服說這個可以直接嵌入到系統並且還能在上面做二次開發，只要能將上面的表格嵌入到我的系統頁面中就已經滿足我的需求了，接下來我准備再測試評估一下功能與性能。
PS：
3樓的回答為什麼不能詳盡一些呢，明明3樓才是題主或者跟題主有著同樣問題的解決方案，但是3樓說的這么少，就不能像1樓那樣多說一些嗎？