YUI的简单实现（含隐藏列、自定义超链接）

最新推荐文章于 2020-12-04 11:58:41 发布

blant22000

最新推荐文章于 2020-12-04 11:58:41 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： yui stylesheet date function 浏览器 class

本文链接：https://blog.csdn.net/blant22000/article/details/4282696

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

YUI是一个强大的JS框架，能很好的实现页面中的动态表格功能，且能够跨浏览器实现，开发时不用考虑不同浏览器问题。

本实例是YUI实现表格的一个简单例子，此实例是以YUI提供的实例为基础，增加了列的隐藏和自定义超链接。

引入的文件：

样式：

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { margin:0; padding:0; } .yui-skin-sam .yui-dt-liner { white-space:nowrap; }</style>

数据源：

YAHOO.example.Data = { bookorders: [ {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing"}, {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life"}, {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud"}, {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice"} ] }

表格实现代码：

YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.Basic = function() { var insertLink=function(elCell, oRecord, oColumn, oData){ elCell.innerHTML="<a href="http://www.csdn.net?id="+oRecord.getData("id")+"" mce_href="http://www.baidu.com?id="+oRecord.getData("id")+"">"+oData+"</a>"; } var myColumnDefs = [ {key:"id", hidden:true,sortable:true, resizeable:true,formatter:insertLink}, {key:"date", formatter:insertLink}, {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("yuitable", myColumnDefs, myDataSource, {caption:"DataTable Caption"}); return { oDS: myDataSource, oDT: myDataTable }; }(); });

页面实现：