## Grid

#### 表格

对于API文档中的所有属性，考虑实际需要，有些属性没必要实现，本文档若未列出，就代表并未实现

#### xml配置

```xml
 <!--h:为命名空间,必须要加的，grid为组件名;id可写可不写-->
 <h:grid id="grid"/>
```

```xml
<!--grid-->
<h:grid dataSource="dataSource" selectable="multiple, rowbox" editable="true">
    <h:pageable pageSizes="5, 10, 20, 50" buttonCount="5" refresh="true">
    </h:pageable>
    <h:columns>
        <h:column field="moduleCode" title='' width="100"/>
        <h:column field="functionCode" title='' width="180"/>
    </h:columns>
</h:grid>
```

---

对于所有属性，无论是直接属性，还是子标签的属性，都遵循以下原则：  
1.若是简单的属性，就添加到当前标签上，若是对象，就创建子标签，这里的简单属性是指能直接被描述在当前标签上的属性，如字符串，函数，\(函数只是一个引用\)，布尔类型，数字类型等等，对象是指这个属性又包含了子属性，所以我们不得不向下创建子标签才能将其子属性描述出来。  
2.对于String和Function类型，必须用fn：前缀加以区分，  
3.对于数组，有些数组是字符串数组，这种直接当作简单的属性处理，用逗号分隔每个字符串即可，有些数组是list集合数组，这种必须先创建属性子标签，再创建item子标签来描述集合，详情可参考子标签columns

---

### **一般属性 **

> **提示:**
>
> * 属性用法请参考kendoui API文档的grid: [http:\/\/docs.telerik.com\/kendo-ui\/api\/javascript\/ui\/gird](http://docs.telerik.com/kendo-ui/api/javascript/ui/gird)

| 属性名 | 类型 | 描述 |
| :--- | :--- | :--- |
| allowCopy | Boolean | 允许复制 |
| altRowTemplate | String & Function | 呈现交替表行的模板 |
| autoBind | Boolean | 绑定数据源 |
| columnResizeHandleWidth | Integer | 设置列宽度 |
| columnMenu | Boolean | 设置列菜单 |
| dataSource | kendo.data.DataSource\(Function\) | 数据源 |
| detailTemplate | String & Function | 呈现详细的模板 |
| editable | Boolean & String | 设置是否可编辑 |
| groupable | Boolean | 设置分组 |
| height | Integer & String | 设置高度 |
| mobile | Boolean & String | 设置网格 |
| navigatable | Boolean | 导航栏 |
| noRecords | Boolean | 显示类似“没有记录”的标记默认为false |
| pageable | Boolean | 显示网格默认为false |
| reorderable | Boolean | 拖动标题排序默认为false |
| resizable | Boolean | 拖动表格边缘来调大小 |
| rowTemplate | String & Function | 呈现一个行 |
| scrollable | Boolean | 出现滚动条 |
| selectable | Boolean & String | 可以选择默认为false |
| sortable | Boolean | 可以分组 |
| toolbar | String & Function | 表格上面设置按钮 |
| cancel | Function | 取消事件 |
| change | Function | 改变事件 |
| columnHide | Function | 列隐藏函数 |
| columnMenuInit | Function | 列菜单初始化触发事件 |
| columnReorder | Function | 更改列触发事件 |
| columnResize | Function | 可以调整列 |
| columnShow | Function | 展示列 |
| dataBinding | Function | 数据源绑定 |
| dataBound | Function | 数据加载完之后触发 |
| detailCollapse | Function | 折叠表行时触发 |
| detailExpand | Function | 展开表行时触发 |
| detailInit | Function |  |
| edit | Function |  |
| excelExport | Function |  |
| filter | Function |  |
| group | Function |  |
| page | Function |  |
| pdfExport | Function |  |
| filterMenuInit | Function |  |
| remove | Function |  |
| save | Function |  |
| saveChanges | Function |  |
| sort | Function |  |
| columnLock | Function |  |
| columnUnlock | Function |  |
| navigate | Function |  |

用法示例：

```javascript
//注意这是写在script标签里的内容
var dataSource = new kendo.data.DataSource({
    data: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
    ]
});

function edit(){
//...
}

function rowTemplate(){
//...
}
```

```xml
<h:grid id="grid" dataSource="dataSource" resizable= "true" height= "100%" edit ="edit" rowTemplate="fn:rowTemplate"/>
```

> **提示:**
>
> * 上述所有属性直接添加在标签内即可，（**\[\*\***属性名\]**\*\* = "..."**）,对于类型是函数的属性，需要另外在script标签中具体定义函数，这里只是一个引用,对于类型**既是函数又是字符串**类型的属性，一定要加**fn:** 来区分，加fn:的代表这是一个函数，对于**既是字符串又是布尔类型**的属性，照常输入就行了。

#### **子标签**

| 属性名 | 类型 |
| --- | --- |
| allowCopy | Object |
| columns | Array |
| columnMenu | Object |
| editable | Object |
| messages | Object |
| scrollable | Object |
| sortable | Object |
| toolbar | Array |

#### **allowCopy**子标签

| 属性 | 类型 |
| --- | --- |
| delimeter | String & Object |

```xml
<!--delimeter是Object类型-->
<h:grid>
    <h:allowCopy>
         <h:delimeter />
    </h:allowCopy>
</h:grid>

<!--delimeter是String类型-->
<h:grid>
    <h:allowCopy delimeter=",">
    </h:allowCopy>
</h:grid>
```

#### **columns**子标签

| 属性 | 类型 |
| --- | --- |
| attributes | Object |
| command | Object |
| editor | Function |
| encoded | Boolean |
| expandable | Boolean |
| field | String |
| footerTemplate | String & Function |
| format | String |
| headerAttributes | Object |
| headerTemplate | String & Function |
| minScreenWidth | Integer |
| sortable | Object |
| template | String & Function |
| title | String |
| width | Integer & String |
| hidden | Boolean |
| menu | Boolean |
| locked | Boolean |
| lockable | Boolean |
| aggregates | Array |
| columns | Object |
| filterable | Object |
| groupable | Boolean |
| groupHeaderTemplate | String & Function |
| groupFooterTemplate | String & Function |
| values | Array |
| footerAttributes | Object |

#### **columns-filterable**子标签

| 属性 | 类型 |
| --- | --- |
| cell | Object |
| multi | Boolean |
| dataSource | Function |
| checkAll | Boolean |
| itemTemplate | Function |
| operators | Object |
| search | Boolean |
| ignoreCase | Boolean |
| ui | Object |

**attributes**用法:

```xml
  <h:grid>
      <h:columns>
          <h:column>
               <h:attributes "style"="text-align:center"/>
          </h:column>
      </h:columns>
  </h:grid>
```

**command**用法：

```xml
<!--对于数组来说，有两种形式，一种是直接用逗号分隔，放在标签上的,如 aggregates;另一种是创建子标签，再创建item子标签，再将数组内的内容整合到item子标签上，如command，先创建command子标签，再创建item子标签，再将数组中的每一个集合放在item标签上-->
<h:grid>
   <h:columns aggregates="count,min,max">
      <h:column template="fn:template"/>
      <h:column field="functionId" width="30px/>
      <h:column title="列头" locked="true">
          <h:command>
             <h:item name="edit"></h:item>
             <h:item name="destroy"></h:item>
          </h:command>
      </h:column>
   </h:columns>
</h:grid>
```

**editor**用法：

```javascript
function editor(){
//...
}
```

```xml
<h:grid>
    <h:columns>
         <h:column editor="editor">
         </h:column>
    </h:coulmns>
</h:grid>
```

**filterable**用法：

```xml
<!--以filterable举例 遇到对象就向下添加子标签-->
<h:grid>
     <h:columns>
          <h:column>
              <h:filterable>
                   <h:cell dataTextField="name"/>
              </h:filterable>
          </h:column>   
     </h:columns>
</h:grid>
```

**headerAtrributes**用法:

```xml
<h:grid>
    <h:columns>
        <h:column>
             <h:headerAttributes "style"="color:red">
        </h:column>
    </h:columns>
</h:grid>
```

#### **ColumnMenu**子标签

| 属性 | 类型 |
| --- | --- |
| columns | Boolean |
| filterable | Boolean |
| sortable | Boolean |
| messages | Object |

用法:

```xml
<h:grid id="grid">
    <h:columnMenu columns="true" fileterable="false">
        <h:messages columns="choose columns"/>
    </h:columnMenu>
</h:grid >
```

#### **editable**子标签

| 属性 | 类型 |
| --- | --- |
| confirmation | Object |
| cancelDelete | String |
| confirmDelete | String |
| createAt | String |
| destroy | Boolean |
| mode | String |
| template | String & Function |
| update | Boolean |

用法:

```xml
<h:grid id="grid">
    <h:columnMenu columns="true" fileterable="false">
        <h:messages columns="choose columns"/>
    </h:columnMenu>
</h:grid >
```

#### **pageable**子标签

| 属性 | 类型 |
| --- | --- |
| pageSize | Integer |
| previousNext | Boolean |
| numeric | Boolean |
| buttonCount | Integer |
| input | Boolean |
| pageSizes | Boolean & Array |
| refresh | Boolean |
| info | Boolean |
| messages | Object |

用法:

```xml
<!--pageSizes 为array时-->
<h:grid>
   <h:pageable pageSizes="all,5,10,20,50" buttonCount="5" refresh="true">
      <h:messages display="show"/>
   </h:pageable>
</h:grid>
```

#### **messages**子标签

| 属性 | 类型 |
| --- | --- |
| commands | Object |
| noRecords | String |

用法:

```xml
<h:grid>
   <h:messages noRecords="no data">
      <h:commands cancel="cancel"/>
   </h:messages >
</h:grid>
```

#### **noRecords**子标签

| 属性 | 类型 |
| --- | --- |
| template | String & Function |

用法:

```xml
<h:grid>
    <h:noRecords template="no records">
    </h:noRecords>
</h:grid>
```

#### **scrollable**子标签

| 属性 | 类型 |
| --- | --- |
| virtual | Boolean |

用法:

```xml
<h:grid>
    <h:scrollable virtual="true"/>
</h:grid>
```

#### **sortable**子标签

| 属性 | 类型 |
| --- | --- |
| allowUnsort | Boolean |
| mode | String |

用法:

```xml
<h:grid>
   <h:sortable allowUnsort="true" mode="multiple"/>
</h:grid>
```

#### **toolbar**子标签

| 属性 | 类型 |
| --- | --- |
| name | String |
| template | String & Function |
| text | String |

```javascript
function template(){
//...
}
```

```xml
<!--toolbar是数组 所以属性都是针对于数组内的集合来说的-->
<h:grid>
   <h:toolbar>
      <h:item name="create">
            <!--当template为String时，由于xml会对标签的封闭符号敏感，所以可以采取下面的方式-->
            <h:template>
              <![CDATA[<span class=" btn btn-primary k-grid-add">#=text#</span>]]>
            </h:template>
         </h:item>
   </h:toolbar>
</h:grid>
```

> **提示**：
>
> * 遇到**object**类型 就向下添加子标签，当遇到普通类型时，就添加到当前的标签上,就像处理一般属性那样。



