在Lesktop中使用jQuery控件

云翔在线软件平台提供WebIM，网盘，在线阅读CHM电子书等服务，同时还可以免费建群（不限人数），聊天记录在线存储。

源代码下载 Lesktop讨论组(WebIM) 

 

Lesktop是一款用于开发RIA网站的开源JS界面库，Lesktop提供了一个功能强大的可视化开发工具帮助您快速的开发RIA网站。Lesktop与jQuery并不冲突，在Lesktop中仍然可以使用jQuery以及用jQuery开发的控件。本文以将以DataTables的使用来演示如何在Lesktop中使用jQuery控件。

 

在文章开始之前，请先了解一下DataTables控件：

http://www.datatables.net/

开发步骤：

1.首先必须引用DataTables的Css和JS文件，请在Developer.htm和index.htm中添加一下引用：

<link href="dataTables-1.6/media/css/demo_page.css" rel="stylesheet" type="text/css" />
<link href="dataTables-1.6/media/css/demo_table.css" rel="stylesheet" type="text/css" />
<script src="dataTables-1.6/media/js/jquery.js" type="text/javascript"></script>
<script src="dataTables-1.6/media/js/jquery.dataTables.js" type="text/javascript"></script>

2.打开Developer.htm页面，启动可视化开发工具，为了使用DataTables，我们必须创建一个自定义控件，方法如图所示：

创建后重命名为DataTable，之后您可以在工具箱中看到创建的控件，您可以将它拖拽到其他控件或窗口中：

 

在创建DataTable自定义控件后，将为您生成以下代码：

 

接下来，就是在“DataTable成员变量和方法”那个代码节点上（上图红圈中的）添加代码，这里通常用于添加控件的初始化代码。Lesktop的任何控件都提供了GetDom方法用于获取控件的dom对象，为了演示DataTables控件，先添加一个table元素和一些测试数据，如下所示：

var TestRows =
'<table cellpadding="0" cellspacing="0" border="0" class="display">\r\n'+
'    <thead>\r\n'+
'        <tr>\r\n'+
'            <th>Rendering engine</th>\r\n'+
'            <th>Browser</th>\r\n'+
'            <th>Platform(s)</th>\r\n'+
'            <th>Engine version</th>\r\n'+
'            <th>CSS grade</th>\r\n'+
'        </tr>\r\n'+
'    </thead>\r\n'+
'    <tbody>\r\n'+
'        <tr class="gradeX">\r\n'+
'            <td>Trident</td>\r\n'+
'            <td>Internet Explorer 4.0</td>\r\n'+
'            <td>Win 95+</td>\r\n'+
'            <td class="center">4</td>\r\n'+
'            <td class="center">X</td>\r\n'+
'        </tr>\r\n'+
'        <tr class="gradeU">\r\n'+
'            <td>Other browsers</td>\r\n'+
'            <td>All others</td>\r\n'+
'            <td>-</td>\r\n'+
'            <td class="center">-</td>\r\n'+
'            <td class="center">U</td>\r\n'+
'        </tr>\r\n'+
'    </tbody>\r\n'+
'    <tfoot>\r\n'+
'        <tr>\r\n'+
'            <th>Rendering engine</th>\r\n'+
'            <th>Browser</th>\r\n'+
'            <th>Platform(s)</th>\r\n'+
'            <th>Engine version</th>\r\n'+
'            <th>CSS grade</th>\r\n'+
'        </tr>\r\n'+
'    </tfoot>\r\n'+
'</table>\r\n';

应为DataTables需要通过id获取table的dom对象，因此需要为table元素指定一个id，你可以使用System.GenerateUniqueId函数来生成一个id号（当然，您也可以自己指定，但是得保证全局唯一），代码如下所示：

var tableId = System.GenerateUniqueId();

This.GetDom().innerHTML = TestRows;
This.GetDom().firstChild.id = tableId ;

接下来就只需调用DataTables的方法来生成表格了:

$('#' + tableId ).dataTable();

这样，我们就将一个jQuery控件运用到Lesktop工程中了，效果如下所示：

 

示例代码下载（用.net的可以直接打开Lesktop.Net/Lesktop.sln工程，其他语言的请复制DataTable.lesktop文件中的内容并在开发工具中打开），您也可以打开index.htm查看最终的效果（请不要直接双击打开，先部署网站，再访问）：

在Lesktop中使用jQuery控件演示