yui--datatable基础和常用知识总结

1.namespace

用于创建一个全局的命名空间，使用YUI时，首先会自动创建widget,util,example三个命名空间，使用时也可以自定义命名空间。类似于在程序中建了了一个static变量。eg：YAHOO.namespace("example.calendar");

 

2.高亮显示行，cell或者column

myDataTableY.subscribe("rowMouseoverEvent", myDataTableY.onEventHighlightRow);
myDataTableY.subscribe("rowMouseoutEvent", myDataTableY.onEventHighlightRow);

cell高亮：

myDataTableY.subscribe("cellMouseoverEvent", myDataTableY.onEventHighlightCell); 
myDataTableY.subscribe("cellMouseoutEvent", myDataTableY.onEventHighlightCell);

column高亮：

myDataTableY.subscribe("theadCellMouseoverEvent", myDataTableY.onEventHighlightColumn); 
myDataTableY.subscribe("theadCellMouseoutEvent", myDataTableY.onEventUnhighlightColumn);

 

3. datasource数据类型

TYPE_UNKNOWN

TYPE_JSARRAY  常用

TYPE_JSON  常用

TYPE_XML

TYPE_TEXT

TYPE_HTMLTABLE

eg: TYPE_JSARRAY

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Basic = function() {
        var data=[
         {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing",
         description: "Lorem ipsum "},
         {id:"po-0783", date:new Date("January 3, 1983"), quantity:0, amount:12.12345, title:"The Meaning of Life",
         description: "Vestibulum"}
       ];
        var myColumnDefs = [
            {key:"id", sortable:true, resizeable:true},
            {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
            {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
            {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
            {key:"title", sortable:true, resizeable:true}
        ];
        var myDataSource = new YAHOO.util.DataSource(data);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["id","date","quantity","amount","title"]
        };
        var myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, myDataSource);
        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});

 

EG: TYPE_JSON

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Basic = function() {
        var data={"recordsReturned":2,"totalRecords":2,"startIndex":0,"sort":"null","dir":"asc","records":[
         {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing",
         description: "Lorem ipsum "},
         {id:"po-0783", date:new Date("January 3, 1983"), quantity:0, amount:12.12345, title:"The Meaning of Life",
         description: "Vestibulum scelerisque"}
        ]};
        var myColumnDefs = [
            {key:"id", sortable:true, resizeable:true},
            {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
            {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
            {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
            {key:"title", sortable:true, resizeable:true}
        ];
        var myDataSource = new YAHOO.util.DataSource(data);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;  
        myDataSource.responseSchema = {
            resultsList: "records",
            fields: ["id","date","quantity","amount","title"]
        };
        var myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, myDataSource);
        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});

 

4.选中行及数据

 myDataTableY.subscribe("rowDblclickEvent",getSelectedVehicleInfo);  //或者  rowClickEvent

 function getSelectedVehicleInfo(){
             var rowArray = myDataTableY.getSelectedRows();  //获取选中的行index
             console.log(rowArray);
             var infoArray = myDataTableY.getRecord(rowArray[0]);  //获取数据
             console.log(infoArray);
             console.log(infoArray._oData);
             console.table(infoArray._oData);
             console.log("车辆id："+infoArray._oData.VEHICLEID);
         }

 

5. 列设置

常用：

 {
key:"VEHICLENUMBER",   //绑定datasource中的属性

label:"车牌号",         // html中表头名称，不设置时默认为key的名称

width:75,              //列宽

sortable:true,         //是否可以排序

resizeable:true        //列宽是否可以调整
},

 

其他：

name     //对应table.getColumn(NAME)使用；

filed      //{ field: 'fullname', formatter: ... }

id         // eg:{ name: 'checkAll', id: 'check-all',  label: ..  formatter: ...}

children  //用于设置stacked headers，即列下有子列

abbr

formatter  //自定义格式

........

 

6.多行表头

使用column 的children属性

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Basic = function() {
        var myColumnDefs = [
            {key:"id", sortable:true, resizeable:true},
            {label:"data",children:[
                {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
                {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
                {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
                {key:"title", sortable:true, resizeable:true}          
                ]                                                           
            }
         
        ];
        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["id","date","quantity","amount","title"]
        };
        var myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, myDataSource);
        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});

 

7. 带滚动表格

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Scrolling = function() {
        var myColumnDefs = [
                {key:"field1", width:50},
                {key:"field2", width:100, formatter:"date"},
                {key:"field3", width:50},
                {key:"field4", width:50},
                {key:"field5", width:50},
                {key:"field6", width:150}
            ];
            
        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.multitypes);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        myDataSource.responseSchema = {
            resultsList: "items",
            fields: [
                {key:"field1"},
                {key:"field2", formatter:"date"},
                {key:"field3"},
                {key:"field4"},
                {key:"field5"},
                {key:"field6"}
            ]
        };

        // Set width and height as string values
        var myDataTableXY = new YAHOO.widget.ScrollingDataTable("xyscrolling", myColumnDefs,
                myDataSource, {width:"30em", height:"10em"});

        // Set height as a string value
  
                
        return {
            oDS: myDataSource,
            oDTXY: myDataTableXY,
           
        };
    }();
});

 

 

8. 更新datasource

使用getDataSource可以获取dataSource实例：

var myDataSource = new YAHOO.util.DataSource(Data);  
myDataTableY.getDataSource();
console.log(myDataTableY.getDataSource());

 

上图中liveData即是我们最终显示在表格中的数据

更改liveData：

  myDataTableY.getDataSource().liveData=DataSource;

可以和datatable的事件绑定使用：

本例中是和排序前作更改的的事件绑定：

  yDataTableY.subscribe("beforeSortedByChange",changeDataRource);

 

 9.添加行和删除行

//添加

addRow(oData , index)
addRows(oData, index)

//删除

deleteRow(index)
deleteRows(index,count)

 

eg:

添加：

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Basic = function() {
        var myColumnDefs = [
            {key:"id", sortable:true, resizeable:true},
            {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
            {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
            {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
            {key:"title", sortable:true, resizeable:true}
        ];
        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["id","date","quantity","amount","title"]
        };
        var myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, myDataSource);
        myDataTable.subscribe("rowClickEvent",addInfo);
        function addInfo(){
            var oData=  {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing",
                    description: "Lorem ipsum"};
            myDataTable.addRow(oData,0);
        }

        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});

 

删除：

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Basic = function() {
        var myColumnDefs = [
            {key:"id", sortable:true, resizeable:true},
            {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
            {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
            {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
            {key:"title", sortable:true, resizeable:true}
        ];
        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["id","date","quantity","amount","title"]
        };
        var myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, myDataSource);
        myDataTable.subscribe("rowClickEvent",deleteInfo);
        function deleteInfo(){
            myDataTable.deleteRow(0);
            //获取下表 getTrIndex(row);  row 为record 返回index
        }
        
        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});

 

 10. 格式化数据

利用列的formatter属性

eg:

{key:"OnLineStatus", label:"",width:30,resizeable:true,formatter:"changeLight"},

YAHOO.widget.DataTable.Formatter.changeLight=function(elCell, oRecord, oColumn, oData){
                   elCell.innerHTML = "<img src='../MonitorManage/images/gray_lamp.png'>";
               };

 

11获取record或相关数据等

DataTable.getRecordSet()  //获取记录集合对象

DataTable.getRecordSet().getRecords() //获取对象中记录

DataTable.getRecordSet().getRecords()[i]._oData  //表的行实际数据

 

火狐中查看对象结构如下：

getRecordSet()返回的对象如下：

getRecordSet().getRecords()返回对象如下：为所有行record对象的集合：


具体每个行记录中结构如下：

使用getId可以获取行记录id  _oData中为行记录的数据