YUI table 拓展使用

最新推荐文章于 2019-05-07 08:42:05 发布

error1001

最新推荐文章于 2019-05-07 08:42:05 发布

阅读量814

点赞数

分类专栏： js

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

------hibuYuiTable.js----------------------------------------------------------------------------------------------------

/** Dependencies:

* YAHOO core
* YAHOO.util.DataSource (if using Table)
* YAHOO.widget.DataTable (if using Table)
* jQuery
**/

function hibuYuiTable(container, meta, updater, options){
 var _container = container;
 var _meta = meta ? $.extend(true, {}, meta) : {};
 var _updater = updater;
 var _tableOptions = {
 initialLoad: false
 }

 var _paginator = null;
 var _dataTable = null;
 var _respData = null;
 var _paginatorLinkedToTable = false;
 var _savedColumns = {};
 var _me = this;

 //other options
 var _ops = {
 tableWrapper : null,
 paginatorOps : {
 containers : null,
 firstPageLinkLabel : "first",
 previousPageLinkLabel : "prev",
 nextPageLinkLabel : "next",
 lastPageLinkLabel : "last",
 template:"{FirstPageLink}{PreviousPageLink}{PageLinks}{NextPageLink}{LastPageLink}" +
 " |  show {RowsPerPageDropdown} ",
 rowsPerPageOptions : [5, 10, 15, 20, 30, 50, 100]
 }
 }
 $.extend(true, _ops, options);
 //overwrite rowsPerPageOptions by parameter
 if(options && options.paginatorOps && options.paginatorOps.rowsPerPageOptions){
 _ops.paginatorOps.rowsPerPageOptions = options.paginatorOps.rowsPerPageOptions;
 }

 function _initialize(_ops){
 if(_ops.tableWrapper){
 _ops.tableWrapper = $("#" + _ops.tableWrapper);
 }else{
 _ops.tableWrapper = $("<div></div>")
 $("#" + _container).after(_ops.tableWrapper);
 _ops.tableWrapper.append($("#" + _container));
 }
 if(_meta.optional){
 $.extend(true, _tableOptions, _meta.optional);
 }
 if (_meta.state && _meta.state.page) {
 if (_meta.state.page.visibility != "never" && _meta.state.page.visibility != "hidden") {
 _paginator = new YAHOO.widget.Paginator(_ops.paginatorOps);
 _paginator.subscribe('changeRequest', _repaginate);
 if(!_ops.paginatorOps.containers){
 _paginatorLinkedToTable = true;
 _tableOptions.paginator = _paginator;
 }
 if (_meta.state.page.local) {
 _tableOptions.paginator = _paginator;
 }
 }
 }
 if(_meta.state && _meta.state.sort){
 _tableOptions.sortedBy = _getYUISortParams();
 }

 // initialize obligatory datasource
 var dataSource = new YAHOO.util.DataSource([]);

 // initialize view
 _dataTable = new YAHOO.widget.DataTable(
 _container,
 _meta.columnDefs,
 dataSource,
 _tableOptions
 );

 //bind event
 _dataTable.addListener("renderEvent", function(){
 if(_ops.paginatorOps.containers && _ops.paginatorOps.containers.length > 0){
 for(var i = 0; i < _ops.paginatorOps.containers.length; i++){
 var paginator = $("#" + _ops.paginatorOps.containers[i]);
 paginator.find(".rowPerPageVal").html(paginator.find("select").val());
 }
 }else{
 _getChild(".selectBox .rowPerPageVal").html(_getChild(".selectBox select").val());
 }
 });

 _createColumnTooltips();

 // should look into replacing this with an onEvent hook
 if (_meta.state && _meta.state.sort && !_meta.state.sort.local){
 _dataTable.sortColumn = _resort;
 }
 }

 function _createColumnTooltips() {
 var t = _meta.columnDefs;
 for (var i = 0; i < t.length; i++) {
 var column = _dataTable.getColumn(t[i].key);
 if(!column){
 continue;
 }
 var anchor, th = column.getThEl();

 //if th already has question mark then don't need add again
 if($(th).find(".questionMark").length > 0){
 continue;
 }

 // clear default tooltip
 var oldColTitle = $(th).find(".yui-dt-sortable").attr("title");
 $(th).find(".yui-dt-sortable").removeAttr("title");

 // tooltip anchor node
 if (t[i].iconClass) {
 anchor = ybApp.newChild(th.lastChild, "A", {"class":"questionMark"});
 ybApp.newChild(anchor, "SPAN", {"class":t[i].iconClass}).innerHTML = " ";
 } else {
 anchor = th;
 }

 //todo find some better way of resolving tooltip conflicts
 var colTitle = t[i].description;
 if (t[i].sortable && colTitle)
 colTitle += "\n" + ( ybApp.say("tables.sortable") || "[click here to sort]" );
 else if (t[i].sortable)
 colTitle = ybApp.say("tables.sortable") || "[click here to sort]";
 else if (!colTitle){
 colTitle = oldColTitle ? oldColTitle : "";
 }

 /*if (colTitle && YAHOO.widget.Tooltip)
 new YAHOO.widget.Tooltip("tooltip_" + ybApp.uniqId(),
 {
 context : anchor,
 container : _ops.tableWrapper.parents(".yui-dialog").length ? _ops.tableWrapper.parents(".yui-dialog").get(0) : document.body,
 text : colTitle
 });
 else if (colTitle)
 anchor.title = colTitle;
 */
 if(anchor){
 anchor.title = colTitle;
 }
 }
 }

 function _getYUISortParams() {
 var params = {
 key : _meta.state.sort.key,
 dir : (_meta.state.sort.dir) ? YAHOO.widget.DataTable.CLASS_DESC : YAHOO.widget.DataTable.CLASS_ASC
 };
 return params;
 }

 function _repaginate(uistate){
 var newOffset = (uistate.page - 1) * _meta.state.page.rowsPerPage;
 if (_meta.state.page.rowsPerPage != uistate.rowsPerPage){
 $.extend(true, _meta.state.page, {recordOffset: 0, rowsPerPage: uistate.rowsPerPage});
 }else if (_meta.state.page.recordOffset != newOffset){
 $.extend(true, _meta.state.page, {recordOffset: newOffset});
 }
 if (_meta.state.page.local){
 _refreshUI();
 return true;
 } else{
 _applayUpdate();
 return false;
 }

 }

 function _resort(col){
 var sortKey = col.key;
 var sortDir = 1;
 if (_meta.state.sort){
 if (sortKey == _meta.state.sort.key){
 sortDir = Number(!_meta.state.sort.dir);
 }
 }
 $.extend(true, _meta.state.sort, {key:sortKey, dir:sortDir});
 _applayUpdate();
 }

 function _refreshData() {
 _clear();
 if (!_respData || !_respData.length){
 return;
 }
 if(_paginatorLinkedToTable){
 if (_paginator && _meta.state && _meta.state.page && _meta.state.page.recordOffset){
 for (var i=0; i<_meta.state.page.recordOffset; i++){
 _respData.unshift({});
 }
 }
 }
 _dataTable.addRows(_respData, 0);
 }

 function _refreshUI() {
 if (_paginator && _meta.state && _meta.state.page) {
 _paginator.setTotalRecords(_meta.state.page.totalRecords, true);
 _paginator.setRowsPerPage(_meta.state.page.rowsPerPage, true);
 _paginator.setPage(_meta.state.page.recordOffset / _meta.state.page.rowsPerPage + 1, true);

 if (!_meta.state.page.totalRecords) {
 _getChild(".yui-dt-paginator").hide();
 }else{
 _getChild(".yui-dt-paginator").show();
 }

 if(_meta.state.page.totalRecords <= _ops.paginatorOps.rowsPerPageOptions[0]){
 _getChild(".rowPerPage").hide();
 }else{
 _getChild(".rowPerPage").show();
 }

 if (_getChild(".yui-pg-first").length) {
 _getChild(".yui-pg-container").show();
 if(_meta.state.page.totalRecords == 0){
 _getChild(".yui-pg-container").hide();
 } else if ((_meta.state.page.totalRecords <= _ops.paginatorOps.rowsPerPageOptions[0]) ||
 (_meta.state.page.totalRecords / _meta.state.page.rowsPerPage <= 1)) {
 _getChild(".yui-pg-first").hide();
 _getChild(".yui-pg-previous").hide();
 _getChild(".yui-pg-pages").show();
 _getChild(".yui-pg-next").hide();
 _getChild(".yui-pg-last").hide();
 } else if (_paginator.getCurrentPage() == 1) {
 _getChild(".yui-pg-first").hide();
 _getChild(".yui-pg-previous").hide();
 _getChild(".yui-pg-pages").show();
 _getChild(".yui-pg-last").show();
 _getChild(".yui-pg-pages").show();
 } else {
 _getChild(".yui-pg-first").show();
 _getChild(".yui-pg-previous").show();
 _getChild(".yui-pg-next").show();
 _getChild(".yui-pg-last").show();
 _getChild(".yui-pg-pages").show();
 }
 }

 _paginator.render();
 }

 if(_meta.state && _meta.state.sort){
 _dataTable.set("sortedBy", _getYUISortParams(), true);
 }
 }

 function _applayUpdate(callback){
 _ops.tableWrapper.addClass("ajaxLoading");
 $("#" + _container).addClass("loading");
 _updater(_meta.state, function(response){
 response = changeJsonToObj(response);

 //update state
 $.extend(true, _meta.state, response.state);

 _respData = response.data;
 _me.render();
 if(typeof callback == "function"){
 callback();
 }
 });
 }

 function _getChild(exp){
 return _ops.tableWrapper.find(exp);
 }

 function _clear() {
 var records = _dataTable.getRecordSet();
 records.deleteRecords(0, records.getLength());
 }

 function _hasFeature(list, feature){
 if(list[feature] && list[feature] == "true"){
 return true;
 }else{
 return false;
 }
 }

 this.getTable = function(){
 return _dataTable;
 }

 this.getRowData = function() {
 //Return a copy of the data. In past API versions some modification was needed.
 return _respData.slice(0);
 }

 this.render = function() {
 _ops.tableWrapper.removeClass("ajaxLoading");
 $("#" + _container).removeClass("loading");
 _refreshData();
 _refreshUI();
 _dataTable.render();
 }

 this.setFilter = function(filt, callback) {
 if(_meta.state.filter){
 $.extend(true, _meta.state.filter, filt);
 }else{
 _meta.state.filter = filt;
 }
 this.requestUpdate(callback);
 }

 this.requestUpdate = function(callback){
 if (_meta.state && _meta.state.page && _meta.state.page.recordOffset){
 _meta.state.page.recordOffset = 0;
 }
 _applayUpdate(callback);
 }

 this.hideColumn = function(colKey) {
 //find the desired column and its location in the table
 var col = _dataTable.getColumn(colKey);
 if (!col) return;
 colKey = col.getKey();
 var prevKey = null;
 if (col.getIndex() > 0)
 prevKey = _dataTable.getColumn(col.getIndex() - 1).getKey();
 //pop the column from the table and save its representation
 _savedColumns[colKey] = {
 left : prevKey,
 column : _dataTable.removeColumn(col)
 };
 //name of saved object
 return colKey;
 }

 this.unhideColumn = function(colKey) {
 var saved = _savedColumns[colKey];
 if (!saved) return;
 var neighbor, colNo = 0, neighborName = saved.left;

 //if the neighboring column is also hidden,
 // traverse back until a reference is found to
 // a non-hidden table row
 while (neighborName in _savedColumns) {
 neighbor = _savedColumns[neighborName];
 neighborName = neighbor.left;
 }
 if (neighborName && _dataTable.getColumn(neighborName)) {
 colNo = _dataTable.getColumn(neighborName).getIndex() + 1;
 }
 //complete transact and display column
 delete _savedColumns[colKey];
 _dataTable.insertColumn(saved.column, colNo);
 return colNo;
 }

 this.filterColumns = function (featureList) {
 if(featureList){
 for (var i = 0; i < _meta.columnDefs.length; i++) {
 var col = _meta.columnDefs[i];
 if (col.feature && !_hasFeature(featureList, col.feature))
 this.hideColumn(col.key);
 else
 this.unhideColumn(col.key);
 }
 }
 _createColumnTooltips();
 }

 _initialize(_ops);
}

/*table formatters*/
var yuiTable = {
 /** Custom formatter for audio links **/
 formatAudio : function(el, row, col, data) {
 el.innerHTML = "";
 if (data) {
 $("<a></a>").attr({
 href: data,
 title: ybApp.say("calltracking.audio.help") || "Open the audio recording of this call (right click to save)"
 }).css({
 "text-decoration": "none"
 }).append(" ").appendTo(el);
 }
 },
 /** Custom Float formatter - show fractions to 2 decimal places **/
 formatFloatNumber : function(el, row, col, n) {
 var span = ybApp.newChild(ybApp.clear(el), "span");
 n = yuiTable.parseFloatNumber(n);
 if (typeof(n) == "number" && !isNaN(n)){
 n = YAHOO.util.Number.format(n, {
 prefix: "",
 decimalPlaces: 2,
 thousandsSeparator: ",",
 suffix: ""
 });
 span.innerHTML = n;
 }else{
 span.innerHTML = n;
 }
 },
 /** Custom number formatter - show fractions to 2 decimal places **/
 formatNumber : function(el, row, col, n) {
 el.innerHTML = "";
 var span = $("");
 n = yuiTable.parseNumber(n);
 span.html(n);
 span.appendTo(el);
 },
 formatNumberString : function(el, row, col, n) {
 el.innerHTML = "";
 var span = $("");
 span.html(n).appendTo(el);
 },
 parseNumber : function parseNumber(n) {
 if (typeof(n) == "number" || n == "")
 return n;
 if (n.match(/,/))
 return parseFloat(n.replace(/,/g,""));
 return parseFloat(n);
 },
 parseFloatNumber : function FloatNumber(n){
 if(n == ""){
 return n;
 }
 return parseFloat(n);
 },
 formatEmailTopicClickable : function(el, row, col, subj) {
 var emailid = row.getData("AAEmailID");
 var a;
 var displaySubject = subj || "[no subject]";
 if (emailid != 0) {
 a = ybApp.newChild(el, "a", {href:"#"});
 a.innerHTML = displaySubject;
 $(a).click(function(e) {
 e.stopPropagation();
 jDashBoard.getContactAnalystEmailTextByTopic({filter:{id:emailid}}, function(s) {
 var emailSubjectText = s;
 $("#emailSubjectText").html(emailSubjectText.replace(/(?:\r\n?)|\n/g, " \n"));
 ybApp.analystToAdvertiserEmailTextDialog.show();
 });
 });
 } else {
 el.innerHTML = "N/A";
 }
 },
 /** for $$$ a string, but one that is always right justified **/
 formatMoney : function(el, row, col, data) {
 var span = ybApp.newChild(ybApp.clear(el), "span");
 //span.className = "rightAlignColumn";
 if(data != null && data.substring(0,1) != "$"){
 data = "$" + data;
 }
 span.innerHTML = data;
 },

 formatSiteString : function(el, row, col, data) {
 var span = ybApp.newChild(ybApp.clear(el), "span");
 if(data.indexOf("microsoft") >= 0){
 span.innerHTML = "*" + data;
 $("siteNotice").innerHTML = "*includes sites like msn.com, nbcnews.com and foxsports.com."
 }else{
 span.innerHTML = data;
 }
 },

 /** Custom HTTP URL formatter **/
 formatURL : function(el, row, col, data) {
 ybApp.clear(el);
 if (data) {
 var a = ybApp.newChild(el, "a", {href:data});
 a.innerHTML = col.label;
 }
 },
 /** recently call number right align format **/
 formatRecCallPhone : function(el, row, col, data) {
 var span = ybApp.newChild(ybApp.clear(el), "span");
 span.innerHTML = ybApp.phone.format(data);
 },
 /** recently call time right align format **/
 formatRecCallTime : function(el, row, col, data) {
 var span = ybApp.newChild(ybApp.clear(el), "span");
 span.innerHTML = data;
 },
 /** format EmailPhone and right align **/
 formatEmailPhone : function(el, row, col, data) {
 var span = ybApp.newChild(ybApp.clear(el), "span");
 span.innerHTML = ybApp.phone.format(String(data));
 },
 formatEmailTime : function(el, row, col, data) {
 var span = ybApp.newChild(ybApp.clear(el), "span");
 span.innerHTML = data;
 },
 formatCallTime : function(el, row, col, data) {
 var span = ybApp.newChild(ybApp.clear(el), "span");
 span.innerHTML = data;
 },
 /*formatPhoneLink : function(el, row, col, data) {
 var formattedNumber = ybApp.phoneForCallTracking.format(String(data));
 if (formattedNumber.length >= 12 && formattedNumber.length <= 14)
 yuiTable.formatCommandURL(el, row, col, formattedNumber);
 else {
 el.innerHTML = "Unknown";
 }
 },*/
 /*formatEmailRating : function(el, row, col, data) {
 ybApp.clear(el);
 var rowData = row.getData();
 this.createUserRatingEmail(el, rowData.emailid, data, true);
 },*/
 /** Custom formatter for in-page action URLs **/
 /*formatCommandURL : function(el, row, col, data) {
 ybApp.clear(el);
 var a = ybApp.newChild(el, "a", {href:"#"});
 a.innerHTML = data;
 var command = this.commands[col.key];
 YAHOO.util.Event.addListener(a, "click", function(e) {
 YAHOO.util.Event.stopEvent(e);
 command(data);
 });
 },*/
 formatEmailRatingClickable : function(el, row, col, data) {
 ybApp.clear(el);
 var rowData = row.getData();
 yuiTable.createUserRatingEmail(el, rowData.emailid, data);
 },
 /** Creates the call rating widgets **/
 /*formatUserRating : function(el, row, col, data) {
 ybApp.clear(el);
 var rowData = row.getData();
 yb.advertiser.createUserRating(el, rowData.callId, data, rowData.comment);
 },*/
 /** Creates the call rating widgets **/
 /*formatUserRatingReadOnly : function(el, row, col, data) {
 ybApp.clear(el);
 var rowData = row.getData();
 yb.advertiser.createUserRating(el, rowData.callId, data, null, true);
 },*/
 /** add edit text to call nick name **/
 formatSCCallNickName : function(el, row, col, data) {
 var span = ybApp.newChild(ybApp.clear(el), "span");
 var html = "<input type='text' value='"+ data +"' style='width:260px'>";
 span.innerHTML = html;
 },
 formatSCCallPhone : function(el, row, col, data) {
 var span = ybApp.newChild(ybApp.clear(el), "span");
 //span.className = "rightAlignColumn";
 span.innerHTML = ybApp.phoneForCallTracking.format(data);
 }
}

-------------------------------------------------------------------------------------------------------------------------------------------------------------

if(!campaignPerformanceTable){
        campaignPerformanceTable = new hibuYuiTable("campaignPerformanceTable", dmsSummaryTableMeta, getActivityReportTableData ,{
            tableWrapper: "campaignTableWrapper",
            paginatorOps: {containers:["paginatorContainer"]}
        });
        getFeatures(campaignPerformanceTable);
        campaignPerformanceTable.render();
    }
    campaignPerformanceTable.requestUpdate();

--------------------------------------------------------------------------------------------------------------------------

var dmsSummaryTableMeta = {
    columnDefs : [
        {
            resizeable: false,
            description: "Date or range of dates for which statistics are shown.",
            sortable: true,
            label: "Date",
            iconClass: "wrIcon mb showHelp",
            type: "NumberString",
            key: "date"
        },
        {
            resizeable: false,
            description: "Impressions for the summary",
            sortable: true,
            label: "Impressions",
            iconClass: "wrIcon mb showHelp",
            type: "Number",
            formatter: yuiTable.formatNumber,
            key: "impressions"
        },
        {
            resizeable: false,
            description: "Spend for the summary",
            sortable: true,
            label: "Spend",
            iconClass: "wrIcon mb showHelp",
            formatter: yuiTable.formatMoney,
            key: "spent",
            feature:"summarySpent"
        }
    ],
    schema : {
        fields : ["date", "impressions", "spent"]
    },
    state : {
        page : {rowsPerPage : 10,visibility : "auto"},
        sort : {key : "date",dir : 1,local : false}
    }
};

-----------------------------------------------------------------------------------------------------------------------------------