最近在用PHP做一个MySQL数据表生成XML模式的工具,想给它加个GUI,于是想到了YUI,一番鼓捣以后,初步了解了YUI的DataTable到用法。于是把它写下来方便以后查阅。
任务1:从服务器读取数据,然后使用DataTable显示
Mission start!
1.放几个输入框在页面上,以便输入服务器需要的参数。我这里是这样的:
<div id="div_login">
<div id="div_login_host">
<span>Host:</span> <span>
<input type="text" id="input_host" value="127.0.0.1" /></span>
</div>
<div id="div_login_port">
<span>Port:</span> <span>
<input type="text" id="input_port" value="3306" /></span>
</div>
<div id="div_login_user">
<span>UserName:</span> <span>
<input type="text" id="input_username" value="root" /></span>
</div>
<div id="div_login_pwd">
<span>Password:</span> <span>
<input type="password" id="input_password" /></span>
</div>
<div id="div_login_dbName">
<span>Database:</span> <span>
<input type="text" id="input_dbName" value="simplespace" /></span>
</div>
<div id="div_login_submit">
<input type="button" value="Login" οnclick="btnLogin_Click();" />
</div>
</div>
<div id="div_tables">
<div id="div_tableList">
</div>
</div>
2.引入YUI的CSS文件和JS文件
<link rel="stylesheet" type="text/css" href="js/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="js/yui/datatable/assets/skins/sam/datatable.css" />
<script src="js/yui/yahoo/yahoo.js" type="text/javascript"></script>
<script src="js/yui/event/event.js" type="text/javascript"></script>
<script src="js/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
<script src="js/yui/dragdrop/dragdrop.js" type="text/javascript"></script>
<script src="js/yui/element/element-beta.js" type="text/javascript"></script>
<script src="js/yui/connection/connection.js" type="text/javascript"></script>
<script src="js/yui/datasource/datasource.js" type="text/javascript"></script>
<script src="js/yui/datatable/datatable.js" type="text/javascript"></script>
3.开始实现我们的任务,不过先介绍下这次用到的YUI中的几个类。
YAHOO.util.Connect
用来管理HTTP请求,可以通过它发起HTTP请求。
主要方法:asyncRequest
static object asyncRequest ( method , uri , callback , postData )
通过XMLHTTPRequest对象发起异步请求
-
参数表:
-
method <string>
HTTP 传输方法,通常是GET或POST -
uri <string>
要请求的URL -
callback <callback>
服务器返回结果后的回调函数或对象 -
postData <string>
如果HTTP传输方法选择的是POST,这个参数传递POST的数据,通常是p1=v1&p2=v2这样的形式
-
返回值:
- 返回connection对象
object
YAHOO.util.DataSource
这个类向DataTable提供数据咯。主要介绍一下它的构造方法。
Constructor
YAHOO.util.DataSource ( oLiveData , oConfigs )
-
Parameters:
-
oLiveData <HTMLElement> 原始
数据,或原始数据的指针 -
oConfigs <object>
(optional) Object literal of configuration values.
通常这样使用
var myDataSource = new YAHOO.util.DataSource(["foo","bar"]);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
再介绍一下YAHOO.util.DataSource.responseType,有几个常量,它们都在YAHOO.util.DataSource里定义的(实际是YAHOO.util.DataSourceBase,YAHOO.util.DataSource是YAHOO.util.DataSourceBase的子类)
TYPE_UNKNOWN | 未知类型?晕了 |
TYPE_JSARRAY | JS数组 |
TYPE_JSON | JSON类型 |
TYPE_XML | XML类型 |
TYPE_TEXT | 文本类型 |
TYPE_HTMLTABLE | 表示数据来自HTML的table标记 |
现在隆重推出YAHOO.widget.DataTable,还是先介绍一下怎么new吧。
Constructor
YAHOO.widget.DataTable ( elContainer , aColumnDefs , oDataSource , oConfigs )
-
参数表:
-
elContainer <HTMLElement>
Table标记的父容器,也就是说DataTable放在哪儿,对于任务1,这个参数的值应该是 div_tableList -
aColumnDefs <Object[]>
列定义,这个后面要详细讲 -
oDataSource <YAHOO.util.DataSource> 上面提到过的
DataSource. -
oConfigs <object>
(optional) Configure,也就是DataTable的配置.
下面是第二个参数的详解。
我是这样定义这个参数的,
var myColumnDefs = [
{key:sTableListKey,label:"表名", sortable:true, resizeable:true}
];
它实际上是一个数组,每个元素表示一列,即列定义。每一列有如下的属性(只翻译了主要的三个属性,其他的以后再翻译吧):
key
String
(必须的) 列名,唯一的,不能重复. 当列的key映射到DataSource 的一个字段时,也就是说key与DataSource的某一字段名相同时,DataTable会自动读取DataSource里的相应数据到对应的单元格。当列的key不与DataSource的某一字段相同时,则单元格通过使用格式化对象手动构建。key还会被DataTable用在DOM对象的属性中,不过为了符合CSS类名和DOM ID属性的用法,在用到DOM对象的属性中时会被清理一下,排除那些不符合用法的字符。如果key未在列中定义,可以自动生成,但是为了显示数据,在不指定key的情况下必须指定field属性。
field
String
指定DataSource中将被映射到DataTable中的字段。默认情况下,field与列的key属性相同。在实现过程中,也可以指定一个别的字段,这个特性在多列共享一个字段数据时很有用,因为列的key值要求是唯一的。
label
String
默认的,<th>元素的值是列的key属性,指定label属性将会使列名显示成label属性的值。
abbr
String
Value for the <th>
element's abbr
attribute.
children
Object[]
An array of object literals that define nested child Columns of a Column.
className
String
A custom CSS className or array of classNames to be applied to every cell of the Column.
editor
String
String pointer to a CellEditor class.
editorOptions
Object
Object literal CellEditor-specific configuration options. Please refer to the API documentation for more information on which properties are supported for each type of CellEditor.
formatter
String | HTMLFunction
A function or a pointer to a function to handle HTML formatting of cell data.
hidden
Boolean
True if Column is hidden.
maxAutoWidth
Number
Upper limit pixel width that a Column should auto-size to when its width is not set. Please note that maxAutoWidth validation is executed after cells are rendered, which may cause a visual flicker of content, especially on non-scrolling DataTables.
minWidth
Number
Minimum pixel width. Please note that minWidth validation is executed after cells are rendered, which may cause a visual flicker of content, especially on non-scrolling DataTables.
resizeable
Boolean
True if Column is resizeable. The Drag & Drop Utility is required to enable this feature. Only bottom-level and non-nested Columns are resizeble.
selected
Boolean
True if Column is selected.
sortable
Boolean
True if Column is sortable.
sortOptions
Object
Object literal of configurations for sort behavior.
- defaultDir
"asc"
,"desc"
,YAHOO.widget.DataTable.CLASS_ASC
, orYAHOO.widget.CLASS_DESC
- sortFunction Custom sort function.
width
Number
Pixel width.
关于第四个参数oConfigs,我就用了{caption:"DataTable Caption"},指定DataTable的标题,其他的配置选项我还没来得及看。
再说下DataTable的样式问题,一开始我们在HTML里面就引入了两个CSS文件,这个两个CSS就是DataTable的皮肤了。怎么用呢?在DataTable的构造方法中的第一个参数我们传递了DataTable的容器ID,要想使用皮肤,直接在这个容器的父容器上指定CSS样式就OK了。比如,这里使用ID为div_tableList到DIV标记作为容器,那么可以在ID为div_tables的DIV上指定class属性为yui-skin-sam,或者直接在body标记上指定class属性为yui-skin-sam。
OK,到这里我们可以开始写自己的JS代码了。
定义两个全局变量:
var oDataTable = null;
var sTableListKey = "";
Login按钮Click事件处理函数:
function btnLogin_Click()
{
host = document.getElementById("input_host").value;
port = document.getElementById("input_port").value;
username = document.getElementById("input_username").value;
password = document.getElementById("input_password").value;
database = document.getElementById("input_dbName").value;
var data = "host="+host+"&"+
"port="+port+"&"+
"user="+username+"&"+
"password="+password+"&"+
"database="+database;
var callback =
{
success : handleLoginSuccess,
failure : handleLoginFailure,
argument : []
}
YAHOO.util.Connect.asyncRequest("POST","index.php?a=showTables",callback,data);
}
http请求成功后的处理函数,参数P包含了服务器所有HTTP响应信息,这里我们只取responseText即可。
这里的responseText应该包含像这样的JSON字符串:
[
{"Tables_in_simplespace":"sequence"},
{"Tables_in_simplespace":"topic"},
{"Tables_in_simplespace":"topic_category"},
{"Tables_in_simplespace":"topic_comment"},
{"Tables_in_simplespace":"topic_content"},
{"Tables_in_simplespace":"topic_in_category"},
{"Tables_in_simplespace":"user"}
]
function handleLoginSuccess(p)
{
sTableListKey = "Tables_in_" + document.getElementById("input_dbName").value;
var myColumnDefs = [
{field:sTableListKey,label:"表名", sortable:true, resizeable:true}
];
var myDataSource = new YAHOO.util.DataSource(eval(p.responseText));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
oDataTable = new YAHOO.widget.DataTable("div_tableList",
myColumnDefs, myDataSource, {caption:"DataTable Caption"});
}
写到这里已经把任务1给KO了。呵呵。期待可以任务2了。