點擊下載SpreadJS最新試用版

SpreadJS支持AngularJS。

AngularJS是一個在客戶端使用JavaScript的Web應用程序框架。

使用以下步驟將SpreadJS與AngularJS結合使用。

1. 添加SpreadJS AngularJS模塊js文件“ /scripts/interop/angular.gc.spread.sheets.xxx.js”。
2. 將“ gcspreadsheets”模塊添加到您的應用程序js文件中。例如，如果您的工作范圍由名為“ myApp”的“ ng-app”屬性指示，則將這樣的代碼添加到您的應用定義js文件中:

   angular.module("myApp", ["gcspreadsheets", "module2","module3",...])

3. 將“ gc-spread-sheets”標簽添加到HTML頁面。然后在工作表中添加工作表和列。您可以將屬性設置為spread，sheet或column。例如：

                            <gc-spread-sheets id="ss" style="width:100%;height:500px;border:1px solid gray">
    <worksheets>
        <worksheet frozen-column-count="1">
        </worksheet >
    </worksheets>
</gc-spread-sheets>

                        

Spread，Sheet和Column是標記層次結構的基本元素。其他元素通過設置來起作用。主要標簽層次為：

                    <gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
    <worksheets>
        <worksheet>
            <columns>
                <column></column>
            </columns>
        </worksheet>
    </worksheets>
</gc-spread-sheets>

                

如果元素的設置是簡單類型，或者可以將其設置為簡單字符串，則將其設置為元素的屬性。一個簡單的類型可以是數字，字符串，布爾值，枚舉，字體，lineBorder等，如以下示例所示：

                    <gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
    <worksheets>
        <worksheet>
            <default-style backcolor="#c6e0b4" font="large Meiryo" border="#8ea9db dashed"></default-style>
        </worksheet>
    </worksheets>
</gc-spread-sheets>

                

如果元素的設置是對象類型，并且不能將其設置為簡單字符串，則將其設置為基本元素的子元素。子元素可以具有另一個子元素。例如：

                    <gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
    <worksheets>
        <worksheet>
            <columns>
                <column width="100">
                   <default-style formatter="#,##0.00">
                        <number-validator comparisonoperator="GreaterThan" value1="0"></number-validator>
                   </default-style>                 
                </column>
            </columns>
        </worksheet>
    </worksheets>
</gc-spread-sheets>

                

以下主題列出了元素指令。

• Gc-spread-sheets元素
• 圖紙和圖紙元素
• 列，列和組元素
• 樣式元素
• 單元元素
• 驗證器元素

屬性名稱不區分大小寫，并支持使用“-”分割每個單詞。例如，以下代碼結果是相同的：

<column dataField="country"></column>
<column datafield="country"></column>
<column DATAFIELD="country"></column>
<column data-field="country"></column&gt;
<column Data-Field="country"></column>

該屬性值支持“ {{binding}}”以綁定范圍的數據。例如，這是一列，其寬度綁定到columnWidth：

<column width={{columnWidth}} >

這是一個HTML INPUT元素，它使用ng-model綁定columnWidth。

column Width： &lt;input ng-model="columnWidth"  />

在輸入元素中輸入數字時，列寬會自動調整大小。

如果將傳播指令元素或屬性放置在不遵循該元素指令的另一個元素上，則該元素不會生效。您不能重新排序，插入或刪除html標記上定義的列。這樣做可能會導致綁定值錯誤。

今天的內容就到這了，不要忘了在評論區留下的意見和建議！現電子表格控件SpreadJS正版授權限時優惠！低至3490；企業版最高立減6000元。點擊了解更多優惠！