1 | # 基础设置
|
2 |
|
3 | 设置基本的校验、格式化、添加事件监听。
|
4 |
|
5 | ## 校验
|
6 |
|
7 |
|
8 | 在创建dataTable时进行校验设置
|
9 |
|
10 | ```
|
11 | /**
|
12 | ## 校验类型说明:
|
13 | * precision: 精度
|
14 | * max: 数字最大值
|
15 | * min: 数字最小值
|
16 | * maxLength: string最大长度
|
17 | * minLength: string最小长度
|
18 | * required: 必填
|
19 | */
|
20 |
|
21 | var dataTable1 = new u.DataTable({
|
22 | meta:{
|
23 | f1:{type:'string',maxLength:8,minLength:3},
|
24 | f2:{type:'float', precision:2,max:500,min:100},
|
25 | f3:{type:'integer', required:true,regExp:/^[0-9]{6}$/},
|
26 | f4:{type:'string',required:true}
|
27 |
|
28 | });
|
29 | ```
|
30 |
|
31 |
|
32 |
|
33 | ---
|
34 |
|
35 | ## 格式化
|
36 |
|
37 | 示例如下:
|
38 |
|
39 | ```
|
40 | var dataTable1 = new u.DataTable({
|
41 | meta:{
|
42 | f1:{type:'date',format:'YYYY-MM-DD'},
|
43 | f2:{type:'date',format:'YYYY/MM/DD'}
|
44 | });
|
45 | ```
|
46 |
|
47 | ---
|
48 |
|
49 |
|
50 | ## 添加事件监听
|
51 |
|
52 | 示例如下:
|
53 |
|
54 | ```
|
55 | //数据改变监听
|
56 | dataTable1.on('valueChange',function(event){
|
57 | var field = event.field,
|
58 | rowId = event.rowId,
|
59 | oldValue = event.oldValue,
|
60 | newValue = event.newValue;
|
61 | });
|
62 | ```
|
63 |
|
64 |
|
65 | 更多设置参见 [u.DataTable](http://tinper.org/dist/kero/docs/udatatable.html)
|
66 |
|
67 | ---
|
68 |
|
69 | ## Example
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 | ## 示例:input输入框
|
78 |
|
79 | 输入长度6-12字符之间
|
80 |
|
81 |
|
82 | <div class="examples-code"><pre><code>
|
83 | <!-- HTML -->
|
84 | <div id="demo1">
|
85 | <input u-meta='{"data":"dt1","field":"f1"}' />
|
86 | </div>
|
87 | </code></pre>
|
88 | </div>
|
89 |
|
90 |
|
91 | <pre class="examples-code"><code>
|
92 | // JS
|
93 | var app,viewModel1;
|
94 | viewModel1 = {
|
95 | dt1: new u.DataTable({
|
96 | meta:{
|
97 | f1:{
|
98 | type:'string',
|
99 | minLength:6,
|
100 | maxLength:12
|
101 | }
|
102 | }
|
103 | })
|
104 | };
|
105 |
|
106 | app = u.createApp({
|
107 | el:'#demo1',
|
108 | model:viewModel1
|
109 | });
|
110 |
|
111 | var r = viewModel1.dt1.createEmptyRow();
|
112 | r.setValue('f1','test txt');
|
113 | </code></pre>
|
114 |
|
115 |
|
116 |
|
117 | ## 示例:时间、日期指定格式
|
118 |
|
119 | 输入指定格式
|
120 |
|
121 |
|
122 | <div class="examples-code"><pre><code>
|
123 | <!-- HTML -->
|
124 | <div id="demo2">
|
125 | <div class='u-datepicker' u-meta='{"id":"date1","type":"u-date","data":"dt2","field":"f2"}'>
|
126 | <input class="u-input" type="text">
|
127 | </div>
|
128 | <div class='u-datepicker' u-meta='{"id":"datetime2","type":"u-date","data":"dt2","field":"f3"}'>
|
129 | <input class="u-input" type="text">
|
130 | <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
|
131 | </span>
|
132 | </div>
|
133 | </div></code></pre>
|
134 | </div>
|
135 |
|
136 |
|
137 | <pre class="examples-code"><code>
|
138 | // JS
|
139 | var app, viewModel2;
|
140 | viewModel2 = {
|
141 | dt2: new u.DataTable({
|
142 | meta: {
|
143 | f2: {
|
144 | type:'date',
|
145 | format:'YYYY-MM-DD'
|
146 | },
|
147 | f3: {
|
148 | type:'date',
|
149 | format:'YYYY/MM/DD'
|
150 | }
|
151 | }
|
152 | })
|
153 | }
|
154 |
|
155 | app = u.createApp({
|
156 | el: '#demo2',
|
157 | model: viewModel2
|
158 | });
|
159 |
|
160 | var r = viewModel2.dt2.createEmptyRow();
|
161 | r.setValue('f2', "2016-6-30 12:13:22");
|
162 | r.setValue('f3', "2016-2-13 4:58:58");
|
163 |
|
164 | </code></pre>
|
165 |
|
166 |
|
167 |
|
168 | ## 示例:input输入框
|
169 |
|
170 | input输入值变化后,弹框提示
|
171 |
|
172 |
|
173 | <div class="examples-code"><pre><code>
|
174 | <!-- HTML -->
|
175 | <div id="demo3">
|
176 | <input u-meta='{"data":"dt3","field":"f1"}' />
|
177 | </div>
|
178 | </code></pre>
|
179 | </div>
|
180 |
|
181 |
|
182 | <pre class="examples-code"><code>
|
183 | // JS
|
184 | var app,viewModel3;
|
185 | viewModel3 = {
|
186 | dt3: new u.DataTable({
|
187 | meta:{
|
188 | f1:{
|
189 | type:'string'
|
190 | }
|
191 | }
|
192 | })
|
193 | };
|
194 |
|
195 | app = u.createApp({
|
196 | el:'#demo3',
|
197 | model:viewModel3
|
198 | });
|
199 |
|
200 | var r = viewModel3.dt3.createEmptyRow();
|
201 | r.setValue('f1','test');
|
202 |
|
203 | // 绑定时间触发
|
204 | viewModel3.dt3.on('valueChange', function(event){
|
205 | var oldValue = event.oldValue;
|
206 | var newValue = event.newValue;
|
207 | alert('dataTable原始值为:' + oldValue +'\n' + 'dataTable现在值为:' + newValue);
|
208 | });
|
209 | </code></pre>
|
210 |
|