ngHandsontable

ngHandsontable -AngularJS可提琴的指令

启用在AngularJs中创建数据网格应用程序。

演示

请参阅http://handsontable.gi**t*hub.io/nghandsontable的演示。

用法

包括库文件：

 < link rel =\" stylesheet \" media =\" screen \" href =\" bower_components/handsontable/dist/handsontable.full.css \" >
< script src =\" bower_components/angular/angular.js \" > </ script >
< script src =\" bower_components/handsontable/dist/handsontable.full.js \" > </ script >
< script src =\" dist/ ngHandsontable .js \" > </ script >

包括您的应用程序的组件：

 angular . module ( \'my-app\' , [ \' ngHandsontable \' ] ) ;

模板：

 < hot-table settings =\" {colHeaders: colHeaders, contextMenu: [\'row_above\', \'row_below\', \'remove_row\'], afterChange: afterChange} \"
           row-headers =\" false \"
           min-spare-rows =\" minSpareRows \"
           datarows =\" db.items \"
           height =\" 300 \"
           width =\" 700 \" >
    < hot-column data =\" id \" title =\" \'ID\' \" > </ hot-column >
    < hot-column data =\" name.first \" title =\" \'First Name\' \" type =\" grayedOut \" read-only > </ hot-column >
    < hot-column data =\" name.last \" title =\" \'Last Name\' \" type =\" grayedOut \" read-only > </ hot-column >
    < hot-column data =\" address \" title =\" \'Address\' \" width =\" 150 \" > </ hot-column >
    < hot-column data =\" product.description \" title =\" \'Favorite food\' \" type =\" \'autocomplete\' \" >
        < hot-autocomplete datarows =\" description in product.options \" > </ hot-autocomplete >
    </ hot-column >
    < hot-column data =\" price \" title =\" \'Price\' \" type =\" \'numeric\' \" width =\" 80 \" format =\" \'$ 0,0.00\' \" > </ hot-column >
    < hot-column data =\" isActive \" title =\" \'Is active\' \" type =\" \'checkbox\' \" width =\" 65 \" checked-template =\" \'Yes\' \" unchecked-template =\" \'No\' \" > </ hot-column >
</ hot-table >

控制器：

 $scope . db . items = [
  {
    \"id\" : 1 ,
    \"name\" : {
      \"first\" : \"John\" ,
      \"last\" : \"Schmidt\"
    } ,
    \"address\" : \"45024 France\" ,
    \"price\" : 760.41 ,
    \"isActive\" : \"Yes\" ,
    \"product\" : {
      \"description\" : \"Fried Potatoes\" ,
      \"options\" : [
        {
          \"description\" : \"Fried Potatoes\" ,
          \"image\" : \"//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png\"
        } ,
        {
          \"description\" : \"Fried Onions\" ,
          \"image\" : \"//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png\"
        }
      ]
    }
  } ,
  //more items go here
] ; 

指令和属性规范

创建表的主要指令是<hot-table> 。对于定义列选项，您可以将设置对象与列属性一起使用。如果您想以声明性的方式描述列行为，则可以将<hot-column>指令添加为<hot-table>元素的孩子，并添加所有必要属性以描述列选项。

这里列出的所有可提琴选项都应得到支持。骆驼模式下的选项应传递给连字符模式的指令eq autoWrapCol: true > <hot-table auto-wrap-col> 。

建议将所有设置放在一个大对象（ settings=\"ctrl.settings\" ）中。与任何其他属性不同，设置属性却没有观察到，因此使用此属性有助于实现更高的性能。

执照

麻省理工学院许可证（有关全文请参阅许可证文件）