component表格js,component table

本文目錄一覽：

• 1、Reactjs component 中 prop 和 state 的區別
• 2、怎麼使用js清楚datatables表格
• 3、利用javascript,做一個動態表格
• 4、怎麼理解vuejs的component的復用
• 5、JS有哪些框架
• 6、angularjs component和directive的區別

Reactjs component 中 prop 和 state 的區別

props和state都是用於描述component狀態的，並且這個狀態應該是與顯示相關的。

State

如果component的某些狀態需要被改變，並且會影響到component的render，那麼這些狀態就應該用state表示。

例如：一個購物車的component，會根據用戶在購物車中添加的產品和產品數量，顯示不同的價格，那麼「總價」這個狀態，就應該用state表示。

Props

如果component的某些狀態由外部所決定，並且會影響到component的render，那麼這些狀態就應該用props表示。

例如：一個下拉菜單的component，有哪些菜單項，是由這個component的使用者和使用場景決定的，那麼「菜單項」這個狀態，就應該用props表示，並且由外部傳入。

怎麼使用js清楚datatables表格

兩種方法

1,dataTable.Clear();

2,dataTable.Rows.Clear();

1，dataTable.Clear()和dataTable.Rows.Clear() 都是刪除全部的表數據，但不會刪除表結構（列信息 ），使用時不必做區分，任選其一都可以。

2，DataTable.Reset方法。將全部數據和表結構（列信息）都刪除。

3，用DataRow.Delete()方法刪除行後，DataTable的行數不會變，在foreach語句中仍然可以遍歷到刪除的行，但是不能訪問行中的值， 會報System.Data.DeletedRowInaccessibleException的異常。

4，DataTable.GetChanges() 方法也可以取到刪除後的行，但是也不能訪問行中的值，會報異常。

5，DataTable沒有顯示實現IDisposable介面，對dataTable.Dispose() 的調用實際上是調用的DataTable的一個父類MarshalByValueComponent的 Dispose() 方法，由於這個原因，Dispose() 方法不會清除DataTable的行數據。因此，如果要完全銷毀一個DataTable，可以這樣寫代碼：

1 dataTable.Clear();

2 dataTable.Dispose();

3 dataTable = null;

利用javascript,做一個動態表格

添加行和列的我做過，改變行列高寬的我沒有做，但是你的要求是可行的，是能夠做的，只是我一般會避免做這樣的代碼，太麻煩了，簡直是折磨人。

用什麼做才不累呢，我推薦用EXCEL來做：在EXCEL裡面做好基本表樣以後，選擇保存為網頁，裡面的代碼可以拷貝到你的網頁上運行，比如下面的代碼可以存為一個html文件，你用瀏覽器打開試試看效果：

P

OBJECT id=Book1_538_Spreadsheet classid=CLSID:0002E559-0000-0000-C000-000000000046PARAM NAME=”DataType” VALUE=”XMLDATA”PARAM NAME=”XMLData” VALUE=’?xml version=”1.0″?

?mso-application progid=”Excel.Sheet”?ss:Workbook

xmlns:o=”urn:schemas-microsoft-com:office:office”

xmlns:x=”urn:schemas-microsoft-com:office:excel”

xmlns:ss=”urn:schemas-microsoft-com:office:spreadsheet”

xmlns:c=”urn:schemas-microsoft-com:office:component:spreadsheet”

xmlns:html=””

x:ExcelWorkbook

x:ProtectStructureFalse/x:ProtectStructure

x:ActiveSheet0/x:ActiveSheet

/x:ExcelWorkbook

ss:Styles

ss:Style ss:ID=”Default”

ss:Alignment ss:Horizontal=”Automatic” ss:Rotate=”0.0″ ss:Vertical=”Center”

ss:ReadingOrder=”Context”/

ss:Borders

/ss:Borders

ss:Font ss:FontName=”宋體” ss:Size=”12″ ss:Color=”Automatic” ss:Bold=”0″

ss:Italic=”0″ ss:Underline=”None”/

ss:Interior ss:Color=”Automatic” ss:Pattern=”None”/

ss:NumberFormat ss:Format=”General”/

ss:Protection ss:Protected=”1″/

/ss:Style

/ss:Styles

c:ComponentOptions

c:Label

c:CaptionMicrosoft Office 電子表格/c:Caption

/c:Label

c:SpreadsheetAutoFit/

c:MaxHeight80%/c:MaxHeight

c:MaxWidth80%/c:MaxWidth

c:NextSheetNumber1/c:NextSheetNumber

/c:ComponentOptions

x:WorkbookOptions

c:OWCVersion11.0.0.6555 /c:OWCVersion

x:Height7620/x:Height

x:Width15240/x:Width

/x:WorkbookOptions

ss:Worksheet ss:Name=”Sheet1″

x:WorksheetOptions

x:Selected/

x:ViewableRangeR1:R262144/x:ViewableRange

x:SelectionR1C1/x:Selection

x:TopRowVisible0/x:TopRowVisible

x:LeftColumnVisible0/x:LeftColumnVisible

x:ProtectContentsFalse/x:ProtectContents

x:Unsynced/

/x:WorksheetOptions

c:WorksheetOptions

/c:WorksheetOptions

ss:Table ss:DefaultColumnWidth=”54.0″ ss:DefaultRowHeight=”14.25″

/ss:Table

x:PublishObjects

x:PublishObject

x:Id538/x:Id

x:DivIDBook1_538/x:DivID

x:SourceTypeSourceSheet/x:SourceType

x:HtmlTypeHtmlCalc/x:HtmlType

x:Location x:HRef=”D:#9;emp文件Book1.htm”/

/x:PublishObject

/x:PublishObjects

/ss:Worksheet

o:DocumentProperties

o:Author橋/o:Author

o:Created2007-08-20T09:12:19Z/o:Created

o:Companychinalife/o:Company

o:Version11.6568/o:Version

/o:DocumentProperties

/ss:Workbook

‘PARAM NAME=”AllowPropertyToolbox” VALUE=”-1″PARAM NAME=”AutoFit” VALUE=”-1″PARAM NAME=”Calculation” VALUE=”-4105″PARAM NAME=”Caption” VALUE=”Microsoft Office 電子表格”PARAM NAME=”DisplayColumnHeadings” VALUE=”-1″PARAM NAME=”DisplayGridlines” VALUE=”-1″PARAM NAME=”DisplayHorizontalScrollBar” VALUE=”-1″PARAM NAME=”DisplayOfficeLogo” VALUE=”-1″PARAM NAME=”DisplayPropertyToolbox” VALUE=”0″PARAM NAME=”DisplayRowHeadings” VALUE=”-1″PARAM NAME=”DisplayTitleBar” VALUE=”0″PARAM NAME=”DisplayToolbar” VALUE=”-1″PARAM NAME=”DisplayVerticalScrollBar” VALUE=”-1″PARAM NAME=”DisplayWorkbookTabs” VALUE=”-1″PARAM NAME=”EnableEvents” VALUE=”-1″PARAM NAME=”MaxHeight” VALUE=”80%”PARAM NAME=”MaxWidth” VALUE=”80%”PARAM NAME=”MoveAfterReturn” VALUE=”-1″PARAM NAME=”MoveAfterReturnDirection” VALUE=”-4121″PARAM NAME=”RightToLeft” VALUE=”0″PARAM NAME=”ScreenUpdating” VALUE=”-1″PARAM NAME=”LockedDown” VALUE=”0″PARAM NAME=”ConnectedToChart” VALUE=”0″PARAM NAME=”DefaultQueryOnLoad” VALUE=”-1″PARAM NAME=”EnableUndo” VALUE=”-1″

p style=’margin-top:100;font-family:宋體;font-size:8.0pt’要互動式地使用此網頁，您必須有 Microsoftreg Internet Explorer 5.01 Service Pack 1 (SP2) 或更新版本，以及 Microsoft Office 2003 Web Components。/pp style=’margin-top:100;font-family:宋體;font-size:8.0pt’請訪問 a href=”;p1=Excel”Microsoft Office 網站/a 以獲取更多信息。/p/OBJECT/P

怎麼理解vuejs的component的復用

什麼是組件？組件（Component）是 Vue/guide/componentsponent(“widget”, { template: “button @click=’dosomething’slot/slot這是一個復用的組件，點擊他{{theValue}}/button”, methods: { dosomething: function () { this/guide/componentsponent(“myTemplate”, { //ponent自帶name屬性。大概樣子是這樣的，div id=”app” my-template/my-template /div script Vueponent(“myTemplate”, { template: ‘ulli{{b}}/limy-template v-if=”a” :a=”aponent(“myTemplate”, { template: ‘div1/div’ + ‘div2/div’, }) 非片斷實例：Vue/guide/components/guide/components.html#u5185_u8054_u6A21_u677F以上所述是小編給大家介紹的Vuejs第十三篇之組件——雜項，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

JS有哪些框架

目前來看，JS框架以及一些開發包和庫類有如下幾個，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx

Dojo （JS library and UI component ）：

Dojo是目前最為強大的j s框架，它在自己的Wiki上給自己下了一個定義，dojo是一個用JavaScript編寫的開源的DHTML工具箱。dojo很想做一個「大一統」的 工具箱，不僅僅是瀏覽器層面的，野心還是很大的。Dojo包括ajax, browser, event, widget等跨瀏覽器API，包括了JS本身的語言擴展，以及各個方面的工具類庫，和比較完善的UI組件庫，也被廣泛 應用在很多項目中，他的UI組件的特點是通過給html標籤增加tag的方式進行擴展，而不是通過寫JS來生成，dojo的API模仿Java類庫的組織 方式。 用dojo寫Web OS可謂非常方便。dojo現在已經4.0了，dojo強大的地方在於界面和特效的封裝，可以讓開發者快速構建一些兼容標準的界面。

優點：庫相當完善，發展時間也比較長，功能強大，據說利用dojo的io.bind()可以實現comet，看見其功能強大非一般，得到IBM和SUN的支持

缺點：文件體積比較大，200多KB，初次下載相當慢，此外，dojo的類庫使用顯得不是那麼易用，j s語法增強方面不如prototype。

Prototype （JS OO library）：

是一個非常優雅的JS庫，定義了JS的面向對象擴展，DOM操作API，事件等等，以prototype為核心，形成了一個外圍的各種各樣 的JS擴展庫，是相當有前途的JS底層框架，值得推薦，感覺也是現實中應用最廣的庫類（RoR集成的AJAX JS庫），之上還有 Scriptaculous 實現一些JS組件功能和效果。

優點：基本底層，易學易用，甚至是其他一些js特效開發包的底層，體積算是最小的了。

缺點：如果說缺點，可能就是功能是他的弱項

Scriptaculous （JS UI component based on prototype）：

Scriptaculous是基於prototype.js框架的JS效果。包含了6個js文件，不同的文件對應不同的js效果，所以說，如果底層用 prototype的話，做js效果用Scriptaculous那是再合適不過的了，連大名鼎鼎的digg都在用他，可見不一般

優點：基於prototype是最大的優點，由於使用prototype的廣泛性，無疑對用戶書錦上添花，並且在《ajax in action》中就拿Scriptaculous來講述js效果

缺點：剛剛興起，需要時間的磨練

yui-ext (JS UI component)：

基於Yahoo UI的擴展包yui-ext是具有CS風格的Web用戶界面組件 能實現複雜的Layout布局，界面效果可以和backbase媲美，而且使用純javascript代碼開發。真正的可編輯的表格Edit Grid，支持XML和Json數據類型，直接可以遷入grid。許多組件實現了對數據源的支持，例如動態的布局，可編輯的表格控制項，動態載入的Tree 控制項、動態拖拽效果等等。1.0 beta版開始同Jquery合作，推出基於jQuery的Ext 1.0，提供了更多有趣的功能。

優點：結構化，類似於java的結構，清晰明了，底層用到了Jquery的一些函數，使整合使用有了選擇，最重要的一點是界面太讓讓人震撼了。

缺點：太過複雜，整個界面的構造過於複雜。

Jquery ：

jQuery是一款同prototype一樣優秀js開發庫類，特別是對css和XPath的支持，使我們寫js變得更加方便！如果你不是個js高手又想寫出優 秀的js效果，jQuery可以幫你達到目的！並且簡介的語法和高的效率一直是jQuery追求的目標，

優點：注重簡介和高效，js效果有yui-ext的選擇，因為yui-ext 重用了很多jQuery的函數

缺點：據說太嫩，歷史不悠久。

Mochikit ：

MochiKit自稱為一個輕量級的js框架。MochiKit 主要受到 Python 和 Python 標準庫提供的很多便利之處的啟發，另外還緩解了瀏覽器版本之間的不一致性。其中的 MochiKit.DOM 尤其方便，能夠以比原始 JavaScript 更友好的方式處理 DOM 對象。MochiKit.DOM 大部分都是針對 XHTML 文檔定製的，如果與 MochiKit 和 Ajax 結合在一起，使用 XHTML 包裝的微格式尤其方便。Mochikit可以直接對字元串或者數字格式化輸出，比較實用和方便。它還有自己的 js 代碼解釋器

優點：MochiKit.DOM這部分很實用，簡介也是很突出的

缺點：輕量級的缺點

mootools ：

MooTools是一個簡潔，模塊化，面向對象的JavaScript框架。它能夠幫助你更快，更簡單地編寫可擴展和兼容性強的JavaScript代碼。Mootools跟prototypejs相類似，語法幾乎一樣。但它提供的功能要比prototypejs多，而且更強大。比如增加了動畫特效、拖放操作等等。

優點：可以定製自己所需要的功能，可以說是prototypejs的增強版。

缺點：不大不小，具體應用具體分析

moo.fx ：

moo.fx是一個超級輕量級的javascript特效庫（7k）,能夠與prototype.js或mootools框架一起使用。它非常快、易於使用、跨瀏覽器、符合標準，提供控制和修改任何HTML元素的CSS屬性，包括顏色。它內置檢查器能夠防止用戶通過多次或瘋狂點擊來破壞效果。moo.fx整體採用模塊化設計，所以可以在它的基礎上開發你需要的任何特效。

優點：小塊頭有大能耐

缺點：這麼小了，已經不錯了

angularjs component和directive的區別

component是1.5版本之後出現的組件的概念，directive是指令，Component相當於directive+controller+scope，component更適合基於組件的開發模式