1 | # 数据模型
|
2 |
|
3 | 数据模型(dataTabe)作为MVVM架构中Model层的增强。主要功能有:
|
4 |
|
5 | + 以行、列的形式,通过json对象对数据做存储,并对外暴露一批增删改查的API,方便开发者对页面数据的处理,而且所有开发者之间做到统一,减少出错概率。
|
6 | + 数据增加状态标识新增或修改,方便开发者使用。
|
7 | + 具有分页缓存能力,可在前端处理分页(非必要情况下,不推荐前端分页)。
|
8 | + 提供事件监听u.on(element, eventName,child,listener),把数据变化触发出去,供开发者监听使用。
|
9 |
|
10 |
|
11 | ## 模型定义
|
12 |
|
13 | 模型定义方法:
|
14 |
|
15 | var myDataTable = new u.DataTable({
|
16 | meta:{
|
17 | field1:{type:date},
|
18 | field2:{}
|
19 | }
|
20 | })
|
21 |
|
22 |
|
23 | meta中是模型的字段信息,字段名对应的对象为字段的属性定义。其中常用字段的属性定义的有type、以及一些校验属性(详情参考[这里](validateapi.html))、default(设置字段的默认值)以及不同控件的属性设置等。没有字段属性时,可以为空对象。
|
24 |
|
25 | * 下面是常用的type类型。
|
26 | + string:字符串
|
27 | + integer:整型
|
28 | + float:浮点型
|
29 | + date: 日期类型(YY-MM-DD)
|
30 | + datetime:日期时间类型(YY-MM-DD hh:mm:ss)
|
31 |
|
32 | * default可以对应函数(返回具体的默认值),也可以是具体的对象。
|
33 |
|
34 | + 对应函数的写法。
|
35 |
|
36 | ```
|
37 | meta: {
|
38 | f1: {
|
39 | default: function() {
|
40 | return '02-01';//'02-01'为返回的默认值
|
41 | }
|
42 | }
|
43 | }
|
44 | ```
|
45 |
|
46 | + 对应对象的写法。default:function(){return 'aa'}。
|
47 |
|
48 | ```
|
49 | meta: {
|
50 | f1: {
|
51 | default: {
|
52 | value: '02-01'//value对应具体的默认值
|
53 | }
|
54 | }
|
55 | }
|
56 | ```
|
57 | * 控件的属性设置
|
58 |
|
59 | (1)integerAdapter (整数)
|
60 |
|
61 | |属性名称| 属性值类型|具体描述|
|
62 | | ------- | :-------: | ------: |
|
63 | |max|integer|输入的值小于等于max|
|
64 | |min|integer|输入的值大于等于min|
|
65 | |maxNotEq|integer|输入的值小于max|
|
66 | |minNotEq|integer|输入的值大于min|
|
67 |
|
68 | (2) stringAdapter (字符串)
|
69 |
|
70 | |属性名称| 属性值类型|具体描述|
|
71 | |-------|:-------:|------:|
|
72 | |minLength|integer|输入的字符串长度大于等于minLength|
|
73 | |maxLength|integer|输入的字符串长度小于等于maxLength|
|
74 |
|
75 | (3) floatAdapter(浮点数)
|
76 |
|
77 | |属性名称| 属性值类型|具体描述|默认值|
|
78 | |-------|:-------:|:------:|------|
|
79 | |precision|integer|浮点数的精度|2|
|
80 | |max|integer|输入的值小于等于max| |
|
81 | |min|integer|输入的值大于等于min| |
|
82 | |maxNotEq|integer|输入的值小于max| |
|
83 | |minNotEq|integer|输入的值大于min| |
|
84 |
|
85 | (4)currencyAdapter(货币)
|
86 |
|
87 | |属性名称| 属性值类型|具体描述|默认值|
|
88 | |-------|:-------:|:------:|------|
|
89 | |precision|integer|浮点数的精度|2|
|
90 | |max|integer|输入的值小于等于max||
|
91 | |min|integer|输入的值大于等于min||
|
92 | |maxNotEq|integer|输入的值小于max||
|
93 | |minNotEq|integer|输入的值大于min||
|
94 | |curSymbol|String|货币符号|¥|
|
95 |
|
96 | (5) percentAdapter(百分比)
|
97 |
|
98 | |属性名称| 属性值类型|具体描述|默认值|
|
99 | |-------|:-------:|:------:|------|
|
100 | |precision|integer|浮点数的精度|2|
|
101 |
|
102 |
|
103 |
|
104 |
|
105 | 字段的属性值在控件模型中被使用到,主要用于控制表单输入、字段显示格式等业务特性。
|
106 |
|
107 |
|
108 |
|
109 | ## 数据载入到模型中
|
110 |
|
111 | 模型定义好之后,可以通过`dataTable.setSimpleData`方法把从后台查询到的json数据载入模型之中:
|
112 |
|
113 | dataTable.setSimpleData([
|
114 | {"id": "001","name": "tom"},
|
115 | {"id": "002","name": "john"}
|
116 | ])
|
117 |
|
118 | 数据载入到模型中之后,数据被存储在一组`Row`对象之中,json数组中的每一个对象,对应dataTable中的`Row`对象中。
|
119 |
|
120 |
|
121 | ## 数据的新增与修改
|
122 |
|
123 | ### 新增数据行并赋值
|
124 |
|
125 | var row = dataTable.createEmptyRow();
|
126 | row.setValue('id','003')
|
127 |
|
128 | 新增的数据在dataTable中表现为新增一个`Row`对象。调用`setValue`对其中字段赋值。
|
129 |
|
130 | ### 修改已存在的行中数据
|
131 |
|
132 | var row = dataTable.getRow(index);
|
133 | row.setValue('name','jerry');
|
134 |
|
135 |
|
136 | ## 数据的删除
|
137 |
|
138 | ### 删除某一行数据
|
139 |
|
140 | dataTable.removeRow(index);
|
141 |
|
142 | ### 删除所有行数据
|
143 |
|
144 | dataTable.removeAllRows();
|
145 |
|
146 |
|
147 | ## 获取模型中的数据
|
148 |
|
149 | ### 获取所有数据
|
150 |
|
151 | var json = dataTable.getSimpleData();
|
152 |
|
153 | 获取到的json数据格式,与载入时的数据格式一致。一般是在提交数据时,调用此方法,获取数据后提交给后端。
|
154 | 在调用`getSimpleData`方法时可传递参数`type`来决定获取的数据类型。
|
155 |
|
156 | var json = dataTable.getSimpleData({type:'select'});
|
157 |
|
158 | type可设置为:
|
159 |
|
160 | + select: 处理选中状态的行数据
|
161 | + focus: 焦点状态的行数据
|
162 | + change: 发生改变的行数据
|
163 |
|
164 | 默认不传递参数则获取所有的数据。
|
165 |
|
166 | ### 获取某一行的数据
|
167 |
|
168 | var row = dataTable.getRow(index);
|
169 | var json = row.getSimpleData();
|
170 |
|
171 | ### 获取某一行中某个字段的值
|
172 |
|
173 | var row = dataTable.getRow(index);
|
174 | var value = row.getValue('name');
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|