| 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.yyuap.com/static/uploader/css/webuploader.css">
|
| 8 | <link rel="stylesheet" href="//design.yyuap.com/static/uui/latest/css/font-awesome.css">
|
| 9 | <link rel="stylesheet" type="text/css" href="//design.yyuap.com/static/uui/latest/css/u.css">
|
| 10 | <link rel="stylesheet" type="text/css" href="//design.yyuap.com/static/uui/latest/css/tree.css">
|
| 11 | <link rel="stylesheet" type="text/css" href="//design.yyuap.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.yyuap.com/static/jquery/jquery-1.11.2.js"></script>
|
| 18 | <script src="//design.yyuap.com/static/uploader/js/webuploader.js"></script>
|
| 19 | <script src="//design.yyuap.com/static/knockout/knockout-3.2.0.debug.js"></script>
|
| 20 | <script src="//design.yyuap.com/static/uui/latest/js/u-polyfill.js"></script>
|
| 21 | <script src="//design.yyuap.com/static/uui/latest/js/u.js"></script>
|
| 22 | <script src="//design.yyuap.com/static/uui/latest/js/u-tree.js"></script>
|
| 23 | <script src="//design.yyuap.com/static/uui/latest/js/u-grid.js"></script>
|
| 24 | <script src="//design.yyuap.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>
|