为什么 YUI 2 DataTables 不能在 IE 中工作,但可以在 FireFox 中工作?
因此,我使用 YUI 2 数据表小部件和 tabview 组件来显示多个查询的结果,这些查询都是同时执行的,在带有漂亮、样式化和可排序表的单独选项卡中。在 FireFox 中运行良好。在 IE 中,它只是在服务器端使用 PHP 生成的简单 HTML 表格标记中显示数据,该标记实际上充当数据表小部件的数据源。我所有的 HTML 都是在服务器端生成的。这是我的脚本:
<script type="text/javascript">
YAHOO.util.Event.onContentReady("ready14", function() {
//Sets globals
var dataSource= YAHOO.util.DataSource;
var getIt = YAHOO.util.Dom.get;
var dataType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
var table = YAHOO.widget.DataTable;
var scroll = YAHOO.widget.ScrollingDataTable;
var numbers= YAHOO.widget.DataTable.formatNumber;
var strings = YAHOO.widget.DataTable.formatString;
var dates = YAHOO.widget.DataTable.formatDate;
var niceTables = function() {
var myTabView = new YAHOO.widget.TabView("reportTables");
var myColumnDefs =[
{key:"Tactic",formatter:strings,sortable:true},
{key:"Opt-In Count",formatter:numbers,sortable:true, sortOptions: defaultDir: table.CLASS_DESC }},
];
var myColumnDefs2 =[
{key:"Tactic",formatter:strings,sortable:true},
{key:"Opt-In Count",formatter:numbers,sortable:true, sortOptions: { defaultDir: table.CLASS_DESC }},
];
var myColumnDefs3 =[
{key:"Lead Meta Data ID" },{key:"First Name",formatter:strings,sortable:true},{key:"Last Name",formatter:strings,sortable:true},{key:"Address"}, {key:"City",formatter:strings,sortable:true},{key:"State",formatter:strings,sortable:true},{key:"Zip",formatter:strings,sortable:true}, {key:"Email"},{key:"Phone"}, {key:"Gender",formatter:strings,sortable:true},
{key:"DOB",formatter:dates,sortable:true},{key:"Lead Type",formatter:strings,sortable:true}, {key:"Lead Source"},{key:"LOB",formatter:strings,sortable:true},{key:"Client",formatter:strings,sortable:true},{key:"Rep Nbr",formatter:strings,sortable:true, sortOptions: { defaultDir: YAHOO.widget.DataTable.CLASS_DESC }},{key:"Duplicate",formatter:strings,sortable:true},{key:"Comments"}, {key:"Social Media Source",formatter:strings,sortable:true},{key:"Lead Ready",formatter:dates,sortable:true,},{key:"Lead Sent",formatter:dates,sortable:true, sortOptions: { defaultDir: YAHOO.widget.DataTable.CLASS_DESC }},{key:"Tactic Name",formatter:strings,sortable:true},{key:"Tactic Line Of Business ",formatter:strings,sortable:true},
];
var myColumnDefs4 =[
{key:"Prize Type",formatter:strings,sortable:true },{key:"First Name",formatter:strings,sortable:true},{key:"Last Name",formatter:strings,sortable:true},{key:"Address"},{key:"City", sortable:true}, {key:"State",formatter:strings,sortable:true},{key:"Zip",formatter:strings,sortable:true},{key:"Email"}, {key:"Phone"}, {key:"Play Date",formatter:dates,sortable:true, sortOptions: { defaultDir:table.CLASS_DESC }},
];
var myColumnDefs5 =[
{key:"Prize Type",formatter:strings,sortable:true },
{key:"Prize Type Count",formatter:numbers,sortable:true, sortOptions: { defaultDir: table.CLASS_DESC }},
];
var myColumnDefs6 =[
{key:"Lead Source",formatter:strings,sortable:true},
{key:"Dupe Count",formatter:numbers,sortable:true, sortOptions: { defaultDir:table.CLASS_DESC }},
];
var myColumnDefs7 =[
{key:"Guitar Type",formatter:strings,sortable:true },
{key:"Count",formatter:numbers,sortable:true, sortOptions: { defaultDir: table.CLASS_DESC }},
];
var myColumnDefs8 =[
{key:"Tactic",formatter:strings,sortable:true },
{key:"Opt-In Count",formatter:numbers,sortable:true, sortOptions: { defaultDir: table.CLASS_DESC }},
];
var myColumnDefs9 =[
{key:"Tactic",formatter:strings,sortable:true },
{key:"Opt-In Count",formatter:numbers,sortable:true, sortOptions: { defaultDir: table.CLASS_DESC }},
];
var myColumnDefs10 =[
{key:"Concert ID" },{key:"Artist" },{key:"Concert City" },{key:"Concert State" },{key:"Concert Date" },{key:"Entry Deadline" },{key:"Lead Meta Data ID" }, {key:"First Name"},
{key:"Last Name"}, {key:"Address"},{key:"City"},{key:"State"},{key:"Zip"},{key:"Email"},{key:"Phone"},{key:"Lead Type"},{key:"Lead Source"}, {key:"LOB"},{key:"Client"},{key:"Rep Nbr"}, {key:"Duplicate"},,
];
//get the YUI DataSource for each table
var myDataSource = new dataSource(getIt("optins"));
myDataSource.responseType = dataType;
myDataSource.responseSchema = {
fields: ["Tactic","Opt-In Count"]
};
var myDataSource2 = new dataSource(getIt("optTotal"));
myDataSource2.responseType = dataType;
myDataSource2.responseSchema = {
fields: ["Tactic","Opt-In Count"]
};
var myDataSource3 = new dataSource(getIt("optInReport"));
myDataSource3.responseType = dataType;
myDataSource3.responseSchema = {
fields: ["Lead Meta Data ID","First Name","Last Name","Address","City","State","Zip","Email","Phone",
"Gender","DOB","Lead Type","Lead Source","LOB","Client","Rep Nbr","Duplicate","Comments","Social Media Source","Lead Ready","Lead Sent","Tactic Name","Tactic Line Of Business",]
};
var myDataSource4 = new dataSource(getIt("spinWinners"));
myDataSource4.responseType = dataType;
myDataSource4.responseSchema = {
fields: ["Prize Type","Band","First Name","Last Name","Address","City","State","Zip","Email","Phone","Play Date",]
};
var myDataSource5 = new dataSource(getIt("prizes"));
myDataSource5.responseType = dataType;
myDataSource5.responseSchema = {
fields: ["Prize Type","Prize Type Count"]
};
var myDataSource6 = new dataSource(getIt("dupeCount"));
myDataSource6.responseType = dataType;
myDataSource6.responseSchema = {
fields: ["Lead Source","Dupe Count"]
};
var myDataSource7 = new dataSource(getIt("guitarType"));
myDataSource7.responseType = dataType;
myDataSource7.responseSchema = {
fields: ["Guitar Type","Count"]
};
var myDataSource8 = new dataSource(getIt("guitarTactic"));
myDataSource8.responseType = dataType;
myDataSource8.responseSchema = {
fields: ["Tactic","Opt-In Count"]
};
var myDataSource9 = new dataSource(getIt("OptInsSent"));
myDataSource9.responseType = dataType;
myDataSource9.responseSchema = {
fields: ["Tactic","Opt-In Count"]
};
var myDataSource10 = new dataSource(getIt("ticketEntries"));
myDataSource10.responseType = dataType;
myDataSource10.responseSchema = {
fields: ["Concert ID","Artist","Concert City","Concert State","Concert Date","Entry Deadline","Lead Meta Data ID","First Name","Last Name","Address","City","State","Zip","Email","Phone",
"Lead Type","Lead Source","LOB","Client","Rep Nbr","Duplicate",]
};
new table("table1", myColumnDefs, myDataSource);
new table("table3", myColumnDefs2, myDataSource2);
new scroll("table4", myColumnDefs3, myDataSource3,{width:"118em", height:"53em"});
new table("table6", myColumnDefs4, myDataSource4);
new table("table7", myColumnDefs5, myDataSource5);
new table("table8", myColumnDefs6, myDataSource6);
new table("table10", myColumnDefs7, myDataSource7);
new table("table11", myColumnDefs8, myDataSource8);
new table("table12", myColumnDefs9, myDataSource9);
new scroll("table13", myColumnDefs10, myDataSource10,{width:"118em", height:"53em"});
}();
return {
};
});
So I am using the YUI 2 data table widget and tabview component to display the results of multiple queries, which are all executed at the same time, in separate tabs with nice, styled, and sortable tables. Works great in FireFox. In IE, it just displays the data in a simple HTML table markup that is generated server side with PHP, which actually serves as the DataSource for the datatable widget. All of my HTML is generated server side. Here is my script:
<script type="text/javascript">
YAHOO.util.Event.onContentReady("ready14", function() {
//Sets globals
var dataSource= YAHOO.util.DataSource;
var getIt = YAHOO.util.Dom.get;
var dataType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
var table = YAHOO.widget.DataTable;
var scroll = YAHOO.widget.ScrollingDataTable;
var numbers= YAHOO.widget.DataTable.formatNumber;
var strings = YAHOO.widget.DataTable.formatString;
var dates = YAHOO.widget.DataTable.formatDate;
var niceTables = function() {
var myTabView = new YAHOO.widget.TabView("reportTables");
var myColumnDefs =[
{key:"Tactic",formatter:strings,sortable:true},
{key:"Opt-In Count",formatter:numbers,sortable:true, sortOptions: defaultDir: table.CLASS_DESC }},
];
var myColumnDefs2 =[
{key:"Tactic",formatter:strings,sortable:true},
{key:"Opt-In Count",formatter:numbers,sortable:true, sortOptions: { defaultDir: table.CLASS_DESC }},
];
var myColumnDefs3 =[
{key:"Lead Meta Data ID" },{key:"First Name",formatter:strings,sortable:true},{key:"Last Name",formatter:strings,sortable:true},{key:"Address"}, {key:"City",formatter:strings,sortable:true},{key:"State",formatter:strings,sortable:true},{key:"Zip",formatter:strings,sortable:true}, {key:"Email"},{key:"Phone"}, {key:"Gender",formatter:strings,sortable:true},
{key:"DOB",formatter:dates,sortable:true},{key:"Lead Type",formatter:strings,sortable:true}, {key:"Lead Source"},{key:"LOB",formatter:strings,sortable:true},{key:"Client",formatter:strings,sortable:true},{key:"Rep Nbr",formatter:strings,sortable:true, sortOptions: { defaultDir: YAHOO.widget.DataTable.CLASS_DESC }},{key:"Duplicate",formatter:strings,sortable:true},{key:"Comments"}, {key:"Social Media Source",formatter:strings,sortable:true},{key:"Lead Ready",formatter:dates,sortable:true,},{key:"Lead Sent",formatter:dates,sortable:true, sortOptions: { defaultDir: YAHOO.widget.DataTable.CLASS_DESC }},{key:"Tactic Name",formatter:strings,sortable:true},{key:"Tactic Line Of Business ",formatter:strings,sortable:true},
];
var myColumnDefs4 =[
{key:"Prize Type",formatter:strings,sortable:true },{key:"First Name",formatter:strings,sortable:true},{key:"Last Name",formatter:strings,sortable:true},{key:"Address"},{key:"City", sortable:true}, {key:"State",formatter:strings,sortable:true},{key:"Zip",formatter:strings,sortable:true},{key:"Email"}, {key:"Phone"}, {key:"Play Date",formatter:dates,sortable:true, sortOptions: { defaultDir:table.CLASS_DESC }},
];
var myColumnDefs5 =[
{key:"Prize Type",formatter:strings,sortable:true },
{key:"Prize Type Count",formatter:numbers,sortable:true, sortOptions: { defaultDir: table.CLASS_DESC }},
];
var myColumnDefs6 =[
{key:"Lead Source",formatter:strings,sortable:true},
{key:"Dupe Count",formatter:numbers,sortable:true, sortOptions: { defaultDir:table.CLASS_DESC }},
];
var myColumnDefs7 =[
{key:"Guitar Type",formatter:strings,sortable:true },
{key:"Count",formatter:numbers,sortable:true, sortOptions: { defaultDir: table.CLASS_DESC }},
];
var myColumnDefs8 =[
{key:"Tactic",formatter:strings,sortable:true },
{key:"Opt-In Count",formatter:numbers,sortable:true, sortOptions: { defaultDir: table.CLASS_DESC }},
];
var myColumnDefs9 =[
{key:"Tactic",formatter:strings,sortable:true },
{key:"Opt-In Count",formatter:numbers,sortable:true, sortOptions: { defaultDir: table.CLASS_DESC }},
];
var myColumnDefs10 =[
{key:"Concert ID" },{key:"Artist" },{key:"Concert City" },{key:"Concert State" },{key:"Concert Date" },{key:"Entry Deadline" },{key:"Lead Meta Data ID" }, {key:"First Name"},
{key:"Last Name"}, {key:"Address"},{key:"City"},{key:"State"},{key:"Zip"},{key:"Email"},{key:"Phone"},{key:"Lead Type"},{key:"Lead Source"}, {key:"LOB"},{key:"Client"},{key:"Rep Nbr"}, {key:"Duplicate"},,
];
//get the YUI DataSource for each table
var myDataSource = new dataSource(getIt("optins"));
myDataSource.responseType = dataType;
myDataSource.responseSchema = {
fields: ["Tactic","Opt-In Count"]
};
var myDataSource2 = new dataSource(getIt("optTotal"));
myDataSource2.responseType = dataType;
myDataSource2.responseSchema = {
fields: ["Tactic","Opt-In Count"]
};
var myDataSource3 = new dataSource(getIt("optInReport"));
myDataSource3.responseType = dataType;
myDataSource3.responseSchema = {
fields: ["Lead Meta Data ID","First Name","Last Name","Address","City","State","Zip","Email","Phone",
"Gender","DOB","Lead Type","Lead Source","LOB","Client","Rep Nbr","Duplicate","Comments","Social Media Source","Lead Ready","Lead Sent","Tactic Name","Tactic Line Of Business",]
};
var myDataSource4 = new dataSource(getIt("spinWinners"));
myDataSource4.responseType = dataType;
myDataSource4.responseSchema = {
fields: ["Prize Type","Band","First Name","Last Name","Address","City","State","Zip","Email","Phone","Play Date",]
};
var myDataSource5 = new dataSource(getIt("prizes"));
myDataSource5.responseType = dataType;
myDataSource5.responseSchema = {
fields: ["Prize Type","Prize Type Count"]
};
var myDataSource6 = new dataSource(getIt("dupeCount"));
myDataSource6.responseType = dataType;
myDataSource6.responseSchema = {
fields: ["Lead Source","Dupe Count"]
};
var myDataSource7 = new dataSource(getIt("guitarType"));
myDataSource7.responseType = dataType;
myDataSource7.responseSchema = {
fields: ["Guitar Type","Count"]
};
var myDataSource8 = new dataSource(getIt("guitarTactic"));
myDataSource8.responseType = dataType;
myDataSource8.responseSchema = {
fields: ["Tactic","Opt-In Count"]
};
var myDataSource9 = new dataSource(getIt("OptInsSent"));
myDataSource9.responseType = dataType;
myDataSource9.responseSchema = {
fields: ["Tactic","Opt-In Count"]
};
var myDataSource10 = new dataSource(getIt("ticketEntries"));
myDataSource10.responseType = dataType;
myDataSource10.responseSchema = {
fields: ["Concert ID","Artist","Concert City","Concert State","Concert Date","Entry Deadline","Lead Meta Data ID","First Name","Last Name","Address","City","State","Zip","Email","Phone",
"Lead Type","Lead Source","LOB","Client","Rep Nbr","Duplicate",]
};
new table("table1", myColumnDefs, myDataSource);
new table("table3", myColumnDefs2, myDataSource2);
new scroll("table4", myColumnDefs3, myDataSource3,{width:"118em", height:"53em"});
new table("table6", myColumnDefs4, myDataSource4);
new table("table7", myColumnDefs5, myDataSource5);
new table("table8", myColumnDefs6, myDataSource6);
new table("table10", myColumnDefs7, myDataSource7);
new table("table11", myColumnDefs8, myDataSource8);
new table("table12", myColumnDefs9, myDataSource9);
new scroll("table13", myColumnDefs10, myDataSource10,{width:"118em", height:"53em"});
}();
return {
};
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您的对象/数组中有尾随逗号。 IE 因尾随逗号而卡住。
You have trailing commas in your objects/arrays. IE chokes on trailing commas.