smart-table/README.md

# Smart Table 组件

**专处理纯静态table固定头列及排序功能**

此组件库常用于服务端处理数据后直接返回HTML渲染，在客户端需要表格的多样化功能。

-- 初衷 --

  方便在服务端直接返回已经渲染好的table数据后，增加table的组件功能（如头固定、左右列固定、排序功能）
  此项目不依赖任何其他库

-- 设计 --

  组件内核借鉴虚拟Dom实现，元素排序移动借鉴React的Diff算法实现，保证元素的可重复使用。增加debounce及throttle保证体验。

-- 优势 --

  - 支持多元化头部
  - 轻量，使用方便
  - 性能高

## 体验
可直接访问https://peng92055.github.io/smart-table

## Usage
- 加载UI库
```html
  <script type="text/javascript" src="./dist/smartTable.[chunkhash].js"></script>
  或者使用七牛云空间的存储
  <script type="text/javascript" src="http://q4uv9bkgj.bkt.clouddn.com/smartTable.26faa588.js"></script>
```
- 输出静态HTML 表格基础属性需在服务端返回前指定<br>
**规则：1、必须指定class为smart-table；2、th或td中必须有一层class为cell的div包裹（后期迭代自动处理掉）**
```html
  <div class="smart-table" id="smartTable">
      <table stripe>
        <thead>
          <tr>
            <th fixed sort>
              <div class="cell">Id</div>
            </th>
            ...
        <tbody>
          <tr>
            <td>
              <div class="cell">DD001</div>
            </th>
            ...
          <tr unsort>
            <td>
              <div class="cell">合计</div>
            </th>
```
- 初始化表格
```javascript
    new SmartTable({
      selector: '#smartTable',
      tableHeight: 300,
      textAlign: 'left',
      size: 'middle'
    })
```

### Table Attributes

| Property          | Tag Position           | Description                                                       | 
| :---------------- | :--------------------- | :---------------------------------------------------------------- |
| stripe            | table                  | 表格是否需要斑马间隔色                                                | 
| fixed             | thead -> tr -> th      | 是否固定该列                                                        |
| sort              | thead -> tr -> th      | 是否对该列有排序功能（默认按照string排序，可指定为sort="number" ）        |
| unsort            | tbody -> tr            | 可指定body中的某一行不参与排序                                        |


### Table Options

| Property              | Type               | Required    | Description                                 | Default       |
| :---------------------| :----------------- | :---------- | :------------------------------------------ | :------------ |
| selector              | string             | yes         | 需要初始化的表格元素                            |               |
| tableHeight           | number or function | no          | 可指定表格的高度                               |               |
| textAlign             | string             | no          | 表格文本的水平排列方式(left、center、right)      | center        |
| size                  | string             | no          | 每一行的垂直高度风格(large、middle、small)      | small        |


## 启动项目
```
npm run serve
```

## build 流程
```
npm run build
```