1 | <img src="http://tinper.org/assets/images/kero.png" width="120" style="max-width:100%;"/>
|
2 |
|
3 |
|
4 | [![npm version](https://img.shields.io/npm/v/kero.svg)](https://www.npmjs.com/package/kero)
|
5 | [![Build Status](https://img.shields.io/travis/iuap-design/kero/master.svg)](https://travis-ci.org/iuap-design/kero)
|
6 | [![devDependency Status](https://img.shields.io/david/dev/iuap-design/kero.svg)](https://david-dm.org/iuap-design/kero#info=devDependencies)
|
7 | [![NPM downloads](http://img.shields.io/npm/dm/kero.svg?style=flat)](https://npmjs.org/package/kero)
|
8 |
|
9 |
|
10 | [English Document](./README.md)
|
11 | ## 介绍
|
12 | [kero](http://tinper.org/dist/kero/index.html) 是一个前端模型框架,做为`MVVM` 架构中 `Model` 层的增强,提供多维数据模型,解决企业应用中复杂的业务应用场景的开发问题。
|
13 |
|
14 |
|
15 | ## 功能
|
16 |
|
17 |
|
18 | - **丰富的API:** 对外暴露丰富的增删改查API,方便开发者对页面数据的管理
|
19 |
|
20 | - **多维数据模型:** 解决了字段关联、主子数据、主子孙等多维数据模型的绑定问题
|
21 |
|
22 | - **状态标识:** 数据增加状态标识:新增、修改、删除,方便开发者使用
|
23 |
|
24 | - **分页缓存能力:** 具有分页缓存能力,可在前台处理分页,实现跨页操作数据(非必要情况下,不推荐前台分页)
|
25 |
|
26 | - **事件触发器:** 具有事件触发器,增删改查过程中的数据变化通过on方法添加监听,供开发者使用
|
27 |
|
28 | ## 快速上手
|
29 |
|
30 | ### 获取kero
|
31 |
|
32 | - npm资源
|
33 |
|
34 | ```
|
35 | npm install kero
|
36 | ```
|
37 | - cdn 资源
|
38 | ```
|
39 | //design.yonyoucloud.com/static/kero/latest/js/kero.js
|
40 | ```
|
41 |
|
42 | ### 引入kero
|
43 | - ES6语法
|
44 | ```
|
45 | import { Datatable } from "kero"
|
46 |
|
47 | ```
|
48 | - HTML直接引入
|
49 | ```
|
50 | <!-- kero依赖 knockout需要提前引入-->
|
51 | <script src="//design.yonyoucloud.com/static/knockout/knockout-3.2.0.debug.js"></script>
|
52 | <script src="//design.yonyoucloud.com/static/kero/latest/js/kero.js"></script>
|
53 | ```
|
54 |
|
55 | ### 简单示例
|
56 |
|
57 | #### 模型定义
|
58 |
|
59 | 模型定义方法:
|
60 |
|
61 | var myDataTable = new DataTable({
|
62 | meta:{
|
63 | id:{required:true},
|
64 | name:{}
|
65 | }
|
66 | })
|
67 |
|
68 |
|
69 | meta中是模型的字段信息,字段名对应的对象为字段的属性定义。没有字段属性时,可以为空对象。
|
70 |
|
71 | 字段的属性值在控件模型中被使用到,主要用于控制表单输入、字段显示格式等业务特性。
|
72 |
|
73 |
|
74 |
|
75 | #### 数据载入到模型中
|
76 |
|
77 | 模型定义好之后,可以通过`dataTable.setSimpleData`方法把从后台查询到的json数据载入模型之中:
|
78 |
|
79 | myDataTable.setSimpleData([
|
80 | {"id": "001","name": "tom"},
|
81 | {"id": "002","name": "john"}
|
82 | ])
|
83 |
|
84 | 数据载入到模型中之后,数据被存储在一组`Row`对象之中,json数组中的每一个对象,对应dataTable中的`Row`对象中。
|
85 |
|
86 |
|
87 | #### 新增数据行并赋值
|
88 |
|
89 | var row = myDataTable.createEmptyRow();
|
90 | row.setValue('id','003')
|
91 |
|
92 | 新增的数据在dataTable中表现为新增一个`Row`对象。调用`setValue`对其中字段赋值。
|
93 |
|
94 | #### 修改已存在的行中数据
|
95 |
|
96 | var row = myDataTable.getRow(index);//index为行的索引,index为0说明获取的是第一行数据
|
97 | row.setValue('name','jerry');//修改后第一行的对象的name为jerry
|
98 |
|
99 |
|
100 | #### 删除某一行数据
|
101 |
|
102 | myDataTable.removeRow(index);//index为行的索引
|
103 |
|
104 | #### 获取所有数据
|
105 |
|
106 | var json = myDataTable.getSimpleData();
|
107 |
|
108 | #### 添加事件监听
|
109 |
|
110 | 示例如下:
|
111 |
|
112 | ```
|
113 | //数据改变监听
|
114 | myDataTable.on('valueChange',function(event){
|
115 | var field = event.field,
|
116 | rowId = event.rowId,
|
117 | oldValue = event.oldValue,
|
118 | newValue = event.newValue;
|
119 | });
|
120 | ```
|
121 | 开发文档详见[这里](http://tinper.org/dist/kero/docs/overview.html)。
|
122 |
|
123 |
|
124 | ## 如何参与贡献
|
125 |
|
126 | ### 开发及构建
|
127 |
|
128 | 开发者可以一起参与为 kero 贡献代码,同时也可以基于 kero 进行二次开发或封装插件。
|
129 |
|
130 | 克隆项目文件:
|
131 |
|
132 | ```
|
133 | $ git clone git@github.com:iuap-design/kero.git
|
134 | ```
|
135 |
|
136 | 然后进入目录安装依赖:
|
137 |
|
138 | ```
|
139 | $ npm install
|
140 | ```
|
141 |
|
142 | 接下来,执行 `gulp`:
|
143 |
|
144 | ```
|
145 | $ npm run product
|
146 | ```
|
147 |
|
148 |
|
149 | ### 反馈
|
150 | 如在使用过程中遇到任何问题,可以在[这里](https://github.com/iuap-design/kero/issues)提交issue反馈;
|
151 |
|
152 | 或者直接fork代码到你的github仓库,提交pull request给我们。
|
153 |
|
154 |
|
155 | [Bug 反馈及需求提交](CONTRIBUTING.md)
|
156 |
|
157 | ## Licence 版权
|
158 |
|
159 | [MIT](./LICENSE)
|