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_UNKNOWNTYPE_JSARRAY 常用TYPE_JSON 常用TYPE_XMLTYPE_TEXTTYPE_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); //或者 rowClickEventfunction getSelectedVehicleInfo(){var rowArray = myDataTableY.getSelectedRows(); //獲取選中的行indexconsole.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，即列下有子列abbrformatter //自定義格式........

?

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 valuesvar myDataTableXY = new YAHOO.widget.ScrollingDataTable("xyscrolling", myColumnDefs,myDataSource, {width:"30em", height:"10em"});// Set height as a string valuereturn {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中為行記錄的數據

轉載于:https://www.cnblogs.com/yelongsan/p/6515114.html

總結

以上是生活随笔為你收集整理的js yui的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。