[转]YUI之DataTable（未完待续）

最近在用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这样的形式

返回值: object

返回connection对象

 

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, or YAHOO.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.getElementByIdx_x_x_x("input_host").value;
    port = document.getElementByIdx_x_x_x("input_port").value;
    username = document.getElementByIdx_x_x_x("input_username").value;
    password = document.getElementByIdx_x_x_x("input_password").value;
    database = document.getElementByIdx_x_x_x("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.getElementByIdx_x_x_x("input_dbName").value;
    var myColumnDefs = [
            {field:sTableListKey,label:"表名", sortable:true, resizeable:true}
        ];

        var myDataSource = new YAHOO.util.DataSource(eval_r(p.responseText));
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;

        oDataTable = new YAHOO.widget.DataTable("div_tableList",
                myColumnDefs, myDataSource, {caption:"DataTable Caption"});
}

写到这里已经把任务1给KO了。呵呵。期待可以任务2了。