构建一个基于 Node.js 的表驱动存储容器应用（5）
|
- UID
- 1066743
|
构建一个基于 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';
| };
|
|
|
|
|
|
|
