Adding search and some compare features to Matrix v2

This commit is contained in:
Yung Han Khoe 2008-11-18 00:39:52 +00:00
parent ab14e4aa0f
commit 7f3193f08e
4 changed files with 358 additions and 48 deletions

View file

@ -7,7 +7,12 @@ YAHOO.util.Event.addListener(window, "load", function() {
};
this.formatCheckBox = function(elCell, oRecord, oColumn, sData) {
elCell.innerHTML = "<input type='checkbox' name='listingId' value='" + sData + "'>";
var innerHTML = "<input type='checkbox' name='listingId' value='" + sData + "' id='" + sData + "_checkBox'";
if(typeof(oRecord.getData("checked")) != 'undefined'){
innerHTML = innerHTML + " checked='checked'";
}
innerHTML = innerHTML + ">";
elCell.innerHTML = innerHTML;
};
var myColumnDefs = [
@ -18,16 +23,23 @@ YAHOO.util.Event.addListener(window, "load", function() {
{key:"compares", sortable:true}
];
var uri = "func=getCompareFormData";
if(typeof(listingIds) != 'undefined'){
for (var i = 0; i < listingIds.length; i++) {
uri = uri+';listingId='+listingIds[i];
}
}
this.myDataSource = new YAHOO.util.DataSource("?");
this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
this.myDataSource.connXhrMode = "queueRequests";
this.myDataSource.responseSchema = {
resultsList: "ResultSet.Result",
fields: ["title","views","clicks","compares","assetId"]
fields: ["title","views","clicks","compares","assetId","checked"]
};
this.myDataTable = new YAHOO.widget.DataTable("compareForm", myColumnDefs,
this.myDataSource, {initialRequest:"func=getCompareFormData"});
this.myDataSource, {initialRequest:uri});
var oColumn = this.myDataTable.getColumn(3);
this.myDataTable.hideColumn(oColumn);

View file

@ -2,9 +2,27 @@
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.XHR_JSON = new function() {
var Dom = YAHOO.util.Dom;
var hideStickies = 0;
this.formatStickied = function(elCell, oRecord, oColumn, sData) {
elCell.innerHTML = "<input type='checkBox' class='stickieCheckbox' id='" + oRecord.getData("attributeId") + "_stickied'>";
};
this.formatColors = function(elCell, oRecord, oColumn, sData) {
var colorField = oColumn.key + "_compareColor";
var color = oRecord.getData(colorField);
if(color){
Dom.setStyle(elCell.parentNode, "background-color", color);
}
elCell.innerHTML = sData;
};
YAHOO.widget.DataTable.Formatter.formatColors = this.formatColors;
var myColumnDefs = [
{key:"name"}
{key:"stickied",formatter:this.formatStickied},
{key:"name"}
];
this.myDataSource = new YAHOO.util.DataSource("?");
@ -38,8 +56,10 @@ YAHOO.util.Event.addListener(window, "load", function() {
myDataTable.getRecordSet().reset();
var existingColumns = myDataTable.getColumnSet().keys;
for (var i = 0; i < existingColumns.length; i++) {
if(i > 0){
myDataTable.removeColumn(existingColumns[1]);
if(i > 1){
// after deleting a column the next column will
// allways be no. 2 (the third in the array)
myDataTable.removeColumn(existingColumns[2]);
}
}
if (oFullResponse.ColumnDefs) {
@ -59,11 +79,11 @@ YAHOO.util.Event.addListener(window, "load", function() {
};
var myCallback2 = function() {
this.getRecordSet().reset();
//this.render();
this.set("sortedBy", null);
this.onDataReturnAppendRows.apply(this,arguments);
this.getRecordSet().reset();
//this.getRecordSet().reset();
this.set("sortedBy", null);
this.onDataReturnAppendRows.apply(this,arguments);
//this.getRecordSet().reset();
};
@ -72,15 +92,68 @@ YAHOO.util.Event.addListener(window, "load", function() {
failure : myCallback,
scope : myDataTable
};
this.myDataSource.sendRequest("func=getCompareListData;listingId=CWNjAHcmh0pEF6WJooomJA",
callback2);
var btnCompare = new YAHOO.widget.Button("compare");
btnCompare.on("click", function(e) {
var uri = "func=getCompareListData";
for (var i = 0; i < columnKeys.length; i++) {
if(columnKeys[i] != 'name'){
var checkBox = new Dom.get(columnKeys[i] + '_checkBox');
if(checkBox.checked == true){
uri = uri+';listingId='+columnKeys[i];
}
}
}
this.myDataSource.sendRequest(uri,callback2);
},this,true);
var btnStickied = new YAHOO.widget.Button("stickied");
btnStickied.on("click", function(e) {
var elements = myDataTable.getRecordSet().getRecords();
if(hideStickies == 0){
// hide non-selected attributes
for(i=0; i<elements.length; i++){
var attributeId = elements[i].getData('attributeId');
var checkBox = Dom.get(attributeId+"_stickied");
if (checkBox.checked == false){
elRow = myDataTable.getTrEl(elements[i]);
//var styleNow = Dom.getStyle(elRow, "display");
//alert(styleNow);
Dom.setStyle(elRow, "display", "none");
}
}
hideStickies = 1;
}else{
// show all attributes
for(i=0; i<elements.length; i++){
var attributeId = elements[i].getData('attributeId');
var checkBox = Dom.get(attributeId+"_stickied");
if (checkBox.checked == false){
elRow = myDataTable.getTrEl(elements[i]);
Dom.setStyle(elRow, "display", "table-row");
}
}
hideStickies = 0;
}
// var elements = Dom.getElementsByClassName('yui-dt-even yui-dt-first', 'tr');
// for(i=0; i<elements.length; i++){
// alert(elements[i].id);
// Dom.setStyle(elements[i], "display", "none");
// Dom.addClass(elements[i],'hidden')
// alert(elements[i].className);
// var show = true;
// }
},this,true);
//var hideEl = new Dom.get('yui-dt0-bdrow0');
//alert(hideEl.id);
//Dom.addClass(hideEl,'hidden');
};
});
//function sort() {
// myCompareTable.sortColumn()
// var oColumn = myCompareTable.getColumn(3);
// myCompareTable.hideColumn(oColumn);
//}

View file

@ -0,0 +1,96 @@
var myCompareTable;
//var search;
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.XHR_JSON = new function() {
this.formatUrl = function(elCell, oRecord, oColumn, sData) {
elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>";
};
this.formatCheckBox = function(elCell, oRecord, oColumn, sData) {
var innerHTML = "<input type='checkbox' name='listingId' value='" + sData + "' id='" + sData + "_checkBox'";
if(typeof(oRecord.getData("checked")) != 'undefined'){
if(oRecord.getData("checked") == 'checked'){
innerHTML = innerHTML + " checked='checked'";
}
}
innerHTML = innerHTML + ">";
elCell.innerHTML = innerHTML;
};
var myColumnDefs = [
{key:"assetId",label:"",sortable:false,formatter:this.formatCheckBox},
{key:"title", label:"Name", sortable:true, formatter:this.formatUrl},
{key:"views", sortable:true},
{key:"clicks", sortable:true},
{key:"compares", sortable:true}
];
var uri = "func=getCompareFormData";
if(typeof(listingIds) != 'undefined'){
for (var i = 0; i < listingIds.length; i++) {
uri = uri+';listingId='+listingIds[i];
}
}
var myDataSource = new YAHOO.util.DataSource("?");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.connXhrMode = "queueRequests";
myDataSource.responseSchema = {
resultsList: "ResultSet.Result",
fields: ["title","views","clicks","compares","assetId","checked"]
};
var myDataTable = new YAHOO.widget.DataTable("compareForm", myColumnDefs,
myDataSource, {initialRequest:uri});
myDataSource.doBeforeParseData = function (oRequest, oFullResponse) {
myDataTable.getRecordSet().reset();
return oFullResponse;
}
var oColumn = myDataTable.getColumn(3);
myDataTable.hideColumn(oColumn);
var myCallback = function() {
myDataTable.getRecordSet().reset();
this.set("sortedBy", null);
this.onDataReturnAppendRows.apply(this,arguments);
};
var callback2 = {
success : myCallback,
failure : myCallback,
scope : myDataTable
};
var attributeSelects = YAHOO.util.Dom.getElementsByClassName('attributeSelect','select');
var reloadCompareForm = function() {
myDataTable.getRecordSet().reset();
myDataTable.initializeTable;
var elements = myDataTable.getRecordSet().getRecords();
alert(elements.length);
// hide non-selected attributes
for(i=0; i<elements.length; i++){
myDataTable.getRecordSet().deleteRecords(0,elements.length);
alert("deleting record " + i);
}
myDataSource.sendRequest(newUri,callback2);
myDataTable.getRecordSet().reset();
myDataTable.initializeTable;
}
var newUri = "func=getCompareFormData;search=1";
for (var i = attributeSelects.length; i--; ) {
newUri = newUri + ';search_' + attributeSelects[i].id + '=' + attributeSelects[i].value;
attributeSelects[i].onchange = reloadCompareForm;
}
};
});