1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="UTF-8">
|
5 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
6 | <title>Title</title>
|
7 | <link rel="stylesheet" href="//design.yonyoucloud.com/static/uploader/css/webuploader.css">
|
8 | <link rel="stylesheet" href="//design.yonyoucloud.com/static/uui/latest/css/font-awesome.css">
|
9 | <link rel="stylesheet" type="text/css" href="//design.yonyoucloud.com/static/uui/latest/css/u.css">
|
10 | <link rel="stylesheet" type="text/css" href="//design.yonyoucloud.com/static/uui/latest/css/tree.css">
|
11 | <link rel="stylesheet" type="text/css" href="//design.yonyoucloud.com/static/uui/latest/css/grid.css">
|
12 | <style id="demo-style" media="screen">
|
13 | </style>
|
14 | </head>
|
15 | <body style="background-color: #eceff1;margin-left: 20px;width: calc(100% - 20px );">
|
16 |
|
17 | <div id="demo_div"></div><script src="//design.yonyoucloud.com/static/jquery/jquery-1.11.2.js"></script>
|
18 | <script src="//design.yonyoucloud.com/static/uploader/js/webuploader.js"></script>
|
19 | <script src="//design.yonyoucloud.com/static/knockout/knockout-3.2.0.debug.js"></script>
|
20 | <script src="//design.yonyoucloud.com/static/uui/latest/js/u-polyfill.js"></script>
|
21 | <script src="//design.yonyoucloud.com/static/uui/latest/js/u.js"></script>
|
22 | <script src="//design.yonyoucloud.com/static/uui/latest/js/u-tree.js"></script>
|
23 | <script src="//design.yonyoucloud.com/static/uui/latest/js/u-grid.js"></script>
|
24 | <script src="//design.yonyoucloud.com/static/requirejs/require.debug.js"></script>
|
25 | <script>
|
26 |
|
27 | var app,viewModel;
|
28 |
|
29 | /**
|
30 | * `viewModel = {...}`创建数据模型
|
31 | * `dt1` 创建名为`dt1`的`u.DataTable`数据集
|
32 | * `f1` 创建名为`f1`的字段,为`dt1`数据集的一个子集
|
33 | */
|
34 | viewModel = {
|
35 | dt1: new u.DataTable({
|
36 | meta:{
|
37 | f1:{
|
38 | type:'string',
|
39 | maxLength:12
|
40 | }
|
41 | }
|
42 | })
|
43 | };
|
44 |
|
45 | /**
|
46 | * `app = u.createApp({...})`,页面初始化,创建框架服务
|
47 | * `el` 指定服务对应的顶层DOM
|
48 | * `setValue`进行赋值操作
|
49 | */
|
50 | app = u.createApp({
|
51 | el:'body',
|
52 | model:viewModel
|
53 | });
|
54 |
|
55 | var r = viewModel.dt1.createEmptyRow();
|
56 | r.setValue('f1','Hello World');
|
57 |
|
58 | /**
|
59 | * getValue 获取字段对应的值
|
60 | */
|
61 | var demoDiv = document.getElementById('demo_div');
|
62 | var dtVal = viewModel.dt1.getValue('f1');
|
63 | demoDiv.innerHTML = dtVal;</script>
|
64 | </body>
|
65 | </html>
|