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中为行记录的数据

js yui的更多相关文章

  1. JS模块化编程之加载器原理

    世面上有好多JavaScript的加载器,比如 sea.js, require.js, yui loader, labJs...., 加载器的使用范围是一些比较大的项目, 个人感觉如果是小项目的话可以 ...

  2. 【原】从一个bug浅谈YUI3组件的资源加载

    篇前声明:为了不涉及业务细节,篇内信息统一以某游戏,某功能代替 前不久,某游戏准备内测客户端,开发人员测试过程中发现某功能突然不灵了,之前的测试一切ok,没有发现任何异常,第一反应是,游戏内浏览器都是 ...

  3. Nginx 的 Echo 模块 —— echo-nginx-module(转)

    Nginx 有个 echo 模块可以用来输出一些简单的信息,例如: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 2 ...

  4. Nginx安装Nginx-echo模块

    Nginx-echo可以在Nginx中用来输出一些信息,是在测试排错过程中一个比较好的工具.它也可以做到把来自不同链接地址的信息进行一个汇总输出.总之能用起来可以给开发人员带来挺大帮助的.下面看看我们 ...

  5. 使用avalon 实现一个序列号功能

    avalon"操作数据即操作DOM"的能力,让我们可以专致于业务,写出更专业,更优雅,更易维护的代码来.现在让我们看看如何实现一个序列号输入功能.它的需求以下: 每输入4个字符就跳 ...

  6. 11款PHP集成开发环境

    1. Zend Studio Zend Studio 来自 Zend —— PHP 幕后的精英团队. 它真的是很不错.它运行于三大系统:Windows.Mac OS X 和 Linux.而且绝对能够提 ...

  7. openresty-component

    1.Array Var Nginx Module ArrayVarNginxModulelocation /foo { array_split ',' $arg_files to=$array; # ...

  8. .net 运用YUI相关的dll压缩js (按照自己的规则,想想都觉得强大和有趣)

    写在前面 不管是做前端的还是做后台的,不管是懂javaScript的还是不太懂JavaScript的人,我想都或多或想的知道些许js压缩对于页面性能提升的效应吧. 之前老喜欢用在线压缩工具去压缩js, ...

  9. Jquery,YUI这个著名js库名称作用的理解

    看廖雪峰大神的教程,其中讲到变量作用域问题.在命名空间中,写到:因为全局变量绑到了window上,不同的js文件访问相同全局变量或者定义了相同名字的顶层函数,都会造成命名冲突,并且很难被发现. 减少冲 ...

随机推荐

  1. 使用Kotlin创建Android项目

    如果你已经使用过Android Studio和Gradle,那么这一章会比较简单.我不会给出很多细节和截图,因为用户界面和细节可能会一直变化. 我们的应用是由一个简单的天气app组成,正如所使用的Go ...

  2. Android Studio之基本设置与运行

    项目结构 当我们新建一个项目的目录结构默认是这样的 可以看到和Eclipse的目录结构有很大区别,Studio一个窗口只能有一个项目,而Eclipse则可以同时存在很多项目,如果你看着不习惯可以点击左 ...

  3. 《The Story of My Life》Introductiom - Historical and Literary Context - Education of the Deaf and Blind

    At the time the Story of My Life was published, the idea of a disabled person as an active member of ...

  4. remove &#39;^M&#39; in shell script

    近期在windows上编辑一些shell脚本后上传到交换机框体上. 但这些shell脚本无法运行,每一行结尾都有'^M',同一时候框体上又没有dos2unix工具. 这么多脚本也不可能一行一行来改动. ...

  5. python贪吃蛇

    代码地址如下:http://www.demodashi.com/demo/13335.html 一.先展示python贪吃蛇效果 二.操作说明 按键 功能 UP 向上移动 DOWN 向下移动 LEFT ...

  6. 从MVC和三层架构说到ssh整合开发-下

    这章主要讲整合开发,直接从实战讲起,对与ssh的单方面了解,请继续等待我的兴许文章. 解说不到位的地方欢迎大家指正:联系方式rlovep.com 具体请看源码凝视: 全部代码下载(csdn):链接 G ...

  7. atitit.破解 拦截 绕过 网站 手机 短信 验证码 之自动获取手机短信方式 attilax 总结

    atitit.破解  拦截 绕过 网站 手机 短信 验证码 之自动获取手机短信方式 attilax 总结 1. 自动获取手机短信方式的原理 1 2. 调用api 1 3. ----核心代码 2 4.  ...

  8. C# 正则表达式替换制定关键词后面的所有内容

    如题,将 {OUTSCIPTE} 关键词后的所有内容替换为string.Empty(包含关键字)这个正则该怎么写?我是 {OUTSCIPTE}(.*)$ 写的但是什么反应也没有 string str= ...

  9. sqlite-按日期分组,根据日期查询详细内容

    一.按日期分组 String paramString = "select strftime('%Y-%m-%d',"+DBConfig.RUNNING_LOG_DATE+" ...

  10. Ubuntu 的 apt-get 代理设置(zhuan)

    url: http://qixinglu.com/post/ubuntu_apt-get_proxy_setup.html 升级到 Ubuntu10.04 后,发现 apt-get 的代理设置有改变了 ...