Remove the old YUI directory to make way for 2.5.0. Remove extjs as it's no longer needed.
This commit is contained in:
Chris Nehren
parent
4646561299
commit
69269e50a0
1992 changed files with 0 additions and 645732 deletions
|
|
@ -1,129 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - Basic Table (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
#basic {margin:1em;}
|
||||
#basic table {border-collapse:collapse;}
|
||||
#basic th, #basic td {border:1px solid #000;padding:.25em;}
|
||||
#basic th {background-color:#696969;color:#fff;} /*dark gray*/
|
||||
#basic .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
#basic em {font-style:italic;}
|
||||
#basic strong {font-weight:bold;}
|
||||
#basic .big {font-size:136%;}
|
||||
#basic .small {font-size:77%}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Basic Table</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="basic" class="example"></div>
|
||||
|
||||
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
YAHOO.example.Data.bookorders = [
|
||||
{id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing"},
|
||||
{id:"po-0297", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life"},
|
||||
{id:"po-0783", 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"}
|
||||
];
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
#basic {margin:1em;}
|
||||
#basic table {border-collapse:collapse;}
|
||||
#basic th, #basic td {border:1px solid #000;padding:.25em;}
|
||||
#basic th {background-color:#696969;color:#fff;} /*dark gray*/
|
||||
#basic .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
#basic em {font-style:italic;}
|
||||
#basic strong {font-weight:bold;}
|
||||
#basic .big {font-size:136%;}
|
||||
#basic .small {font-size:77%}
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="basic"></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var myColumnHeaders = [
|
||||
{key:"POID", abbr:"Purchase order ID", sortable:true, resizeable:true},
|
||||
{key:"Date", type:"date", sortable:true, resizeable:true},
|
||||
{key:"Quantity", type:"number", sortable:true, resizeable:true},
|
||||
{key:"Amount", type:"currency", sortable:true, resizeable:true},
|
||||
{key:"Title", type:"html", sortable:true, resizeable:true}
|
||||
];
|
||||
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["POID","Date","Quantity","Amount","Title"]
|
||||
};
|
||||
var myDataTable = new YAHOO.widget.DataTable("basic", myColumnSet, myDataSource,{caption:"Example: Basic Table"});
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="./js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
var myColumnHeaders = [
|
||||
{key:"id", sortable:true, resizeable:true},
|
||||
{key:"date", type:"date", sortable:true, resizeable:true},
|
||||
{key:"quantity", type:"number", sortable:true, resizeable:true},
|
||||
{key:"amount", type:"currency", sortable:true, resizeable:true},
|
||||
{key:"title", type:"html", sortable:true, resizeable:true}
|
||||
];
|
||||
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
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", myColumnSet, myDataSource,{caption:"Example: Basic Table"});
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - Integrated Feature Set (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
#complex {margin:1em;}
|
||||
#complex table {border-collapse:collapse;}
|
||||
#complex th, #paginated td {border:1px solid #000;width:10em;}
|
||||
#complex th {background-color:#696969;}/* gray*/
|
||||
#complex th .yui-dt-headtext {margin-right:5px;padding-right:15px;color:#fff;} /*room for arrow*/
|
||||
#complex th a {color:#fff;} /* white */
|
||||
#complex .yui-dt-sortedbyasc, #complex .yui-dt-sortedbydesc {background-color:#3F3F3F;}/*dark gray*/
|
||||
#complex .yui-dt-sortedbyasc .yui-dt-headtext {background-image: url('img/arrow_up.gif'); background-repeat:no-repeat; background-position:right;}/*arrow up*/
|
||||
#complex .yui-dt-sortedbydesc .yui-dt-headtext {background-image: url('img/arrow_dn.gif'); background-repeat:no-repeat; background-position:right;}/*arrow down*/
|
||||
#complex .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
#complex .yui-dt-selected {background-color:#97C0A5;} /*green*/
|
||||
|
||||
.areacodestyle {text-align:center;}
|
||||
.statestyle, .notesstyle {padding-left:1em;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Integrated Feature Set</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="complex"></div>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
YAHOO.example.Data.areacodes = [
|
||||
{areacode: "201", state: "New Jersey"},
|
||||
...,
|
||||
{areacode: "989", state: "Michigan"}
|
||||
];
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
#complex {margin:1em;}
|
||||
#complex table {border-collapse:collapse;}
|
||||
#complex th, #paginated td {border:1px solid #000;width:10em;}
|
||||
#complex th {background-color:#696969;}/* gray*/
|
||||
#complex th .yui-dt-headtext {margin-right:5px;padding-right:15px;} /*room for arrow*/
|
||||
#complex th a {color:#fff;} /* white */
|
||||
#complex .yui-dt-sortedbyasc, #complex .yui-dt-sortedbydesc {background-color:#3F3F3F;}/*dark gray*/
|
||||
#complex .yui-dt-sortedbyasc .yui-dt-headtext {background-image: url('img/arrow_up.gif'); background-repeat:no-repeat; background-position:right;}/*arrow up*/
|
||||
#complex .yui-dt-sortedbydesc .yui-dt-headtext {background-image: url('img/arrow_dn.gif'); background-repeat:no-repeat; background-position:right;}/*arrow down*/
|
||||
#complex .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
#complex .yui-dt-selected {background-color:#97C0A5;} /*green*/
|
||||
|
||||
.areacodestyle {text-align:center;}
|
||||
.statestyle, .notesstyle {padding-left:1em;}
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="complex"></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
// Custom sort functionality to sort by areacode within states
|
||||
YAHOO.example.sortStatesAsc = function(a, b) {
|
||||
if((a === null) || (typeof a == "undefined")) {
|
||||
if((b === null) || (typeof b == "undefined")) {
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
else if((b === null) || (typeof b == "undefined")) {
|
||||
return -1;
|
||||
}
|
||||
var comp = YAHOO.util.Sort.compareAsc;
|
||||
var compState = comp(a.state, b.state);
|
||||
return (compState !== 0) ? compState : comp(a.areacode, b.areacode);
|
||||
};
|
||||
YAHOO.example.sortStatesDesc = function(a, b) {
|
||||
if((a === null) || (typeof a == "undefined")) {
|
||||
if((b === null) || (typeof b == "undefined")) {
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
else if((b === null) || (typeof b == "undefined")) {
|
||||
return 1;
|
||||
}
|
||||
var comp = YAHOO.util.Sort.compareDesc;
|
||||
var compState = comp(a.state, b.state);
|
||||
return (compState !== 0) ? compState : comp(a.areacode, b.areacode);
|
||||
};
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"areacode",text:"Area Codes",width:"8em",className:"areacodestyle",sortable:true},
|
||||
{key:"state",text:"States",width:"16em",className:"statestyle",sortable:true,sortOptions:{ascFunction:YAHOO.example.sortStatesAsc,descFunction:YAHOO.example.sortStatesDesc}},
|
||||
{key:"notes",text:"Notes (editable)",editor:"textbox"}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["areacode","state"]
|
||||
};
|
||||
|
||||
var myConfigs = {
|
||||
caption:"Example: Integrated Feature Set",
|
||||
sortedBy:{colKey:"areacode",dir:"asc"},
|
||||
paginator:true,
|
||||
paginatorOptions: {
|
||||
rowsPerPage: 25,
|
||||
dropdownOptions: [10,25,50,100],
|
||||
pageLinks: 5
|
||||
}
|
||||
}
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("complex",myColumnSet,myDataSource,myConfigs);
|
||||
myDataTable.subscribe("cellClickEvent",myDataTable.onEventSelectRow);
|
||||
myDataTable.subscribe("cellClickEvent",myDataTable.onEventEditCell);
|
||||
|
||||
var onCellEdit = function(oArgs) {
|
||||
var oldData = oArgs.oldData || "";
|
||||
var newData = oArgs.newData || "";
|
||||
YAHOO.log("Cell \"" + oArgs.target.id +
|
||||
"\" was updated from \"" + oldData + "\" to \"" +
|
||||
newData + "\"", "info", this.toString());
|
||||
}
|
||||
myDataTable.subscribe("cellEditEvent",onCellEdit);
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="./js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
|
||||
// Custom sort functionality to sort by areacode within states
|
||||
YAHOO.example.sortStatesAsc = function(a, b) {
|
||||
if((a === null) || (typeof a == "undefined")) {
|
||||
if((b === null) || (typeof b == "undefined")) {
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
else if((b === null) || (typeof b == "undefined")) {
|
||||
return -1;
|
||||
}
|
||||
var comp = YAHOO.util.Sort.compareAsc;
|
||||
var compState = comp(a.state, b.state);
|
||||
return (compState !== 0) ? compState : comp(a.areacode, b.areacode);
|
||||
};
|
||||
YAHOO.example.sortStatesDesc = function(a, b) {
|
||||
if((a === null) || (typeof a == "undefined")) {
|
||||
if((b === null) || (typeof b == "undefined")) {
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
else if((b === null) || (typeof b == "undefined")) {
|
||||
return 1;
|
||||
}
|
||||
var comp = YAHOO.util.Sort.compareDesc;
|
||||
var compState = comp(a.state, b.state);
|
||||
return (compState !== 0) ? compState : comp(a.areacode, b.areacode);
|
||||
};
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"areacode",text:"Area Codes",width:"8em",className:"areacodestyle",sortable:true},
|
||||
{key:"state",text:"States",width:"16em",className:"statestyle",sortable:true,sortOptions:{ascFunction:YAHOO.example.sortStatesAsc,descFunction:YAHOO.example.sortStatesDesc}},
|
||||
{key:"notes",text:"Notes (editable)",className:"notesstyle",editor:"textbox"}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["areacode","state"]
|
||||
};
|
||||
|
||||
var myConfigs = {
|
||||
caption:"Example: Integrated Feature Set",
|
||||
sortedBy:{colKey:"areacode",dir:"asc"},
|
||||
paginator:true,
|
||||
paginatorOptions: {
|
||||
rowsPerPage: 25,
|
||||
dropdownOptions: [10,25,50,100],
|
||||
pageLinks: 5
|
||||
}
|
||||
}
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("complex",myColumnSet,myDataSource,myConfigs);
|
||||
myDataTable.subscribe("cellClickEvent",myDataTable.onEventSelectRow);
|
||||
myDataTable.subscribe("cellClickEvent",myDataTable.onEventEditCell);
|
||||
|
||||
var onCellEdit = function(oArgs) {
|
||||
var oldData = oArgs.oldData || "";
|
||||
var newData = oArgs.newData || "";
|
||||
YAHOO.log("Cell \"" + oArgs.target.id +
|
||||
"\" was updated from \"" + oldData + "\" to \"" +
|
||||
newData + "\"", "info", this.toString());
|
||||
}
|
||||
myDataTable.subscribe("cellEditEvent",onCellEdit);
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,226 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - Integration with ContextMenu (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/menu/assets/menu.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
#contextmenu {margin:1em;}
|
||||
#contextmenu table {border-collapse:collapse;}
|
||||
#contextmenu th, #contextmenu td {border:1px solid #000;padding:.25em;}
|
||||
#contextmenu th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#contextmenu .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Integration with ContextMenu</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="contextmenu" class="example"></div>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Dependencies:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<!-- Required CSS -->
|
||||
<link type="text/css" rel="stylesheet" href="build/datatable/assets/datatable.css">
|
||||
|
||||
<!-- Dependencies -->
|
||||
<script type="text/javascript" src="build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
|
||||
<!-- OPTIONAL: Connection (enables XHR) -->
|
||||
<script type="text/javascript" src="build/connection/connection-min.js"></script>
|
||||
|
||||
<!-- OPTIONAL: Drag Drop (enables resizeable columns) -->
|
||||
<script type="text/javascript" src="build/dragdrop/dragdrop-min.js"></script>
|
||||
|
||||
<!-- OPTIONAL: External JSON parser from http://www.json.org/ (enables JSON validation) -->
|
||||
<script type="text/javascript" src="http://www.json.org/json.js"></script>
|
||||
|
||||
<!-- Need to also include files to enable ContextMenu -->
|
||||
<script type="text/javascript" src="build/container/container_core.js"></script>
|
||||
<script type="text/javascript" src="build/menu/menu.js"></script>
|
||||
|
||||
<!-- Source files -->
|
||||
<script type="text/javascript" src="build/datasource/datasource-beta.js"></script>
|
||||
<script type="text/javascript" src="build/datatable/datatable-beta.js"></script>
|
||||
</textarea>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
YAHOO.example.Data.inventory = [
|
||||
{SKU:"23-23874", Quantity:43, Item:"Helmet", Description:"Red baseball helmet. Size: Large."},
|
||||
{SKU:"48-38835", Quantity:84, Item:"Football", Description:"Leather football."},
|
||||
{SKU:"84-84848", Quantity:31, Item:"Goggles", Description:"Light blue swim goggles"},
|
||||
{SKU:"84-84843", Quantity:56, Item:"Badminton Set", Description:"Set of 2 badminton rackets, net, and 3 birdies."},
|
||||
{SKU:"84-39321", Quantity:128, Item:"Tennis Balls", Description:"Canister of 3 tennis balls."},
|
||||
{SKU:"39-48949", Quantity:55, Item:"Snowboard", Description:""},
|
||||
{SKU:"99-28128", Quantity:77, Item:"Cleats", Description:"Soccer cleats. Size: 10."},
|
||||
{SKU:"83-48281", Quantity:65, Item:"Volleyball", Description:""},
|
||||
{SKU:"89-32811", Quantity:67, Item:"Sweatband", Description:"Blue sweatband. Size: Medium."},
|
||||
{SKU:"28-22847", Quantity:43, Item:"Golf Set", Description:"Set of 9 golf clubs and bag."},
|
||||
{SKU:"38-38281", Quantity:35, Item:"Basketball Shorts", Description:"Green basketball shorts. Size: Small."},
|
||||
{SKU:"82-38333", Quantity:288, Item:"Lip balm", Description:"Lip balm. Flavor: Cherry."},
|
||||
{SKU:"21-38485", Quantity:177, Item:"Ping Pong Ball", Description:""},
|
||||
{SKU:"83-38285", Quantity:87, Item:"Hockey Puck", Description:"Glow-in-the-dark hockey puck."}
|
||||
];
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
#contextmenu {margin:1em;}
|
||||
#contextmenu table {border-collapse:collapse;}
|
||||
#contextmenu th, #contextmenu td {border:1px solid #000;padding:.25em;}
|
||||
#contextmenu th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#contextmenu .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="contextmenu" class="example"></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var myColumnHeaders = [
|
||||
{key:"SKU"},
|
||||
{key:"Quantity"},
|
||||
{key:"Item"},
|
||||
{key:"Description"}
|
||||
];
|
||||
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.inventory);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["SKU","Quantity","Item","Description"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("contextmenu", myColumnSet, myDataSource,{caption:"Example: Integration with ContextMenu"});
|
||||
|
||||
var onRowDelete = function(oArgs) {
|
||||
YAHOO.log("Deleted row index " +oArgs.rowIndex);
|
||||
};
|
||||
myDataTable.subscribe("rowDeleteEvent", onRowDelete);
|
||||
|
||||
var onContextMenuClick = function(p_sType, p_aArgs, p_oMenu) {
|
||||
var task = p_aArgs[1];
|
||||
if(task) {
|
||||
// Extract which row was context-clicked
|
||||
var row = this.contextEventTarget;
|
||||
while(row.tagName.toLowerCase() != "tr") {
|
||||
row = row.parentNode;
|
||||
if(row.tagName.toLowerCase == "body") {
|
||||
row = null;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(row) {
|
||||
switch(task.index) {
|
||||
case 0: // Delete Item
|
||||
YAHOO.log("Deleting item: " + row.cells[2].innerHTML);
|
||||
myDataTable.deleteRow(row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu", { trigger: myDataTable.getBody() } );
|
||||
myContextMenu.addItem("Delete Item");
|
||||
myContextMenu.render(document.body);
|
||||
myContextMenu.clickEvent.subscribe(onContextMenuClick);
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="./js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
var myColumnHeaders = [
|
||||
{key:"SKU"},
|
||||
{key:"Quantity"},
|
||||
{key:"Item"},
|
||||
{key:"Description"}
|
||||
];
|
||||
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.inventory);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["SKU","Quantity","Item","Description"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("contextmenu", myColumnSet, myDataSource,{caption:"Example: Integration with ContextMenu"});
|
||||
|
||||
var onRowDelete = function(oArgs) {
|
||||
YAHOO.log("Deleted row indexes: " +oArgs.rowIndexes);
|
||||
};
|
||||
myDataTable.subscribe("rowDeleteEvent", onRowDelete);
|
||||
|
||||
var onContextMenuClick = function(p_sType, p_aArgs, p_oMenu) {
|
||||
var task = p_aArgs[1];
|
||||
if(task) {
|
||||
// Extract which row was context-clicked
|
||||
var row = this.contextEventTarget;
|
||||
while(row.tagName.toLowerCase() != "tr") {
|
||||
row = row.parentNode;
|
||||
if(row.tagName.toLowerCase == "body") {
|
||||
row = null;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(row) {
|
||||
switch(task.index) {
|
||||
case 0: // Delete Item
|
||||
YAHOO.log("Deleting item: " + row.cells[2].innerHTML);
|
||||
myDataTable.deleteRow(row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu", { trigger: myDataTable.getBody() } );
|
||||
myContextMenu.addItem("Delete Item");
|
||||
myContextMenu.render(document.body);
|
||||
myContextMenu.clickEvent.subscribe(onContextMenuClick);
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
h1 {font-size:144%;}
|
||||
h2 {font-size:129%;}
|
||||
h3 {font-size:114%;}
|
||||
h4 {font-size:100%;}
|
||||
h1,h2,h3,h4 {font-weight:bold;}
|
||||
body {margin:1em;font-family:verdana,arial,sans-serif;}
|
||||
|
||||
#hd {position:relative;}
|
||||
#hd .logo {width:65px;height:38px;vertical-align:middle;padding-right:10px;}
|
||||
|
||||
#bd h1,h2,h3,p{padding:.5em;}
|
||||
|
||||
#code {clear:both;}
|
||||
#code .code {padding:1em;background:#DEDEDE;border:1px solid black;font-size:92%;}
|
||||
|
||||
#logger {position:relative;float:right;clear:both;margin:1em;width:30em;padding:.5em;}
|
||||
|
||||
#panel {width:40%;background:#DEDEDE;border:1px solid #000;margin:2em;padding:1em;}
|
||||
#panel div {margin-top:1em;padding-bottom:.5em;border-bottom:1px solid #404040;}
|
||||
|
||||
#coder {position:absolute;background:#DEDEDE;border:1px solid #000;margin:1em;padding:.5em;bottom:10px;right:10px;}
|
||||
#output {position:relative;width:30em;height:15em;margin-top:1em;}
|
||||
|
|
@ -1,200 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - Custom Sorting (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
#sort {margin:1em;}
|
||||
#sort table {border-collapse:collapse;}
|
||||
#sort th, #sort td {border:1px solid #000;}
|
||||
#sort th {background-color:#696969;}/*dark gray*/
|
||||
#sort th a {color:#fff;}
|
||||
#sort th .yui-dt-headtext {margin-right:5px;padding-right:15px;} /*room for arrow*/
|
||||
#sort .yui-dt-sortedbyasc, #sort .yui-dt-sortedbydesc {background-color:#3F3F3F;}/*dark gray*/
|
||||
#sort .yui-dt-sortedbyasc .yui-dt-headtext {background-image: url('img/arrow_up.gif'); background-repeat:no-repeat; background-position:right;}/*arrow up*/
|
||||
#sort .yui-dt-sortedbydesc .yui-dt-headtext {background-image: url('img/arrow_dn.gif'); background-repeat:no-repeat; background-position:right;}/*arrow down*/
|
||||
#sort .yui-dt-odd {background-color:#eee;} /*light gray zebra stripe*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Custom Sorting</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="sort"></div>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
YAHOO.example.Data.areacodes = [
|
||||
{areacode: "201", state: "New Jersey"},
|
||||
...,
|
||||
{areacode: "989", state: "Michigan"}
|
||||
];
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
#sort {margin:1em;}
|
||||
#sort table {border-collapse:collapse;}
|
||||
#sort th, #sort td {border:1px solid #000;}
|
||||
#sort th {background-color:#696969;}/*dark gray*/
|
||||
#sort th a {color:#fff;}
|
||||
#sort th .yui-dt-headtext {margin-right:5px;padding-right:15px;} /*room for arrow*/
|
||||
#sort .yui-dt-sortedbyasc, #sort .yui-dt-sortedbydesc {background-color:#3F3F3F;}/*dark gray*/
|
||||
#sort .yui-dt-sortedbyasc .yui-dt-headtext {background-image: url('img/arrow_up.gif'); background-repeat:no-repeat; background-position:right;}/*arrow up*/
|
||||
#sort .yui-dt-sortedbydesc .yui-dt-headtext {background-image: url('img/arrow_dn.gif'); background-repeat:no-repeat; background-position:right;}/*arrow down*/
|
||||
#sort .yui-dt-odd {background-color:#eee;} /*light gray zebra stripe*/
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="sort"></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
// Custom sort functionality to sort by areacode within states
|
||||
YAHOO.example.sortStatesAsc = function(a, b) {
|
||||
if((a === null) || (typeof a == "undefined")) {
|
||||
if((b === null) || (typeof b == "undefined")) {
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
else if((b === null) || (typeof b == "undefined")) {
|
||||
return -1;
|
||||
}
|
||||
var comp = YAHOO.util.Sort.compareAsc;
|
||||
var compState = comp(a.state, b.state);
|
||||
return (compState !== 0) ? compState : comp(a.areacode, b.areacode);
|
||||
};
|
||||
YAHOO.example.sortStatesDesc = function(a, b) {
|
||||
if((a === null) || (typeof a == "undefined")) {
|
||||
if((b === null) || (typeof b == "undefined")) {
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
else if((b === null) || (typeof b == "undefined")) {
|
||||
return 1;
|
||||
}
|
||||
var comp = YAHOO.util.Sort.compareDesc;
|
||||
var compState = comp(a.state, b.state);
|
||||
return (compState !== 0) ? compState : comp(a.areacode, b.areacode);
|
||||
};
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"areacode",text:"Area Codes",sortable:true},
|
||||
{key:"state",text:"States",sortable:true,sortOptions:{ascFunction:YAHOO.example.sortStatesAsc,descFunction:YAHOO.example.sortStatesDesc}}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["areacode","state"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("sort",myColumnSet,myDataSource,{caption:"Example: Custom Sorting",sortedBy:{colKey:"areacode",dir:"asc"}});
|
||||
var onColumnSort = function(oArgs) {
|
||||
var column = oArgs.column;
|
||||
var dir = oArgs.dir;
|
||||
};
|
||||
myDataTable.subscribe("columnSortEvent",onColumnSort);
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="./js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
|
||||
// Custom sort functionality to sort by areacode within states
|
||||
YAHOO.example.sortStatesAsc = function(a, b) {
|
||||
if((a === null) || (typeof a == "undefined")) {
|
||||
if((b === null) || (typeof b == "undefined")) {
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
else if((b === null) || (typeof b == "undefined")) {
|
||||
return -1;
|
||||
}
|
||||
var comp = YAHOO.util.Sort.compareAsc;
|
||||
var compState = comp(a.state, b.state);
|
||||
return (compState !== 0) ? compState : comp(a.areacode, b.areacode);
|
||||
};
|
||||
YAHOO.example.sortStatesDesc = function(a, b) {
|
||||
if((a === null) || (typeof a == "undefined")) {
|
||||
if((b === null) || (typeof b == "undefined")) {
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
else if((b === null) || (typeof b == "undefined")) {
|
||||
return 1;
|
||||
}
|
||||
var comp = YAHOO.util.Sort.compareDesc;
|
||||
var compState = comp(a.state, b.state);
|
||||
return (compState !== 0) ? compState : comp(a.areacode, b.areacode);
|
||||
};
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"areacode",text:"Area Codes",sortable:true},
|
||||
{key:"state",text:"States",sortable:true,sortOptions:{ascFunction:YAHOO.example.sortStatesAsc,descFunction:YAHOO.example.sortStatesDesc}}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["areacode","state"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("sort",myColumnSet,myDataSource,{caption:"Example: Custom Sorting",sortedBy:{colKey:"areacode",dir:"asc"}});
|
||||
var onColumnSort = function(oArgs) {
|
||||
var column = oArgs.column;
|
||||
var dir = oArgs.dir;
|
||||
};
|
||||
myDataTable.subscribe("columnSortEvent",onColumnSort);
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,208 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - Progressively Enhanced Table from Markup (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
#markup {margin:1em;}
|
||||
#markup table {border-collapse:collapse;}
|
||||
#markup th {border:1px solid #000;padding:.25em;background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#markup td {border-bottom:1px solid #000;padding:.25em;}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.enhanceFromMarkup = function() {
|
||||
this.logger = new YAHOO.widget.LogReader();
|
||||
|
||||
this.columnHeaders = [
|
||||
{key:"due",text:"Due Date",type:"date",sortable:true},
|
||||
{key:"account",text:"Account Number",sortable:true},
|
||||
{key:"quantity",text:"Quantity",type:"number",sortable:true},
|
||||
{key:"amount",text:"Amount Due",type:"currency",sortable:true}
|
||||
];
|
||||
this.columnSet = new YAHOO.widget.ColumnSet(this.columnHeaders);
|
||||
|
||||
var markup = YAHOO.util.Dom.get("markup");
|
||||
this.dataTable = new YAHOO.widget.DataTable(markup,this.columnSet,null,{caption:"Example: Progressively Enhanced Table from Markup"});
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable("markup",YAHOO.example.enhanceFromMarkup,YAHOO.example.enhanceFromMarkup,true);
|
||||
</script>
|
||||
</head>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Progressively Enhanced Table from Markup</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="markup">
|
||||
<table id="accounts">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Due Date</th>
|
||||
<th>Account Number</th>
|
||||
<th>Quantity</th>
|
||||
<th>Amount Due</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1/23/1999</td>
|
||||
<td>29e8548592d8c82</td>
|
||||
<td>12</td>
|
||||
<td>$150.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5/19/1999</td>
|
||||
<td>83849</td>
|
||||
<td>8</td>
|
||||
<td>$60.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8/9/1999</td>
|
||||
<td>11348</td>
|
||||
<td>1</td>
|
||||
<td>$34.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1/23/2000</td>
|
||||
<td>29e8548592d8c82</td>
|
||||
<td>10</td>
|
||||
<td>$150.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4/28/2000</td>
|
||||
<td>37892857482836437378273</td>
|
||||
<td>123</td>
|
||||
<td>$33.32</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1/23/2001</td>
|
||||
<td>83849</td>
|
||||
<td>5</td>
|
||||
<td>$150.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9/30/2001</td>
|
||||
<td>224747</td>
|
||||
<td>14</td>
|
||||
<td>$56.78</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
#markup {margin:1em;}
|
||||
#markup table {border-collapse:collapse;}
|
||||
#markup th {border:1px solid #000;padding:.25em;background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#markup td {border-bottom:1px solid #000;padding:.25em;}
|
||||
</textarea>
|
||||
|
||||
<p>Markup (and data):</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="markup">
|
||||
<table id="accounts">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Due Date</th>
|
||||
<th>Account Number</th>
|
||||
<th>Quantity</th>
|
||||
<th>Amount Due</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1/23/1999</td>
|
||||
<td>29e8548592d8c82</td>
|
||||
<td>12</td>
|
||||
<td>$150.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5/19/1999</td>
|
||||
<td>83849</td>
|
||||
<td>8</td>
|
||||
<td>$60.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8/9/1999</td>
|
||||
<td>11348</td>
|
||||
<td>1</td>
|
||||
<td>$34.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1/23/2000</td>
|
||||
<td>29e8548592d8c82</td>
|
||||
<td>10</td>
|
||||
<td>$150.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4/28/2000</td>
|
||||
<td>37892857482836437378273</td>
|
||||
<td>123</td>
|
||||
<td>$33.32</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1/23/2001</td>
|
||||
<td>83849</td>
|
||||
<td>5</td>
|
||||
<td>$150.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9/30/2001</td>
|
||||
<td>224747</td>
|
||||
<td>14</td>
|
||||
<td>$56.78</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
YAHOO.example.enhanceFromMarkup = function() {
|
||||
this.logger = new YAHOO.widget.LogReader();
|
||||
|
||||
this.columnHeaders = [
|
||||
{key:"due",text:"Due Date",type:"date",sortable:true},
|
||||
{key:"account",text:"Account Number",sortable:true},
|
||||
{key:"quantity",text:"Quantity",type:"number",sortable:true},
|
||||
{key:"amount",text:"Amount Due",type:"currency",sortable:true}
|
||||
];
|
||||
this.columnSet = new YAHOO.widget.ColumnSet(this.columnHeaders);
|
||||
|
||||
var markup = YAHOO.util.Dom.get("markup");
|
||||
this.dataTable = new YAHOO.widget.DataTable(markup,this.columnSet,null,{caption:"Example: Progressively Enhanced Table from Markup"});
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable("markup",YAHOO.example.enhanceFromMarkup,YAHOO.example.enhanceFromMarkup,true);
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends --></div>
|
||||
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,157 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - Custom Formatting (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
#formatting {margin:1em;}
|
||||
#formatting table {border-collapse:collapse;}
|
||||
#formatting th, #formatting td {border:1px solid #000;padding:.25em;}
|
||||
#formatting th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#formatting .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
|
||||
#formatting .unread {font-weight:bold;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Custom Formatting</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="formatting"></div>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
YAHOO.example.Data.emails = {
|
||||
account:"jenny@yahoo.com",
|
||||
currStorage: 10,
|
||||
maxStorage: 200,
|
||||
messages: [
|
||||
{XID: "9897",Date:new Date(1981, 2, 24),To:"Joe",From:"Jenny",Unread:false,Subject:"Check out my new pictures"},
|
||||
{XID: "7899",Date:new Date(1980, 1, 11),To:"Jane",From:"Jenny",Unread:false,Subject:"Let's have lunch"},
|
||||
{XID: "6789",Date:new Date(1978, 11, 12),To:"Ann",From:"Jenny",Unread:false,Subject:"Here's the info you requested"},
|
||||
{XID: "4996",Date:new Date(1974, 1, 11),To:"Bob",From:"Jenny",Unread:true,Subject:"RE: Let's have lunch"},
|
||||
{XID: "4544",Date:new Date(1974, 1, 10),To:"Charlie",From:"Jenny",Unread:false,Subject:"Birthday party Saturday"}
|
||||
]
|
||||
};
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
#formatting {margin:1em;}
|
||||
#formatting table {border-collapse:collapse;}
|
||||
#formatting th, #formatting td {border:1px solid #000;padding:.25em;}
|
||||
#formatting th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#formatting .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
|
||||
#formatting .unread {font-weight:bold;}
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="formatting"></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
// Define a custom formatter for the "New" column
|
||||
var myFormatter = function(elCell, oRecord, oColumn, oData) {
|
||||
if(oRecord["Unread"]) {
|
||||
elCell.innerHTML = "X"; // show an "X" in the column
|
||||
YAHOO.util.Dom.addClass(elCell.parentNode, "unread"); // style the row
|
||||
}
|
||||
};
|
||||
|
||||
// Override the built-in link formatter
|
||||
YAHOO.widget.Column.formatLink = function(elCell, oRecord, oColumn, oData) {
|
||||
var user = oData;
|
||||
elCell.innerHTML = "<a href=\"mailto:" + user + "@foo.com\">" + user + "</a>";
|
||||
};
|
||||
|
||||
var myColumnHeaders = [
|
||||
{text:"New",formatter:myFormatter}, // use a custom formatter
|
||||
{key:"Date",type:"date"}, // use a built-in formatter
|
||||
{key:"To", type:"link"}, // override the built-in formatter
|
||||
{key:"Subject"}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.emails);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
||||
myDataSource.responseSchema = {
|
||||
resultsList: ["messages"],
|
||||
fields: ["Date","To","From","Subject","XID","Date","Unread"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("formatting",myColumnSet,myDataSource,{caption:"Example: Custom Formatting"});
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="./js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
|
||||
// Define a custom formatter for the "New" column
|
||||
var myFormatter = function(elCell, oRecord, oColumn, oData) {
|
||||
if(oRecord["Unread"]) {
|
||||
elCell.innerHTML = "X"; // show an "X" in the column
|
||||
YAHOO.util.Dom.addClass(elCell.parentNode, "unread"); // style the row
|
||||
}
|
||||
};
|
||||
|
||||
// Override the built-in formatter
|
||||
YAHOO.widget.Column.formatLink = function(elCell, oRecord, oColumn, oData) {
|
||||
var user = oData;
|
||||
elCell.innerHTML = "<a href=\"mailto:" + user + "@foo.com\">" + user + "</a>";
|
||||
};
|
||||
|
||||
var myColumnHeaders = [
|
||||
{text:"New",formatter:myFormatter}, // use a custom formatter
|
||||
{key:"Date",type:"date"}, // use a built-in formatter
|
||||
{key:"To", type:"link"}, // override the built-in formatter
|
||||
{key:"Subject"}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.emails);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
||||
myDataSource.responseSchema = {
|
||||
resultsList: ["messages"],
|
||||
fields: ["Date","To","From","Subject","XID","Date","Unread"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("formatting",myColumnSet,myDataSource,{caption:"Example: Custom Formatting"});
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 61 B |
Binary file not shown.
|
Before Width: | Height: | Size: 61 B |
Binary file not shown.
|
Before Width: | Height: | Size: 705 B |
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>DataTable Widget :: Implementation Examples</title>
|
||||
<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
|
||||
<link rel="stylesheet" href="./css/examples.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
ul {margin:1em;}
|
||||
li {margin:1em;list-style-type:none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/>DataTable Widget :: Implementation Examples</h1>
|
||||
</div>
|
||||
|
||||
<div id="bd">
|
||||
<ul>
|
||||
<li><a href="./basic.html">Basic Table From Local Data</a></li>
|
||||
<li><a href="./enhanced.html">From Existing Markup</a></li>
|
||||
|
||||
<li><a href="./xhrjson.html">From JSON Data Over XHR</a></li>
|
||||
<li><a href="./xhrxml.html">From XML Data Over XHR</a></li>
|
||||
<li><a href="./xhrtext.html">From Text Data Over XHR</a></li>
|
||||
|
||||
<li><a href="./formatting.html">Custom Formatting</a></li>
|
||||
<li><a href="./nestedheaders.html">Nested Headers</a></li>
|
||||
<li><a href="./customsort.html">Custom Sorting</a></li>
|
||||
<li><a href="./paginated.html">Client-side Pagination of Large RecordSet</a></li>
|
||||
<li><a href="./scrolling.html">Scrolling</a></li>
|
||||
<li><a href="./rowselect.html">Row Selection</a></li>
|
||||
<li><a href="./inlineediting.html">Inline Editing</a></li>
|
||||
<li><a href="./contextmenu.html">Integration with ContextMenu</a></li>
|
||||
<li><a href="./complex.html">Complex Table</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -1,150 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - Inline Editing (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
#editing {margin:1em;}
|
||||
#editing table {border-collapse:collapse;}
|
||||
#editing th, #editing td {border:1px solid #000;padding:.25em;}
|
||||
#editing th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#editing .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
#editing .yui-dt-editable.yui-dt-highlight {background-color:#BEDAFF;} /*light blue*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Inline Editing</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="editing"></div>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
YAHOO.example.Data.inventory = [
|
||||
{SKU:"23-23874", Quantity:43, Item:"Helmet", Description:"Red baseball helmet. Size: Large."},
|
||||
{SKU:"48-38835", Quantity:84, Item:"Football", Description:"Leather football."},
|
||||
{SKU:"84-84848", Quantity:31, Item:"Goggles", Description:"Light blue swim goggles"},
|
||||
{SKU:"84-84843", Quantity:56, Item:"Badminton Set", Description:"Set of 2 badminton rackets, net, and 3 birdies."},
|
||||
{SKU:"84-39321", Quantity:128, Item:"Tennis Balls", Description:"Canister of 3 tennis balls."},
|
||||
{SKU:"39-48949", Quantity:55, Item:"Snowboard", Description:""},
|
||||
{SKU:"99-28128", Quantity:77, Item:"Cleats", Description:"Soccer cleats. Size: 10."},
|
||||
{SKU:"83-48281", Quantity:65, Item:"Volleyball", Description:""},
|
||||
{SKU:"89-32811", Quantity:67, Item:"Sweatband", Description:"Blue sweatband. Size: Medium."},
|
||||
{SKU:"28-22847", Quantity:43, Item:"Golf Set", Description:"Set of 9 golf clubs and bag."},
|
||||
{SKU:"38-38281", Quantity:35, Item:"Basketball Shorts", Description:"Green basketball shorts. Size: Small."},
|
||||
{SKU:"82-38333", Quantity:288, Item:"Lip balm", Description:"Lip balm. Flavor: Cherry."},
|
||||
{SKU:"21-38485", Quantity:177, Item:"Ping Pong Ball", Description:""},
|
||||
{SKU:"83-38285", Quantity:87, Item:"Hockey Puck", Description:"Glow-in-the-dark hockey puck."}
|
||||
];
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
#editing {margin:1em;}
|
||||
#editing table {border-collapse:collapse;}
|
||||
#editing th, #editing td {border:1px solid #000;padding:.25em;}
|
||||
#editing th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#editing .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
#editing .yui-dt-editable.yui-dt-highlight {background-color:#BEDAFF;} /*light blue*/
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="editing"></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var myColumnHeaders = [
|
||||
{key:"SKU"},
|
||||
{key:"Quantity",editor:"textbox"},
|
||||
{key:"Item",editor:"textbox"},
|
||||
{key:"Description",editor:"textarea"}
|
||||
];
|
||||
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.inventory);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["SKU","Quantity","Item","Description"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("editing", myColumnSet, myDataSource,{caption:"Example: Inline Editing"});
|
||||
myDataTable.subscribe("cellClickEvent",myDataTable.onEventEditCell);
|
||||
myDataTable.subscribe("cellMouseoverEvent",myDataTable.onEventHighlightCell);
|
||||
myDataTable.subscribe("cellMouseoutEvent",myDataTable.onEventUnhighlightCell);
|
||||
|
||||
var onCellEdit = function(oArgs) {
|
||||
YAHOO.log("Cell \"" + oArgs.target.id +
|
||||
"\" was updated from \"" + oArgs.oldData + "\" to \"" +
|
||||
oArgs.newData + "\"", "info", this.toString());
|
||||
}
|
||||
myDataTable.subscribe("cellEditEvent",onCellEdit);
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="./js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
var myColumnHeaders = [
|
||||
{key:"SKU"},
|
||||
{key:"Quantity",editor:"textbox"},
|
||||
{key:"Item",editor:"textbox"},
|
||||
{key:"Description",editor:"textarea"}
|
||||
];
|
||||
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.inventory);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["SKU","Quantity","Item","Description"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("editing", myColumnSet, myDataSource,{caption:"Example: Inline Editing"});
|
||||
myDataTable.subscribe("cellClickEvent",myDataTable.onEventEditCell);
|
||||
myDataTable.subscribe("cellMouseoverEvent",myDataTable.onEventHighlightCell);
|
||||
myDataTable.subscribe("cellMouseoutEvent",myDataTable.onEventUnhighlightCell);
|
||||
|
||||
var onCellEdit = function(oArgs) {
|
||||
YAHOO.log("Cell \"" + oArgs.target.id +
|
||||
"\" was updated from \"" + oArgs.oldData + "\" to \"" +
|
||||
oArgs.newData + "\"", "info", this.toString());
|
||||
}
|
||||
myDataTable.subscribe("cellEditEvent",onCellEdit);
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
430
www/extras/yui/examples/datatable/js/data.js
vendored
430
www/extras/yui/examples/datatable/js/data.js
vendored
|
|
@ -1,430 +0,0 @@
|
|||
YAHOO.example.Data = {
|
||||
webstats: [
|
||||
["home.html",20,400,44,657],
|
||||
["blog.html",24,377,97,567],
|
||||
["contact.html",32,548,42,543],
|
||||
["about.html",8,465,12,946]
|
||||
],
|
||||
|
||||
emails: {
|
||||
account:"jenny@yahoo.com",
|
||||
currStorage: 10,
|
||||
maxStorage: 200,
|
||||
messages: [
|
||||
{XID: "9897",Date:new Date(1981, 2, 24),To:"Joe",From:"Jenny",Unread:false,Subject:"Check out my new pictures"},
|
||||
{XID: "7899",Date:new Date(1980, 1, 11),To:"Jane",From:"Jenny",Unread:false,Subject:"Let's have lunch"},
|
||||
{XID: "6789",Date:new Date(1978, 11, 12),To:"Ann",From:"Jenny",Unread:false,Subject:"Here's the info you requested"},
|
||||
{XID: "4996",Date:new Date(1974, 1, 11),To:"Bob",From:"Jenny",Unread:true,Subject:"RE: Let's have lunch"},
|
||||
{XID: "4544",Date:new Date(1974, 1, 10),To:"Charlie",From:"Jenny",Unread:false,Subject:"Birthday party Saturday"}
|
||||
]
|
||||
},
|
||||
|
||||
inventory: [
|
||||
{SKU:"23-23874", Quantity:43, Item:"Helmet", Description:"Red baseball helmet. Size: Large."},
|
||||
{SKU:"48-38835", Quantity:84, Item:"Football", Description:"Leather football."},
|
||||
{SKU:"84-84848", Quantity:31, Item:"Goggles", Description:"Light blue swim goggles"},
|
||||
{SKU:"84-84843", Quantity:56, Item:"Badminton Set", Description:"Set of 2 badminton rackets, net, and 3 birdies."},
|
||||
{SKU:"84-39321", Quantity:128, Item:"Tennis Balls", Description:"Canister of 3 tennis balls."},
|
||||
{SKU:"39-48949", Quantity:55, Item:"Snowboard", Description:""},
|
||||
{SKU:"99-28128", Quantity:77, Item:"Cleats", Description:"Soccer cleats. Size: 10."},
|
||||
{SKU:"83-48281", Quantity:65, Item:"Volleyball", Description:""},
|
||||
{SKU:"89-32811", Quantity:67, Item:"Sweatband", Description:"Blue sweatband. Size: Medium."},
|
||||
{SKU:"28-22847", Quantity:43, Item:"Golf Set", Description:"Set of 9 golf clubs and bag."},
|
||||
{SKU:"38-38281", Quantity:35, Item:"Basketball Shorts", Description:"Green basketball shorts. Size: Small."},
|
||||
{SKU:"82-38333", Quantity:288, Item:"Lip balm", Description:"Lip balm. Flavor: Cherry."},
|
||||
{SKU:"21-38485", Quantity:177, Item:"Ping Pong Ball", Description:""},
|
||||
{SKU:"83-38285", Quantity:87, Item:"Hockey Puck", Description:"Glow-in-the-dark hockey puck."}
|
||||
],
|
||||
|
||||
bookorders: [
|
||||
{id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing"},
|
||||
{id:"po-0297", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life"},
|
||||
{id:"po-0783", 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"}
|
||||
],
|
||||
|
||||
areacodes: [
|
||||
{areacode: "201", state: "New Jersey"},
|
||||
{areacode: "202", state: "Washington, DC"},
|
||||
{areacode: "203", state: "Connecticut"},
|
||||
{areacode: "204", state: "Manitoba, Canada"},
|
||||
{areacode: "205", state: "Alabama"},
|
||||
{areacode: "206", state: "Washington"},
|
||||
{areacode: "207", state: "Maine"},
|
||||
|
||||
{areacode: "208", state: "Idaho"},
|
||||
{areacode: "209", state: "California"},
|
||||
{areacode: "210", state: "Texas"},
|
||||
{areacode: "212", state: "New York"},
|
||||
{areacode: "213", state: "California"},
|
||||
{areacode: "214", state: "Texas"},
|
||||
|
||||
{areacode: "215", state: "Pennsylvania"},
|
||||
{areacode: "216", state: "Ohio"},
|
||||
{areacode: "217", state: "Illinois"},
|
||||
{areacode: "218", state: "Minnesota"},
|
||||
{areacode: "219", state: "Indiana"},
|
||||
{areacode: "224", state: "Illinois"},
|
||||
|
||||
{areacode: "225", state: "Louisiana"},
|
||||
{areacode: "227", state: "Maryland"},
|
||||
{areacode: "228", state: "Mississippi"},
|
||||
{areacode: "229", state: "Georgia"},
|
||||
{areacode: "231", state: "Michigan"},
|
||||
{areacode: "234", state: "Ohio"},
|
||||
|
||||
{areacode: "239", state: "Florida"},
|
||||
{areacode: "240", state: "Maryland"},
|
||||
{areacode: "242", state: "Bahamas"},
|
||||
{areacode: "246", state: "Barbados"},
|
||||
{areacode: "248", state: "Michigan"},
|
||||
{areacode: "250", state: "British Columbia"},
|
||||
|
||||
{areacode: "251", state: "Alabama"},
|
||||
{areacode: "252", state: "North Carolina"},
|
||||
{areacode: "253", state: "Washington"},
|
||||
{areacode: "254", state: "Texas"},
|
||||
{areacode: "256", state: "Alabama"},
|
||||
{areacode: "260", state: "Indiana"},
|
||||
|
||||
{areacode: "262", state: "Wisconsin"},
|
||||
{areacode: "264", state: "Anguilla"},
|
||||
{areacode: "267", state: "Pennsylvania"},
|
||||
{areacode: "268", state: "Antigua and Barbuda"},
|
||||
{areacode: "269", state: "Michigan"},
|
||||
{areacode: "270", state: "Kentucky"},
|
||||
|
||||
{areacode: "276", state: "Virginia"},
|
||||
{areacode: "281", state: "Texas"},
|
||||
{areacode: "283", state: "Ohio"},
|
||||
{areacode: "284", state: "British Virgin Islands"},
|
||||
{areacode: "289", state: "Ontario"},
|
||||
{areacode: "301", state: "Maryland"},
|
||||
|
||||
{areacode: "302", state: "Delaware"},
|
||||
{areacode: "303", state: "Colorado"},
|
||||
{areacode: "304", state: "West Virginia"},
|
||||
{areacode: "305", state: "Florida"},
|
||||
{areacode: "306", state: "Saskatchewan, Canada"},
|
||||
{areacode: "307", state: "Wyoming"},
|
||||
|
||||
{areacode: "308", state: "Nebraska"},
|
||||
{areacode: "309", state: "Illinois"},
|
||||
{areacode: "310", state: "California"},
|
||||
{areacode: "312", state: "Illinois"},
|
||||
{areacode: "313", state: "Michigan"},
|
||||
{areacode: "314", state: "Missouri"},
|
||||
|
||||
{areacode: "315", state: "New York"},
|
||||
{areacode: "316", state: "Kansas"},
|
||||
{areacode: "317", state: "Indiana"},
|
||||
{areacode: "318", state: "Louisiana"},
|
||||
{areacode: "319", state: "Iowa"},
|
||||
{areacode: "320", state: "Minnesota"},
|
||||
|
||||
{areacode: "321", state: "Florida"},
|
||||
{areacode: "323", state: "California"},
|
||||
{areacode: "330", state: "Ohio"},
|
||||
{areacode: "331", state: "Illinois"},
|
||||
{areacode: "334", state: "Alabama"},
|
||||
{areacode: "336", state: "North Carolina"},
|
||||
|
||||
{areacode: "337", state: "Louisiana"},
|
||||
{areacode: "339", state: "Massachusetts"},
|
||||
{areacode: "340", state: "US Virgin Islands"},
|
||||
{areacode: "345", state: "Cayman Islands"},
|
||||
{areacode: "347", state: "New York"},
|
||||
{areacode: "351", state: "Massachusetts"},
|
||||
|
||||
{areacode: "352", state: "Florida"},
|
||||
{areacode: "360", state: "Washington"},
|
||||
{areacode: "361", state: "Texas"},
|
||||
{areacode: "386", state: "Florida"},
|
||||
{areacode: "401", state: "Rhode Island"},
|
||||
{areacode: "402", state: "Nebraska"},
|
||||
|
||||
{areacode: "403", state: "Alberta, Canada"},
|
||||
{areacode: "404", state: "Georgia"},
|
||||
{areacode: "405", state: "Oklahoma"},
|
||||
{areacode: "406", state: "Montana"},
|
||||
{areacode: "407", state: "Florida"},
|
||||
{areacode: "408", state: "California"},
|
||||
|
||||
{areacode: "409", state: "Texas"},
|
||||
{areacode: "410", state: "Maryland"},
|
||||
{areacode: "412", state: "Pennsylvania"},
|
||||
{areacode: "413", state: "Massachusetts"},
|
||||
{areacode: "414", state: "Wisconsin"},
|
||||
{areacode: "415", state: "California"},
|
||||
|
||||
{areacode: "416", state: "Ontario, Canada"},
|
||||
{areacode: "417", state: "Missouri"},
|
||||
{areacode: "418", state: "Quebec, Canada"},
|
||||
{areacode: "419", state: "Ohio"},
|
||||
{areacode: "423", state: "Tennessee"},
|
||||
{areacode: "424", state: "California"},
|
||||
|
||||
{areacode: "425", state: "Washington"},
|
||||
{areacode: "434", state: "Virginia"},
|
||||
{areacode: "435", state: "Utah"},
|
||||
{areacode: "440", state: "Ohio"},
|
||||
{areacode: "441", state: "Bermuda"},
|
||||
{areacode: "443", state: "Maryland"},
|
||||
|
||||
{areacode: "445", state: "Pennsylvania"},
|
||||
{areacode: "450", state: "Quebec, Canada"},
|
||||
{areacode: "464", state: "Illinois"},
|
||||
{areacode: "469", state: "Texas"},
|
||||
{areacode: "470", state: "Georgia"},
|
||||
{areacode: "473", state: "Grenada"},
|
||||
|
||||
{areacode: "475", state: "Connecticut"},
|
||||
{areacode: "478", state: "Georgia"},
|
||||
{areacode: "479", state: "Arkansas"},
|
||||
{areacode: "480", state: "Arizona"},
|
||||
{areacode: "484", state: "Pennsylvania"},
|
||||
{areacode: "501", state: "Arkansas"},
|
||||
|
||||
{areacode: "502", state: "Kentucky"},
|
||||
{areacode: "503", state: "Oregon"},
|
||||
{areacode: "504", state: "Louisiana"},
|
||||
{areacode: "505", state: "New Mexico"},
|
||||
{areacode: "506", state: "New Brunswick, Canada"},
|
||||
{areacode: "507", state: "Minnesota"},
|
||||
|
||||
{areacode: "508", state: "Massachusetts"},
|
||||
{areacode: "509", state: "Washington"},
|
||||
{areacode: "510", state: "California"},
|
||||
{areacode: "512", state: "Texas"},
|
||||
{areacode: "513", state: "Ohio"},
|
||||
{areacode: "514", state: "Quebec, Canada"},
|
||||
|
||||
{areacode: "515", state: "Iowa"},
|
||||
{areacode: "516", state: "New York"},
|
||||
{areacode: "517", state: "Michigan"},
|
||||
{areacode: "518", state: "New York"},
|
||||
{areacode: "519", state: "Ontario, Canada"},
|
||||
{areacode: "520", state: "Arizona"},
|
||||
|
||||
{areacode: "530", state: "California"},
|
||||
{areacode: "540", state: "Virginia"},
|
||||
{areacode: "541", state: "Oregon"},
|
||||
{areacode: "551", state: "New Jersey"},
|
||||
{areacode: "557", state: "Missouri"},
|
||||
{areacode: "559", state: "California"},
|
||||
|
||||
{areacode: "561", state: "Florida"},
|
||||
{areacode: "562", state: "California"},
|
||||
{areacode: "563", state: "Iowa"},
|
||||
{areacode: "564", state: "Washington"},
|
||||
{areacode: "567", state: "Ohio"},
|
||||
{areacode: "570", state: "Pennsylvania"},
|
||||
|
||||
{areacode: "571", state: "Virginia"},
|
||||
{areacode: "573", state: "Missouri"},
|
||||
{areacode: "574", state: "Indiana"},
|
||||
{areacode: "580", state: "Oklahoma"},
|
||||
{areacode: "585", state: "New York"},
|
||||
{areacode: "586", state: "Michigan"},
|
||||
|
||||
{areacode: "601", state: "Mississippi"},
|
||||
{areacode: "602", state: "Arizona"},
|
||||
{areacode: "603", state: "New Hampshire"},
|
||||
{areacode: "604", state: "British Columbia, Canada"},
|
||||
{areacode: "605", state: "South Dakota"},
|
||||
{areacode: "606", state: "Kentucky"},
|
||||
|
||||
{areacode: "607", state: "New York"},
|
||||
{areacode: "608", state: "Wisconsin"},
|
||||
{areacode: "609", state: "New Jersey"},
|
||||
{areacode: "610", state: "Pennsylvania"},
|
||||
{areacode: "612", state: "Minnesota"},
|
||||
{areacode: "613", state: "Ontario, Canada"},
|
||||
|
||||
{areacode: "614", state: "Ohio"},
|
||||
{areacode: "615", state: "Tennessee"},
|
||||
{areacode: "616", state: "Michigan"},
|
||||
{areacode: "617", state: "Massachusetts"},
|
||||
{areacode: "618", state: "Illinois"},
|
||||
{areacode: "619", state: "California"},
|
||||
|
||||
{areacode: "620", state: "Kansas"},
|
||||
{areacode: "623", state: "Arizona"},
|
||||
{areacode: "626", state: "California"},
|
||||
{areacode: "630", state: "Illinois"},
|
||||
{areacode: "631", state: "New York"},
|
||||
{areacode: "636", state: "Missouri"},
|
||||
|
||||
{areacode: "641", state: "Iowa"},
|
||||
{areacode: "646", state: "New York"},
|
||||
{areacode: "647", state: "Ontario, Canada"},
|
||||
{areacode: "649", state: "Turks and Caicos Islands"},
|
||||
{areacode: "650", state: "California"},
|
||||
{areacode: "651", state: "Minnesota"},
|
||||
|
||||
{areacode: "660", state: "Missouri"},
|
||||
{areacode: "661", state: "California"},
|
||||
{areacode: "662", state: "Mississippi"},
|
||||
{areacode: "664", state: "Montserrat"},
|
||||
{areacode: "667", state: "Maryland"},
|
||||
{areacode: "670", state: "CNMI"},
|
||||
|
||||
{areacode: "671", state: "Guam"},
|
||||
{areacode: "678", state: "Georgia"},
|
||||
{areacode: "682", state: "Texas"},
|
||||
{areacode: "701", state: "North Dakota"},
|
||||
{areacode: "702", state: "Nevada"},
|
||||
{areacode: "703", state: "Virginia"},
|
||||
|
||||
{areacode: "704", state: "North Carolina"},
|
||||
{areacode: "705", state: "Ontario, Canada"},
|
||||
{areacode: "706", state: "Georgia"},
|
||||
{areacode: "707", state: "California"},
|
||||
{areacode: "708", state: "Illinois"},
|
||||
{areacode: "709", state: "Newfoundland, Canada"},
|
||||
|
||||
{areacode: "712", state: "Iowa"},
|
||||
{areacode: "713", state: "Texas"},
|
||||
{areacode: "714", state: "California"},
|
||||
{areacode: "715", state: "Wisconsin"},
|
||||
{areacode: "716", state: "New York"},
|
||||
{areacode: "717", state: "Pennsylvania"},
|
||||
|
||||
{areacode: "718", state: "New York"},
|
||||
{areacode: "719", state: "Colorado"},
|
||||
{areacode: "720", state: "Colorado"},
|
||||
{areacode: "724", state: "Pennsylvania"},
|
||||
{areacode: "727", state: "Florida"},
|
||||
{areacode: "731", state: "Tennessee"},
|
||||
|
||||
{areacode: "732", state: "New Jersey"},
|
||||
{areacode: "734", state: "Michigan"},
|
||||
{areacode: "737", state: "Texas"},
|
||||
{areacode: "740", state: "Ohio"},
|
||||
{areacode: "754", state: "Florida"},
|
||||
{areacode: "757", state: "Viriginia"},
|
||||
|
||||
{areacode: "758", state: "St. Lucia"},
|
||||
{areacode: "760", state: "California"},
|
||||
{areacode: "763", state: "Minnesota"},
|
||||
{areacode: "765", state: "Indiana"},
|
||||
{areacode: "767", state: "Dominica"},
|
||||
{areacode: "770", state: "Georgia"},
|
||||
|
||||
{areacode: "772", state: "Florida"},
|
||||
{areacode: "773", state: "Illinois"},
|
||||
{areacode: "774", state: "Massachusetts"},
|
||||
{areacode: "775", state: "Nevada"},
|
||||
{areacode: "778", state: "British Columbia, Canada"},
|
||||
{areacode: "780", state: "Alberta, Canada"},
|
||||
|
||||
{areacode: "781", state: "Massachusetts"},
|
||||
{areacode: "784", state: "St. Vincent & Gren."},
|
||||
{areacode: "785", state: "Kansas"},
|
||||
{areacode: "786", state: "Florida"},
|
||||
{areacode: "787", state: "Puerto Rico"},
|
||||
|
||||
{areacode: "801", state: "Utah"},
|
||||
{areacode: "802", state: "Vermont"},
|
||||
{areacode: "803", state: "South Carolina"},
|
||||
{areacode: "804", state: "Virginia"},
|
||||
{areacode: "805", state: "California"},
|
||||
{areacode: "806", state: "Texas"},
|
||||
|
||||
{areacode: "807", state: "Ontario, Canada"},
|
||||
{areacode: "808", state: "Hawaii"},
|
||||
{areacode: "809", state: "Dominican Republic"},
|
||||
{areacode: "810", state: "Michigan"},
|
||||
{areacode: "812", state: "Indiana"},
|
||||
{areacode: "813", state: "Florida"},
|
||||
|
||||
{areacode: "814", state: "Pennsylvania"},
|
||||
{areacode: "815", state: "Illinois"},
|
||||
{areacode: "816", state: "Missouri"},
|
||||
{areacode: "817", state: "Texas"},
|
||||
{areacode: "818", state: "California"},
|
||||
{areacode: "819", state: "Quebec, Canada"},
|
||||
|
||||
{areacode: "828", state: "North Carolina"},
|
||||
{areacode: "830", state: "Texas"},
|
||||
{areacode: "831", state: "California"},
|
||||
{areacode: "832", state: "Texas"},
|
||||
{areacode: "835", state: "Pennsylvania"},
|
||||
{areacode: "843", state: "South Carolina"},
|
||||
|
||||
{areacode: "845", state: "New York"},
|
||||
{areacode: "847", state: "Illinois"},
|
||||
{areacode: "848", state: "New Jersey"},
|
||||
{areacode: "850", state: "Florida"},
|
||||
{areacode: "856", state: "New Jersey"},
|
||||
{areacode: "857", state: "Massachusetts"},
|
||||
|
||||
{areacode: "858", state: "California"},
|
||||
{areacode: "859", state: "Kentucky"},
|
||||
{areacode: "860", state: "Connecticut"},
|
||||
{areacode: "862", state: "New Jersey"},
|
||||
{areacode: "863", state: "Florida"},
|
||||
{areacode: "864", state: "South Carolina"},
|
||||
|
||||
{areacode: "865", state: "Tennessee"},
|
||||
{areacode: "867", state: "Yukon, NW Territories, Canada"},
|
||||
{areacode: "868", state: "Trinidad and Tobago"},
|
||||
{areacode: "869", state: "St. Kitts & Nevis"},
|
||||
{areacode: "870", state: "Arkansas"},
|
||||
|
||||
{areacode: "872", state: "Illinois"},
|
||||
{areacode: "876", state: "Jamaica"},
|
||||
{areacode: "878", state: "Pennsylvania"},
|
||||
{areacode: "901", state: "Tennessee"},
|
||||
{areacode: "902", state: "Nova Scotia, Canada"},
|
||||
{areacode: "903", state: "Texas"},
|
||||
|
||||
{areacode: "904", state: "Florida"},
|
||||
{areacode: "905", state: "Ontario, Canada"},
|
||||
{areacode: "906", state: "Michigan"},
|
||||
{areacode: "907", state: "Alaska"},
|
||||
{areacode: "908", state: "New Jersey"},
|
||||
{areacode: "909", state: "California"},
|
||||
|
||||
{areacode: "910", state: "North Carolina"},
|
||||
{areacode: "912", state: "Georgia"},
|
||||
{areacode: "913", state: "Kansas"},
|
||||
{areacode: "914", state: "New York"},
|
||||
{areacode: "915", state: "Texas"},
|
||||
{areacode: "916", state: "California"},
|
||||
|
||||
{areacode: "917", state: "New York"},
|
||||
{areacode: "918", state: "Oklahoma"},
|
||||
{areacode: "919", state: "North Carolina"},
|
||||
{areacode: "920", state: "Wisconsin"},
|
||||
{areacode: "925", state: "California"},
|
||||
{areacode: "928", state: "Arizona"},
|
||||
|
||||
{areacode: "931", state: "Tennessee"},
|
||||
{areacode: "936", state: "Texas"},
|
||||
{areacode: "937", state: "Ohio"},
|
||||
{areacode: "939", state: "Puerto Rico"},
|
||||
{areacode: "940", state: "Texas"},
|
||||
{areacode: "941", state: "Florida"},
|
||||
|
||||
{areacode: "947", state: "Michigan"},
|
||||
{areacode: "949", state: "California"},
|
||||
{areacode: "952", state: "Minnesota"},
|
||||
{areacode: "954", state: "Florida"},
|
||||
{areacode: "956", state: "Texas"},
|
||||
{areacode: "959", state: "Connecticut"},
|
||||
|
||||
{areacode: "970", state: "Colorado"},
|
||||
{areacode: "971", state: "Oregon"},
|
||||
{areacode: "972", state: "Texas"},
|
||||
{areacode: "973", state: "New Jersey"},
|
||||
{areacode: "975", state: "Missouri"},
|
||||
{areacode: "978", state: "Massachusetts"},
|
||||
|
||||
{areacode: "979", state: "Texas"},
|
||||
{areacode: "980", state: "North Carolina"},
|
||||
{areacode: "984", state: "North Carolina"},
|
||||
{areacode: "985", state: "Louisiana"},
|
||||
{areacode: "989", state: "Michigan"}
|
||||
]
|
||||
};
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - Nested Headers (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
#nested {margin:1em;}
|
||||
#nested table {border-collapse:collapse;}
|
||||
#nested th, #nested td {border:1px solid #000;padding:.25em;}
|
||||
#nested th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#nested .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Nested Headers</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="nested"></div>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
YAHOO.example.Data.webstats = [
|
||||
["home.html",20,400,44,657],
|
||||
["blog.html",24,377,97,567],
|
||||
["contact.html",32,548,42,543],
|
||||
["about.html",8,465,12,946]
|
||||
];
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
#nested {margin:1em;}
|
||||
#nested table {border-collapse:collapse;}
|
||||
#nested th, #nested td {border:1px solid #000;padding:.25em;}
|
||||
#nested th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#nested .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="nested"></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var myColumnHeaders = [
|
||||
{key:"page", text:"Page"},
|
||||
{text:"Statistics", type:"number", children:[
|
||||
{text:"Visits",
|
||||
children: [
|
||||
{key:"visitsmonth", text:"This Month"},
|
||||
{key:"visitsytd", text:"YTD", abbr:"Year to Date"}
|
||||
]
|
||||
},
|
||||
{text:"Views",
|
||||
children: [
|
||||
{key:"viewsmonth", text:"This Month"},
|
||||
{key:"viewsytd", text:"YTD", abbr:"Year to Date"}
|
||||
]
|
||||
|
||||
}
|
||||
]}
|
||||
];
|
||||
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["page","visitsmonth","visitsytd","viewsmonth","viewsytd"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("nested", myColumnSet, myDataSource,{caption:"Example: Nested Headers"});
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="./js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
var myColumnHeaders = [
|
||||
{key:"page", text:"Page",sortable:true},
|
||||
{text:"Statistics", type:"number", children:[
|
||||
{text:"Visits",
|
||||
children: [
|
||||
{key:"visitsmonth", text:"This Month",sortable:true},
|
||||
{key:"visitsytd", text:"YTD", abbr:"Year to Date",sortable:true}
|
||||
]
|
||||
},
|
||||
{text:"Views",
|
||||
children: [
|
||||
{key:"viewsmonth", text:"This Month",sortable:true},
|
||||
{key:"viewsytd", text:"YTD", abbr:"Year to Date",sortable:true}
|
||||
]
|
||||
|
||||
}
|
||||
]}
|
||||
];
|
||||
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["page","visitsmonth","visitsytd","viewsmonth","viewsytd"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("nested", myColumnSet, myDataSource,{caption:"Example: Nested Headers"});
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,192 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - Client-side Pagination of Large RecordSet (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
#paginated {margin:1em;}
|
||||
#paginated table {border-collapse:collapse;}
|
||||
#paginated th, #paginated td {border:1px solid #000;}
|
||||
#paginated th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#paginated .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Client-side Pagination of Large RecordSet</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="paginated"></div>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
{"recordsReturned":null,
|
||||
"totalRecords":"1396",
|
||||
"startIndex":0,
|
||||
"records":[
|
||||
{"extid":"702",
|
||||
"name":"xmlqoyzgmykrphvyiz",
|
||||
"date":"13-Sep-2002",
|
||||
"price":"8370",
|
||||
"number":"8056",
|
||||
"address":"qdfbc",
|
||||
"company":"taufrid",
|
||||
"desc":"pppzhfhcdqcvbirw",
|
||||
"age":"5512",
|
||||
"title":"zticbcd",
|
||||
"phone":"hvdkltabshgakjqmfrvxo",
|
||||
"email":"eodnqepua",
|
||||
"zip":"eodnqepua",
|
||||
"country":"pdibxicpqipbsgnxyjumsza"},
|
||||
|
||||
...
|
||||
|
||||
{"extid":"2047",
|
||||
"name":"sqrvpfpibtavxbpjba",
|
||||
"date":"22-Jun-2004",
|
||||
"price":"864",
|
||||
"number":"4418",
|
||||
"address":"cshyemrwdirsohapbal",
|
||||
"company":"cbidbvynxjgabozgarcdzuwo",
|
||||
"desc":"wd",
|
||||
"age":"1422",
|
||||
"title":"pbzqkdrfbfdlmenadtauweu",
|
||||
"phone":"aitxmxvbzusjykpap",
|
||||
"email":"lbxzcbsdwphrgiaagnx",
|
||||
"zip":"lbxzcbsdwphrgiaagnx",
|
||||
"country":"p"}
|
||||
]}
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
#paginated {margin:1em;}
|
||||
#paginated table {border-collapse:collapse;}
|
||||
#paginated th, #paginated td {border:1px solid #000;}
|
||||
#paginated th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#paginated .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="paginated"></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var myColumnHeaders = [
|
||||
{key:"extid",text:"ID"},
|
||||
{key:"name",text:"Name"},
|
||||
{key:"date",text:"Date"},
|
||||
{key:"price",text:"Price"},
|
||||
{key:"number",text:"Number"},
|
||||
{key:"address",text:"Address"},
|
||||
{key:"company",text:"Company"},
|
||||
{key:"desc",text:"Description"},
|
||||
{key:"age",text:"Age"},
|
||||
{key:"title",text:"Title"},
|
||||
{key:"phone",text:"Phone"},
|
||||
{key:"email",text:"Email"},
|
||||
{key:"zip",text:"Zip"},
|
||||
{key:"country",text:"Country"}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
// Show over 1000 records
|
||||
var myDataSource = new YAHOO.util.DataSource("./php/json_proxy.php");
|
||||
// Show 5000 records -- FireBug must be disabled!
|
||||
//var myDataSource = new YAHOO.util.DataSource("./php/json5000_proxy.php");
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
||||
myDataSource.responseSchema = {
|
||||
resultsList: "result",
|
||||
fields: ["extid","name","date","price","number","address","company","desc","age","title","phone","email","zip","country"]
|
||||
};
|
||||
|
||||
var oConfigs = {
|
||||
caption:"Example: Client-side Pagination of Large RecordSet",
|
||||
paginator:true,
|
||||
paginatorOptions:{
|
||||
rowsPerPage: 100,
|
||||
dropdownOptions: [25,50,100,500]
|
||||
}
|
||||
};
|
||||
var myDataTable = new YAHOO.widget.DataTable("paginated", myColumnSet, myDataSource, oConfigs);
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
myLogger.collapse();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"extid",text:"ID"},
|
||||
{key:"name",text:"Name"},
|
||||
{key:"date",text:"Date"},
|
||||
{key:"price",text:"Price"},
|
||||
{key:"number",text:"Number"},
|
||||
{key:"address",text:"Address"},
|
||||
{key:"company",text:"Company"},
|
||||
{key:"desc",text:"Description"},
|
||||
{key:"age",text:"Age"},
|
||||
{key:"title",text:"Title"},
|
||||
{key:"phone",text:"Phone"},
|
||||
{key:"email",text:"Email"},
|
||||
{key:"zip",text:"Zip"},
|
||||
{key:"country",text:"Country"}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
// Show over 1000 records
|
||||
var myDataSource = new YAHOO.util.DataSource("./php/json_proxy.php");
|
||||
// Show 5000 records -- FireBug must be disabled!
|
||||
//var myDataSource = new YAHOO.util.DataSource("./php/json5000_proxy.php");
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
||||
myDataSource.responseSchema = {
|
||||
resultsList: "result",
|
||||
fields: ["extid","name","date","price","number","address","company","desc","age","title","phone","email","zip","country"]
|
||||
};
|
||||
|
||||
var oConfigs = {
|
||||
caption:"Example: Client-side Pagination of Large RecordSet",
|
||||
paginator:true,
|
||||
paginatorOptions:{
|
||||
rowsPerPage: 100,
|
||||
dropdownOptions: [25,50,100,500]
|
||||
}
|
||||
};
|
||||
var myDataTable = new YAHOO.widget.DataTable("paginated", myColumnSet, myDataSource, oConfigs);
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -1,20 +0,0 @@
|
|||
<?php
|
||||
|
||||
$results = array(
|
||||
"Domino's Pizza|615 Caliente Dr|Sunnyvale|(408) 732-3030|4|http://local.yahoo.com/details?id=21335892&stx=pizza&csz=Sunnyvale+CA&ed=17rS8q160Sy5Htog0TF1m1atNv01Iz7ySeGEMtCL4dJsf1ku0nhziD2qN5XcnHlJtDS4IydIbA--",
|
||||
"Pizza Depot|919 E Duane Ave|Sunnyvale|(408) 245-7760|3.5|http://local.yahoo.com/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--",
|
||||
"Pizza Hut|464 N Mathilda Ave|Sunnyvale|(408) 735-1900|2.5|http://local.yahoo.com/details?id=21340811&stx=pizza&csz=Sunnyvale+CA&ed=syVWvq160Szz0Q60Q8N7uetWGoUIbThLIdulmQLubJ29CuU7wpxDvDxrLF4md791a4jW7kNRr9eSVQ--",
|
||||
"Giovannis Pizzeria|1127 N Lawrence Expy|Sunnyvale|(408) 734-4221|4.5|http://local.yahoo.com/details?id=21341983&stx=pizza&csz=Sunnyvale+CA&ed=kYc.Ba160SxZddWADEWWMRsGo0KgZ6X22_QAgTZxq3OdfrVCfCdLU9mvvJeybt8XpDhMC58HjElJAiWi",
|
||||
"Round Table Pizza|415 N Mary Ave|Sunnyvale|(408) 733-1365|5|http://local.yahoo.com/details?id=21329046&stx=pizza&csz=Sunnyvale+CA&ed=OkhHFa160Sx2UXqpaqXDZAGyyKWrCO9wfqP24Mur1nNB2pqgQsi3DQxeSEK_Uj9fxQN4zNax",
|
||||
"Vitos Famous Pizza|1155 Reed Ave|Sunnyvale|(408) 246-8800|4.5|http://local.yahoo.com/details?id=21332026&stx=pizza&csz=Sunnyvale+CA&ed=QTqeMK160Sx0Mril0Jnu_RK0RF4vTvEspLb2s60hJTic2.RapYE82B6edOm18LAox7KOqkw-",
|
||||
"Round Table Pizza|101 Town And Countr|Sunnyvale|(408) 736-2242|3|http://local.yahoo.com/details?id=21340803&stx=pizza&csz=Sunnyvale+CA&ed=SiKr2K160SwJxDEvf_eAwROvFMpfCIqsVX3dSyYtvj6HomUPpdS92g9AIoaoZNtg.WNSGcT4hpk1JxxT",
|
||||
"Round Table Pizza|860 Old San Francisco Rd|Sunnyvale|(408) 245-9000|3|http://local.yahoo.com/details?id=21340791&stx=pizza&csz=Sunnyvale+CA&ed=NF3MAq160SzKHt2S1yk7tJKtIMvbW44yNlckp8Y5veL7w8DWvagJYLH2tGehl1cPcLGbR4kzMTi4cf1U7iP6YA--",
|
||||
"Domino's Pizza|992 W El Camino Real|Sunnyvale|(408) 736-3666|4|http://local.yahoo.com/details?id=21341882&stx=pizza&csz=Sunnyvale+CA&ed=_tzLZq160SyF.4GddMA07QiACQkYc84nqI0j3hvsAcfMemwlBCiezUltSm8_ppCH1Bo8SlklBj1QhuRp",
|
||||
"Little Caesars Pizza|1039 Sunnyvale Saratoga Rd|Sunnyvale|(408) 245-0607|3|http://local.yahoo.com/details?id=21330174&stx=pizza&csz=Sunnyvale+CA&ed=89myuK160Syd6uoWQ5fTb6uLid70P.ucvPaBKA92m7bc1aVSW5LGmRbGsSIqT8U5e2eA4Ki4nQHVAAhh5.SVNIAQ"
|
||||
);
|
||||
|
||||
header('Content-type: text/plain');
|
||||
for ($i = 0; $i < count($results); $i++)
|
||||
print "$results[$i]\n";
|
||||
|
||||
?>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
Domino's Pizza|615 Caliente Dr|Sunnyvale|(408) 732-3030|4|http://local.yahoo.com/details?id=21335892&stx=pizza&csz=Sunnyvale+CA&ed=17rS8q160Sy5Htog0TF1m1atNv01Iz7ySeGEMtCL4dJsf1ku0nhziD2qN5XcnHlJtDS4IydIbA--
|
||||
Pizza Depot|919 E Duane Ave|Sunnyvale|(408) 245-7760|3.5|http://local.yahoo.com/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--
|
||||
Pizza Hut|464 N Mathilda Ave|Sunnyvale|(408) 735-1900|2.5|http://local.yahoo.com/details?id=21340811&stx=pizza&csz=Sunnyvale+CA&ed=syVWvq160Szz0Q60Q8N7uetWGoUIbThLIdulmQLubJ29CuU7wpxDvDxrLF4md791a4jW7kNRr9eSVQ--
|
||||
Giovannis Pizzeria|1127 N Lawrence Expy|Sunnyvale|(408) 734-4221|4.5|http://local.yahoo.com/details?id=21341983&stx=pizza&csz=Sunnyvale+CA&ed=kYc.Ba160SxZddWADEWWMRsGo0KgZ6X22_QAgTZxq3OdfrVCfCdLU9mvvJeybt8XpDhMC58HjElJAiWi
|
||||
Round Table Pizza|415 N Mary Ave|Sunnyvale|(408) 733-1365|5|http://local.yahoo.com/details?id=21329046&stx=pizza&csz=Sunnyvale+CA&ed=OkhHFa160Sx2UXqpaqXDZAGyyKWrCO9wfqP24Mur1nNB2pqgQsi3DQxeSEK_Uj9fxQN4zNax
|
||||
Vitos Famous Pizza|1155 Reed Ave|Sunnyvale|(408) 246-8800|4.5|http://local.yahoo.com/details?id=21332026&stx=pizza&csz=Sunnyvale+CA&ed=QTqeMK160Sx0Mril0Jnu_RK0RF4vTvEspLb2s60hJTic2.RapYE82B6edOm18LAox7KOqkw-
|
||||
Round Table Pizza|101 Town And Countr|Sunnyvale|(408) 736-2242|3|http://local.yahoo.com/details?id=21340803&stx=pizza&csz=Sunnyvale+CA&ed=SiKr2K160SwJxDEvf_eAwROvFMpfCIqsVX3dSyYtvj6HomUPpdS92g9AIoaoZNtg.WNSGcT4hpk1JxxT
|
||||
Round Table Pizza|860 Old San Francisco Rd|Sunnyvale|(408) 245-9000|3|http://local.yahoo.com/details?id=21340791&stx=pizza&csz=Sunnyvale+CA&ed=NF3MAq160SzKHt2S1yk7tJKtIMvbW44yNlckp8Y5veL7w8DWvagJYLH2tGehl1cPcLGbR4kzMTi4cf1U7iP6YA--
|
||||
Domino's Pizza|992 W El Camino Real|Sunnyvale|(408) 736-3666|4|http://local.yahoo.com/details?id=21341882&stx=pizza&csz=Sunnyvale+CA&ed=_tzLZq160SyF.4GddMA07QiACQkYc84nqI0j3hvsAcfMemwlBCiezUltSm8_ppCH1Bo8SlklBj1QhuRp
|
||||
Little Caesars Pizza|1039 Sunnyvale Saratoga Rd|Sunnyvale|(408) 245-0607|3|http://local.yahoo.com/details?id=21330174&stx=pizza&csz=Sunnyvale+CA&ed=89myuK160Syd6uoWQ5fTb6uLid70P.ucvPaBKA92m7bc1aVSW5LGmRbGsSIqT8U5e2eA4Ki4nQHVAAhh5.SVNIAQ
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<?php
|
||||
// Yahoo! proxy
|
||||
|
||||
// Hard-code hostname and path:
|
||||
define ('PATH', 'http://local.yahooapis.com/LocalSearchService/V2/localSearch');
|
||||
|
||||
$type = "text/xml";
|
||||
|
||||
// Get all query params
|
||||
$query = "?";
|
||||
foreach ($_GET as $key => $value) {
|
||||
if(($key == "output") && ($value == "json")) {
|
||||
$type = "application/json";
|
||||
}
|
||||
$query .= urlencode($key)."=".urlencode($value)."&";
|
||||
}
|
||||
|
||||
foreach ($_POST as $key => $value) {
|
||||
if(($key == "output") && ($value == "json")) {
|
||||
$type = "application/json";
|
||||
}
|
||||
$query .= $key."=".$value."&";
|
||||
}
|
||||
$query .= "appid=YahooDemo";
|
||||
$url = PATH.$query;
|
||||
|
||||
|
||||
// Open the Curl session
|
||||
$session = curl_init($url);
|
||||
|
||||
// Don't return HTTP headers. Do return the contents of the call
|
||||
curl_setopt($session, CURLOPT_HEADER, false);
|
||||
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
|
||||
|
||||
// Make the call
|
||||
$response = curl_exec($session);
|
||||
|
||||
header("Content-Type: ".$type);
|
||||
echo $response;
|
||||
curl_close($session);
|
||||
|
||||
?>
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - Row Selection (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
.selectionexample {margin:1em;}
|
||||
.selectionexample table {border-collapse:collapse;}
|
||||
.selectionexample th, #rowselect td {border:1px solid #000;padding:.25em;}
|
||||
.selectionexample th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
.selectionexample .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
.selectionexample .yui-dt-selected {background-color:#97C0A5;} /*green*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Row Selection</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="standardselect" class="selectionexample"></div>
|
||||
<div id="singleselect" class="selectionexample"></div>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
YAHOO.example.Data.emails = {
|
||||
account:"jenny@yahoo.com",
|
||||
currStorage: 10,
|
||||
maxStorage: 200,
|
||||
messages: [
|
||||
{XID: "9897",Date:new Date(1981, 2, 24),To:"Joe",From:"Jenny",Unread:false,Subject:"Check out my new pictures"},
|
||||
{XID: "7899",Date:new Date(1980, 1, 11),To:"Jane",From:"Jenny",Unread:false,Subject:"Let's have lunch"},
|
||||
{XID: "6789",Date:new Date(1978, 11, 12),To:"Ann",From:"Jenny",Unread:false,Subject:"Here's the info you requested"},
|
||||
{XID: "4996",Date:new Date(1974, 1, 11),To:"Bob",From:"Jenny",Unread:true,Subject:"RE: Let's have lunch"},
|
||||
{XID: "4544",Date:new Date(1974, 1, 10),To:"Charlie",From:"Jenny",Unread:false,Subject:"Birthday party Saturday"}
|
||||
]
|
||||
};
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
.selectionexample {margin:1em;}
|
||||
.selectionexample table {border-collapse:collapse;}
|
||||
.selectionexample th, #rowselect td {border:1px solid #000;padding:.25em;}
|
||||
.selectionexample th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
.selectionexample .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
.selectionexample .yui-dt-selected {background-color:#97C0A5;} /*green*/
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="standardselect" class="selectionexample"></div>
|
||||
<div id="singleselect" class="selectionexample">></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var myColumnHeaders = [
|
||||
{key:"Date",type:"date"},
|
||||
{key:"To"},
|
||||
{key:"From"},
|
||||
{key:"Subject"}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.emails);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
||||
myDataSource.responseSchema = {
|
||||
resultsList: ["messages"],
|
||||
fields: ["Date","To","From","Subject","XID","Date","Attachment"]
|
||||
};
|
||||
|
||||
// Default selection mode
|
||||
var defaultDataTable = new YAHOO.widget.DataTable("standardselect",myColumnSet,myDataSource,
|
||||
{caption:"Example: Default Selection Mode"});
|
||||
defaultDataTable.subscribe("cellClickEvent",defaultDataTable.onEventSelectRow);
|
||||
|
||||
// Single-row selection mode
|
||||
var singleRowDataTable = new YAHOO.widget.DataTable("singleselect",myColumnSet,myDataSource,
|
||||
{caption:"Example: Single-row Selection Mode", rowSingleSelect:true});
|
||||
singleRowDataTable.subscribe("cellClickEvent",singleRowDataTable.onEventSelectRow);
|
||||
|
||||
// Select the first row immediately
|
||||
singleRowDataTable.select(singleRowDataTable.getRow(0));
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="./js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"Date",type:"date"},
|
||||
{key:"To"},
|
||||
{key:"From"},
|
||||
{key:"Subject"}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.emails);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
||||
myDataSource.responseSchema = {
|
||||
resultsList: ["messages"],
|
||||
fields: ["Date","To","From","Subject","XID","Date","Attachment"]
|
||||
};
|
||||
|
||||
// Default selection mode
|
||||
var defaultDataTable = new YAHOO.widget.DataTable("standardselect",myColumnSet,myDataSource,
|
||||
{caption:"Example: Default Selection Mode"});
|
||||
defaultDataTable.subscribe("cellClickEvent",defaultDataTable.onEventSelectRow);
|
||||
|
||||
// Single-row selection mode
|
||||
var singleRowDataTable = new YAHOO.widget.DataTable("singleselect",myColumnSet,myDataSource,
|
||||
{caption:"Example: Single-row Selection Mode", rowSingleSelect:true});
|
||||
singleRowDataTable.subscribe("cellClickEvent",singleRowDataTable.onEventSelectRow);
|
||||
|
||||
// Select the first row immediately
|
||||
singleRowDataTable.select(singleRowDataTable.getRow(0));
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - Scrolling (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* customized css for scrolling */
|
||||
.yui-dt-scrollable {
|
||||
width:30em; /* SET OVERALL WIDTH HERE for ie (make sure columns add up to this total) */
|
||||
height:30em; /* SET HEIGHT HERE for ie */
|
||||
}
|
||||
.yui-dt-scrollbody {
|
||||
height:30em; /* SET HEIGHT HERE for non-ie */
|
||||
*height:auto; /* for ie */
|
||||
}
|
||||
.yui-dt-scrollable thead {
|
||||
background:#696969; /* for ie */
|
||||
}
|
||||
|
||||
/* SET WIDTHS FOR EACH TH TO HELP ALIGN COLUMNS */
|
||||
/* IF ALL COLS CAN BE SAME WIDTH USE THIS:
|
||||
.yui-dt-scrollable th, .yui-dt-scrollbody td {
|
||||
width:20em;
|
||||
}*/
|
||||
/* OTHERWISE SET EACH COL WIDTH EXPLICITLY:*/
|
||||
.yui-dt-scrollable .col1 {
|
||||
width:10em; /* this column was assigned "col1" as "className" */
|
||||
}
|
||||
.yui-dt-scrollable .col2 {
|
||||
width:20em; /* this column was assigned "col2" as "className" */
|
||||
}
|
||||
|
||||
/* custom css*/
|
||||
#scroll {margin:1em;margin-bottom:3em;}
|
||||
#scroll table {border-collapse:collapse;}
|
||||
#scroll th, #scroll td {border:1px solid #000;}
|
||||
#scroll th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#scroll .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Scrolling</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="scroll"></div>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
YAHOO.example.Data.areacodes = [
|
||||
{areacode: "201", state: "New Jersey"},
|
||||
...,
|
||||
{areacode: "989", state: "Michigan"}
|
||||
];
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<p>All of the CSS rules shown below build upon the foundational CSS that
|
||||
is provided with DataTable. When a DataTable's <code>scrollable</code>
|
||||
property is set to <code>true</code>, the classes <code>yui-dt-scrollable</code>
|
||||
and <code>yui-dt-scrollbody</code> are applied to the appropriate
|
||||
elements by the DataTable. These classes are defined in the foundational
|
||||
CSS, and this example shows how to modify them to get specific
|
||||
characteristics with respect to column width, table height, and so on.</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* customized css for scrolling */
|
||||
.yui-dt-scrollable {
|
||||
width:30em; /* SET OVERALL WIDTH HERE for ie (make sure columns add up to this total) */
|
||||
height:30em; /* SET HEIGHT HERE for ie */
|
||||
}
|
||||
.yui-dt-scrollbody {
|
||||
height:30em; /* SET HEIGHT HERE for non-ie */
|
||||
*height:auto; /* for ie */
|
||||
}
|
||||
.yui-dt-scrollable thead {
|
||||
background:#696969; /* for ie */
|
||||
}
|
||||
|
||||
/* SET WIDTHS FOR EACH TH TO HELP ALIGN COLUMNS */
|
||||
/* IF ALL COLS CAN BE SAME WIDTH USE THIS:
|
||||
.yui-dt-scrollable th, .yui-dt-scrollbody td {
|
||||
width:20em;
|
||||
}*/
|
||||
/* OTHERWISE SET EACH COL WIDTH EXPLICITLY:*/
|
||||
.yui-dt-scrollable .col1 {
|
||||
width:10em; /* this column was assigned "col1" as "className" */
|
||||
}
|
||||
.yui-dt-scrollable .col2 {
|
||||
width:20em; /* this column was assigned "col2" as "className" */
|
||||
}
|
||||
|
||||
/* custom css*/
|
||||
#scroll {margin:1em;}
|
||||
#scroll table {border-collapse:collapse;}
|
||||
#scroll th, #scroll td {border:1px solid #000;}
|
||||
#scroll th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#scroll .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="scroll"></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<p>To make a DataTable instance scrollable, set the <code>scrollable</code>
|
||||
property to <code>true</code> at instantiation (as in line 13 below).</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var myColumnHeaders = [
|
||||
{key:"areacode",className:"col1"},
|
||||
{key:"state",className:"col2"}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["areacode","state"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("scroll",myColumnSet,myDataSource,{scrollable:true});
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="./js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"areacode",className:"col1"},
|
||||
{key:"state",className:"col2"}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
|
||||
myDataSource.responseSchema = {
|
||||
fields: ["areacode","state"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("scroll",myColumnSet,myDataSource,{scrollable:true});
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,171 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - JSON Data Over XHR (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
#json {margin:1em;}
|
||||
#json table {border-collapse:collapse;}
|
||||
#json th, #json td {padding:.5em;border:1px solid #000;}
|
||||
#json th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#json th a {color:white;}
|
||||
#json th a:hover {color:blue;}
|
||||
#json .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: JSON Data Over XHR</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="json"></div>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
{"ResultSet": {
|
||||
"totalResultsAvailable":651,
|
||||
"totalResultsReturned":10,
|
||||
"firstResultPosition":1,
|
||||
"ResultSetMapUrl":"http:\/\/local.yahoo.com\/mapview?stx=pizza&csz=Sunnyvale%2C+CA+94089&city=Sunnyvale&state=CA&radius=15&ed=9brhZa131DwigChqKlCo22kM1H_9WgoouCr87Ao-",
|
||||
"Result":[
|
||||
{"Title":"Pizza Depot",
|
||||
"Address":"919 E Duane Ave",
|
||||
"City":"Sunnyvale",
|
||||
"State":"CA",
|
||||
"Phone":"(408) 245-7760",
|
||||
"Latitude":"37.388537",
|
||||
"Longitude":"-122.003972",
|
||||
"Rating":{"AverageRating":"3.5",
|
||||
"TotalRatings":"5",
|
||||
"TotalReviews":"5",
|
||||
"LastReviewDate":"1161495667"},
|
||||
"Distance":"0.93",
|
||||
"Url":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--",
|
||||
"ClickUrl":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--",
|
||||
"MapUrl":"http:\/\/maps.yahoo.com\/maps_result?name=Pizza+Depot&desc=4082457760&csz=Sunnyvale+CA&qty=9&cs=9&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--&gid1=21332021",
|
||||
"BusinessUrl":"",
|
||||
"BusinessClickUrl":""},
|
||||
|
||||
...,
|
||||
|
||||
{"Title":"Round Table Pizza Sunnyvale",
|
||||
"Address":"665 S Bernardo Ave",
|
||||
"City":"Sunnyvale",
|
||||
"State":"CA",
|
||||
"Phone":"(408) 732-6670",
|
||||
"Latitude":"37.372826",
|
||||
"Longitude":"-122.05688",
|
||||
"Rating":{"AverageRating":"4",
|
||||
"TotalRatings":"1",
|
||||
"TotalReviews":"1",
|
||||
"LastReviewDate":"1151049628"},
|
||||
"Distance":"3.05",
|
||||
"Url":"http:\/\/local.yahoo.com\/details?id=21328190&stx=pizza&csz=Sunnyvale+CA&ed=vQA2RK160SyzAlzZzGZxE.nmteJA1FaPbV1aRr.yzoj3i7s.Rq2W7hxBCEe8zCtAYWLP3Coz2zSc",
|
||||
"ClickUrl":"http:\/\/local.yahoo.com\/details?id=21328190&stx=pizza&csz=Sunnyvale+CA&ed=vQA2RK160SyzAlzZzGZxE.nmteJA1FaPbV1aRr.yzoj3i7s.Rq2W7hxBCEe8zCtAYWLP3Coz2zSc",
|
||||
"MapUrl":"http:\/\/maps.yahoo.com\/maps_result?name=Round+Table+Pizza+Sunnyvale&desc=4087326670&csz=Sunnyvale+CA&qty=9&cs=9&ed=vQA2RK160SyzAlzZzGZxE.nmteJA1FaPbV1aRr.yzoj3i7s.Rq2W7hxBCEe8zCtAYWLP3Coz2zSc&gid1=21328190",
|
||||
"BusinessUrl":"http:\/\/www.roundtablepizza.com\/",
|
||||
"BusinessClickUrl":"http:\/\/www.roundtablepizza.com\/"}
|
||||
]
|
||||
}
|
||||
}
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
#json {margin:1em;}
|
||||
#json table {border-collapse:collapse;}
|
||||
#json th, #json td {padding:.5em;border:1px solid #000;}
|
||||
#json th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#json th a {color:white;}
|
||||
#json th a:hover {color:blue;}
|
||||
#json .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="json"></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var formatUrl = function(elCell, oRecord, oColumn, sData) {
|
||||
elCell.innerHTML = "<a href='" + oRecord.ClickUrl + "' target='_blank'>" + sData + "</a>";
|
||||
};
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"Title", text:"Name", sortable:true, formatter:formatUrl},
|
||||
{key:"Phone"},
|
||||
{key:"City"},
|
||||
{key:"Rating.AverageRating", text:"Rating", type:"number", sortable:true}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource("./php/ylocal_proxy.php");
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
||||
myDataSource.responseSchema = {
|
||||
resultsList: "ResultSet.Result",
|
||||
fields: ["Title","Phone","City",{key:"Rating.AverageRating",converter:YAHOO.util.DataSource.convertNumber},"ClickUrl"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("json", myColumnSet, myDataSource,{initialRequest:"query=pizza&zip=94089&results=10&output=json"});
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
myLogger.collapse();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
var formatUrl = function(elCell, oRecord, oColumn, sData) {
|
||||
elCell.innerHTML = "<a href='" + oRecord.ClickUrl + "' target='_blank'>" + sData + "</a>";
|
||||
};
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"Title", text:"Name", sortable:true, formatter:formatUrl},
|
||||
{key:"Phone"},
|
||||
{key:"City"},
|
||||
{key:"Rating.AverageRating", text:"Rating", type:"number", sortable:true}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource("./php/ylocal_proxy.php");
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
||||
myDataSource.responseSchema = {
|
||||
resultsList: "ResultSet.Result",
|
||||
fields: ["Title","Phone","City",{key:"Rating.AverageRating",converter:YAHOO.util.DataSource.convertNumber},"ClickUrl"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("json", myColumnSet, myDataSource,{initialRequest:"query=pizza&zip=94089&results=10&output=json"});
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - Delimited Textual Data Over XHR (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
#text {margin:1em;}
|
||||
#text table {border-collapse:collapse;}
|
||||
#text th, #text td {padding:.5em;border:1px solid #000;}
|
||||
#text th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#text th a {color:white;}
|
||||
#text th a:hover {color:blue;}
|
||||
#text .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Delimited Textual Data Over XHR</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="text"></div>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
Domino's Pizza|615 Caliente Dr|Sunnyvale|(408) 732-3030|4|http://local.yahoo.com/details?id=21335892&stx=pizza&csz=Sunnyvale+CA&ed=17rS8q160Sy5Htog0TF1m1atNv01Iz7ySeGEMtCL4dJsf1ku0nhziD2qN5XcnHlJtDS4IydIbA--
|
||||
...
|
||||
Little Caesars Pizza|1039 Sunnyvale Saratoga Rd|Sunnyvale|(408) 245-0607|3|http://local.yahoo.com/details?id=21330174&stx=pizza&csz=Sunnyvale+CA&ed=89myuK160Syd6uoWQ5fTb6uLid70P.ucvPaBKA92m7bc1aVSW5LGmRbGsSIqT8U5e2eA4Ki4nQHVAAhh5.SVNIAQ
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
#text {margin:1em;}
|
||||
#text table {border-collapse:collapse;}
|
||||
#text th, #text td {padding:.5em;border:1px solid #000;}
|
||||
#text th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#text th a {color:white;}
|
||||
#text th a:hover {color:blue;}
|
||||
#text .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="text"></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var formatUrl = function(elCell, oRecord, oColumn, sData) {
|
||||
elCell.innerHTML = "<a href='" + oRecord.Url + "' target='_blank'>" + sData + "</a>";
|
||||
};
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"Name", sortable:true, formatter:formatUrl},
|
||||
{key:"Phone"},
|
||||
{key:"City"},
|
||||
{key:"Rating", type:"number", sortable:true}
|
||||
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource("./php/text_proxy.txt");
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;
|
||||
myDataSource.responseSchema = {
|
||||
recordDelim: "\n",
|
||||
fieldDelim: "|",
|
||||
fields: ["Name","Address","City","Phone",{key:"Rating",converter:YAHOO.util.DataSource.convertNumber},"Url"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("text", myColumnSet, myDataSource);
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
myLogger.collapse();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
var formatUrl = function(elCell, oRecord, oColumn, sData) {
|
||||
elCell.innerHTML = "<a href='" + oRecord.Url + "' target='_blank'>" + sData + "</a>";
|
||||
};
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"Name", sortable:true, formatter:formatUrl},
|
||||
{key:"Phone"},
|
||||
{key:"City"},
|
||||
{key:"Rating", type:"number", sortable:true}
|
||||
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource("./php/text_proxy.txt");
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;
|
||||
myDataSource.responseSchema = {
|
||||
recordDelim: "\n",
|
||||
fieldDelim: "|",
|
||||
fields: ["Name","Address","City","Phone",{key:"Rating",converter:YAHOO.util.DataSource.convertNumber},"Url"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("text", myColumnSet, myDataSource);
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Example: DataTable - XML Data Over XHR (YUI Library)</title>
|
||||
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
||||
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
||||
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
||||
<style type="text/css">
|
||||
/* custom css*/
|
||||
#xml {margin:1em;}
|
||||
#xml table {border-collapse:collapse;}
|
||||
#xml th, #xml td {padding:.5em;border:1px solid #000;}
|
||||
#xml th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#xml th a {color:white;}
|
||||
#xml th a:hover {color:blue;}
|
||||
#xml .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hd">
|
||||
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: XML Data Over XHR</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<div id="xml"></div>
|
||||
|
||||
<!-- Sample code begins -->
|
||||
<div id="code">
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<p>Data:</p>
|
||||
|
||||
<textarea name="code" class="XML" cols="60" rows="1">
|
||||
<?xml version="1.0"?>
|
||||
<ResultSet
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xmlns="urn:yahoo:lcl"
|
||||
xsi:schemaLocation="urn:yahoo:lcl http://api.local.yahoo.com/LocalSearchService/V2/LocalSearchResponse.xsd"
|
||||
totalResultsAvailable="651"
|
||||
totalResultsReturned="10"
|
||||
firstResultPosition="1">
|
||||
|
||||
<ResultSetMapUrl>
|
||||
http://local.yahoo.com/mapview?stx=pizza&csz=Sunnyvale%2C+CA+94089&city=Sunnyvale&state=CA&radius=15&ed=9brhZa131DwigChqKlCo22kM1H_9WgoouCr87Ao-
|
||||
</ResultSetMapUrl>
|
||||
|
||||
<Result>
|
||||
<Title>Pizza Depot</Title>
|
||||
<Address>919 E Duane Ave</Address>
|
||||
<City>Sunnyvale</City>
|
||||
<State>CA</State>
|
||||
<Phone>(408) 245-7760</Phone>
|
||||
<Latitude>37.388537</Latitude>
|
||||
<Longitude>-122.003972</Longitude>
|
||||
<Rating>
|
||||
<AverageRating>3.5</AverageRating>
|
||||
<TotalRatings>5</TotalRatings>
|
||||
<TotalReviews>5</TotalReviews>
|
||||
<LastReviewDate>1161495667</LastReviewDate>
|
||||
</Rating>
|
||||
<Distance>0.93</Distance>
|
||||
<Url>http://local.yahoo.com/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--</Url>
|
||||
<ClickUrl>http://local.yahoo.com/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--</ClickUrl>
|
||||
<MapUrl>http://maps.yahoo.com/maps_result?name=Pizza+Depot&desc=4082457760&csz=Sunnyvale+CA&qty=9&cs=9&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--&gid1=21332021</MapUrl>
|
||||
<BusinessUrl></BusinessUrl>
|
||||
<BusinessClickUrl></BusinessClickUrl>
|
||||
</Result>
|
||||
|
||||
...
|
||||
|
||||
<Result>
|
||||
<Title>Round Table Pizza Sunnyvale</Title>
|
||||
<Address>665 S Bernardo Ave</Address>
|
||||
<City>Sunnyvale</City>
|
||||
<State>CA</State>
|
||||
<Phone>(408) 732-6670</Phone>
|
||||
<Latitude>37.372826</Latitude>
|
||||
<Longitude>-122.05688</Longitude>
|
||||
<Rating>
|
||||
<AverageRating>4</AverageRating>
|
||||
<TotalRatings>1</TotalRatings>
|
||||
<TotalReviews>1</TotalReviews>
|
||||
<LastReviewDate>1151049628</LastReviewDate>
|
||||
</Rating>
|
||||
<Distance>3.05</Distance>
|
||||
<Url>http://local.yahoo.com/details?id=21328190&stx=pizza&csz=Sunnyvale+CA&ed=vQA2RK160SyzAlzZzGZxE.nmteJA1FaPbV1aRr.yzoj3i7s.Rq2W7hxBCEe8zCtAYWLP3Coz2zSc</Url>
|
||||
<ClickUrl>http://local.yahoo.com/details?id=21328190&stx=pizza&csz=Sunnyvale+CA&ed=vQA2RK160SyzAlzZzGZxE.nmteJA1FaPbV1aRr.yzoj3i7s.Rq2W7hxBCEe8zCtAYWLP3Coz2zSc</ClickUrl>
|
||||
<MapUrl>http://maps.yahoo.com/maps_result?name=Round+Table+Pizza+Sunnyvale&desc=4087326670&csz=Sunnyvale+CA&qty=9&cs=9&ed=vQA2RK160SyzAlzZzGZxE.nmteJA1FaPbV1aRr.yzoj3i7s.Rq2W7hxBCEe8zCtAYWLP3Coz2zSc&gid1=21328190</MapUrl>
|
||||
<BusinessUrl>http://www.roundtablepizza.com/</BusinessUrl>
|
||||
<BusinessClickUrl>http://www.roundtablepizza.com/</BusinessClickUrl>
|
||||
</Result>
|
||||
</ResultSet>
|
||||
</textarea>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
/* custom css*/
|
||||
#xml {margin:1em;}
|
||||
#xml table {border-collapse:collapse;}
|
||||
#xml th, #xml td {padding:.5em;border:1px solid #000;}
|
||||
#xml th {background-color:#696969;color:#fff;}/*dark gray*/
|
||||
#xml th a {color:white;}
|
||||
#xml th a:hover {color:blue;}
|
||||
#xml .yui-dt-odd {background-color:#eee;} /*light gray*/
|
||||
</textarea>
|
||||
|
||||
<p>Markup:</p>
|
||||
|
||||
<textarea name="code" class="HTML" cols="60" rows="1">
|
||||
<div id="xml"></div>
|
||||
</textarea>
|
||||
|
||||
<p>JavaScript:</p>
|
||||
|
||||
<textarea name="code" class="JScript" cols="60" rows="1">
|
||||
var formatUrl = function(elCell, oRecord, oColumn, sData) {
|
||||
elCell.innerHTML = "<a href='" + oRecord.ClickUrl + "' target='_blank'>" + sData + "</a>";
|
||||
};
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"Title", text:"Name", sortable:true, formatter:formatUrl},
|
||||
{key:"Phone"},
|
||||
{key:"City"},
|
||||
{key:"AverageRating", text:"Rating", type:"number", sortable:true}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource("./php/ylocal_proxy.php");
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
|
||||
myDataSource.responseSchema = {
|
||||
resultNode: "Result",
|
||||
fields: ["Title","Phone","City",{key:"AverageRating",converter:YAHOO.util.DataSource.convertNumber},"ClickUrl"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("xml", myColumnSet, myDataSource,{initialRequest:"query=pizza&zip=94089&results=10"});
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- Code sample ends -->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection.js"></script>
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
||||
<script type="text/javascript">
|
||||
var myLogger = new YAHOO.widget.LogReader();
|
||||
myLogger.collapse();
|
||||
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
/****************************************************************************/
|
||||
var formatUrl = function(elCell, oRecord, oColumn, sData) {
|
||||
elCell.innerHTML = "<a href='" + oRecord.ClickUrl + "' target='_blank'>" + sData + "</a>";
|
||||
};
|
||||
|
||||
var myColumnHeaders = [
|
||||
{key:"Title", text:"Name", sortable:true, formatter:formatUrl},
|
||||
{key:"Phone"},
|
||||
{key:"City"},
|
||||
{key:"AverageRating", text:"Rating", type:"number", sortable:true}
|
||||
];
|
||||
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
||||
|
||||
var myDataSource = new YAHOO.util.DataSource("./php/ylocal_proxy.php");
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
|
||||
myDataSource.responseSchema = {
|
||||
resultNode: "Result",
|
||||
fields: ["Title","Phone","City",{key:"AverageRating",converter:YAHOO.util.DataSource.convertNumber},"ClickUrl"]
|
||||
};
|
||||
|
||||
var myDataTable = new YAHOO.widget.DataTable("xml", myColumnSet, myDataSource,{initialRequest:"query=pizza&zip=94089&results=10"});
|
||||
</script>
|
||||
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
||||
<script type="text/javascript">
|
||||
dp.SyntaxHighlighter.HighlightAll('code');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue