电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 构建一个基于 Node.js 的表驱动存储容器应用（5） [打印本页]

作者: look_w 时间: 2018-11-13 19:12 标题: 构建一个基于 Node.js 的表驱动存储容器应用（5）

了解 jtable.jade 的主要部分Jade 是一种 HTML 模板处理语言，用于实时创建 HTML 页面。我使用了基于 jQuery 的 jTable Ajax 代码，并把它放到一个 Jade 模板中。在模板中包含 JavaScript 代码时，要采用纯文本的形式，具体方法是在每行脚本前添加字符 | 作为前缀，并在该字符前安置一定的缩进。Jade 模板文件是 views/jtable.jade。
指向 CSS、jQuery 和 jTable JavaScript 文件的链接jTable 表需要几个 jQuery 脚本、CSS 文件和它自己的 jTable 及 CSS 文件：

1
2
3
4
5
6
7
8
9

link(rel='stylesheet', href='/stylesheets/style.css', type='text/css')
link(href='/javascripts/jquery/jquery-ui-1.11.0/jquery-ui.css', rel='stylesheet', type='text/css')
link(href='/javascripts/jtable.2.4.0/themes/metro/crimson/jtable.css', rel='stylesheet',
type='text/css')
link(href='/javascripts/jtable.2.4.0/themes/jqueryui/jtable_jqueryui.css', rel='stylesheet',
type='text/css')
script(src='/javascripts/jquery/jquery-1.11.1.js', type='text/javascript')
script(src='/javascripts/jquery/jquery-ui-1.11.0/jquery-ui.js', type='text/javascript')
script(src='/javascripts/jtable2.4.0/jquery.jtable.js', type='text/javascript')

CRUD 操作链接以下 JavaScript 代码用于处理 CRUD 操作：

1
2
3
4
5
6
7

|       actions: {
|          listAction: '/itemlist',
|          createAction:'/new_item',
|          updateAction: '/update_item',
|          deleteAction: '/delete_item'
|
|       },

jTable 被链接到 /itemlist、 /new_item、 /update_item 和 /delete_item Node 页面，以便完成特定的 CRUD 操作。
jTable 字段与语义以下代码用于指定特定字段或表列的行为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

|          itemname: {
|             title:'Item Name',
|             key: true,
|             list: true,
|             create:true,
|             edit: false
|          },
|          itemvalue: {
|             title: 'Value',
|             width: '30%',
|             list: true,
|             display: function(data){
|                data.record.rev=data.record._rev;
|                if (data.record.itemvisible==='true'){
|                   return data.record.itemvalue;
|                } else {
|                   return "*********";
|                }
|             },
|             create: true
|          },
|          itemvisible: {
|             title: 'Value is Visible',
|             width: '30%',
|             list: false,
|             create: true,
|             type: 'radiobutton',
|             options: { 'true':'Yes', 'false':'No'},
|             defaultValue: 'false'
|          },
|       itemdatemodified: {
|             title: 'Date Modified',
|             width: '30%',
|             list: true,
|             create: false,
|          edit: false,
|          display: function(data){
|                var date = new Date(data.record.itemdatemodified);
|                return date.getMonth() + 1 + '/' + date.getDate() + '/' +  date.getFullYear();
|          }
|          },

例如，itemname 字段是主键。您可以创建和显示它，但不能编辑它。您还可以创建、显示和编辑 itemvalue 字段。使用 display 函数可以在显示任意列之前对它进行任意转换。
复制和粘贴内容项的值默认情况下，jTable display 函数用于屏蔽表中内容项的值。我提供了一些代码将这类值复制到剪贴板。我使用的技术来自 Trello 应用程序，而且我根据基于 jQuery 的 jTable 的需要进行了改编。该技术是：

只要选中表上的一行，将它的值复制到监控复制操作的代码能够访问的占用区域：
1
| copy(record,document);
为 jTable UI 中的 Key down 和 Key up 注册处理器：
1
2
| registerForKeyDownEvent(document,handleKeyDownEvent);
| registerForKeyUpEvent(document,handleKeyUpEvent);

当用户按下 Ctrl 键时，如果没有选择任何文本区域，则会使用步骤 1 中复制的数据创建一个不可见的文本区域，选择该区域，并把焦点放在上面。下面代码块的最后一行创建了不可见的文本区域：

1
2
3
4
5
6
7
8
9
10
11

| var keyDownEventHandler = function (e) {
|    if (!(e.ctrlKey || e.metaKey)) {
|       return;
|    }
|    if (window.getSelection && window.getSelection() && window.getSelection().toString()) {
|       return;
|    }
|    if (document.selection && document.selection.createRange().text) {
|       return;
|    }
|    setTimeout(SCTextArea, 0);

当用户按下 C 键时，如果目标控制不是目标的文本区域，则会出现典型的复制操作。否则，将容器对文本区域的显示状态设置为不可见。然后，在不可见的文本上将进行典型的操作系统复制操作：

1
2
3
4
5
6
7
8
9
10

| var keyUpEventHandler = function (e) {
|    var code = e.keyCode || e.which;
|    if (e.target.id !== TAId) {
|       return;
|    }
|    if (code!==67){
|       return;
|    }
|    enclosure.style.display = 'none';
| };

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)