點(diǎn)擊下載SpreadJS最新試用版

SpreadJS支持AngularJS。

AngularJS是一個(gè)在客戶端使用JavaScript的Web應(yīng)用程序框架。

使用以下步驟將SpreadJS與AngularJS結(jié)合使用。

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

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

3. 將“ gc-spread-sheets”標(biāo)簽添加到HTML頁面。然后在工作表中添加工作表和列。您可以將屬性設(shè)置為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是標(biāo)記層次結(jié)構(gòu)的基本元素。其他元素通過設(shè)置來起作用。主要標(biāo)簽層次為：

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

                

如果元素的設(shè)置是簡(jiǎn)單類型，或者可以將其設(shè)置為簡(jiǎn)單字符串，則將其設(shè)置為元素的屬性。一個(gè)簡(jiǎn)單的類型可以是數(shù)字，字符串，布爾值，枚舉，字體，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>

                

如果元素的設(shè)置是對(duì)象類型，并且不能將其設(shè)置為簡(jiǎn)單字符串，則將其設(shè)置為基本元素的子元素。子元素可以具有另一個(gè)子元素。例如：

                    <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元素
• 圖紙和圖紙?jiān)?
• 列，列和組元素
• 樣式元素
• 單元元素
• 驗(yàn)證器元素

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

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

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

<column width={{columnWidth}} >

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

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

在輸入元素中輸入數(shù)字時(shí)，列寬會(huì)自動(dòng)調(diào)整大小。

如果將傳播指令元素或?qū)傩苑胖迷诓蛔裱撛刂噶畹牧硪粋€(gè)元素上，則該元素不會(huì)生效。您不能重新排序，插入或刪除html標(biāo)記上定義的列。這樣做可能會(huì)導(dǎo)致綁定值錯(cuò)誤。

今天的內(nèi)容就到這了，不要忘了在評(píng)論區(qū)留下的意見和建議！現(xiàn)電子表格控件SpreadJS正版授權(quán)限時(shí)優(yōu)惠！低至3490；企業(yè)版最高立減6000元。點(diǎn)擊了解更多優(yōu)惠！