Code:<table cellpadding="2" cellspacing="0" width="790" border="0" > <thead> <tr class="tabletitle"> <td width="148" style="text-align: left"> Name</td> <td width="42">Last</td> <td width="64" style="text-align: center">Time</td> <td width="24" style="text-align: center">+/-</td> <td width="61">Change</td> <td width="50">Bid Size</td> <td width="50">Bid</td> <td width="50">Ask</td> <td width="50">Ask Size</td> <td width="50">Min</td> <td width="50">Max</td> <td width="50">Ref.</td> <td width="50">Open</td> </tr> </thead> <tbody> <tr id="stocks" data-source="lightstreamer" class="lscoldA" border="0"> <td nowrap style="text-align: left"> <a href="#" data-source="lightstreamer" data-field="click" data-update="onclick"> <img src="images/popup.gif" width="16" height="16" border="0" align="left" hspace="1" alt="Graphic Chart"> <div id="stockName" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #000080; background: #eeeeee; font-weight: bold; text-align: left;" data-source="lightstreamer" data-field="stock_name">Loading...</div> </a> </td> <td><div data-source="lightstreamer" data-field="last_price">-</div></td> <td><div data-source="lightstreamer" data-field="time">-</div></td> <td> <div> <img data-source="lightstreamer" data-field="arrow" data-update="src" src="images/spacer.gif" width="20" height="8" border="0"> </div> </td> <td nowrap="nowrap"><div data-source="lightstreamer" data-field="pct_change">-</div></td> <td><div data-source="lightstreamer" data-field="bid_quantity">-</div></td> <td><div data-source="lightstreamer" data-field="bid">-</div></td> <td><div data-source="lightstreamer" data-field="ask">-</div></td> <td><div data-source="lightstreamer" data-field="ask_quantity">-</div></td> <td><div data-source="lightstreamer" data-field="min">-</div></td> <td><div data-source="lightstreamer" data-field="max">-</div></td> <td><div data-source="lightstreamer" data-field="ref_price">-</div></td> <td><div data-source="lightstreamer" data-field="open_price">-</div></td> </tr> </tbody> <tfoot> <tr> <td class="disc">Simulated market data.</td> <td colspan="12" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; background: #ffffff; font-weight: bold; text-align: right"> <a href="#" id="switchP2" style="display:none" onClick="changePage(2); return false;"> Next 15 >> </a> <a href="#" id="switchP1" style="display:none" onClick="changePage(1); return false;"> << Previous 15 </a> </td> </tr> </tfoot> </table> <script> //////////////// Connect to current host (or localhost) and configure a StatusWidget var hostToUse = document.location.protocol == "file:" ? "http://localhost:8080" : document.location.protocol+"//"+document.location.hostname+(document.location.port?":"+document.location.port:""); define("sharingClient",["LightstreamerClient","StatusWidget"],function(LightstreamerClient,StatusWidget) { var sharingClient = new LightstreamerClient(hostToUse,"DEMO"); sharingClient.connectionSharing.enableSharing("DemoCommonConnection", "ATTACH", "CREATE"); sharingClient.addListener(new StatusWidget("right", "0px", true)); sharingClient.connect(); return sharingClient; }); </script> <script src="format.js" type="text/javascript"></script> <script type="text/javascript"> var redColor = "#f8b87a"; var greenColor = "lightgreen"; var backC = "transparent"; var hotTxtCol = "#000000"; var fieldsList = ["last_price", "time", "pct_change", "bid_quantity", "bid", "ask", "ask_quantity", "min", "max", "ref_price", "open_price", "stock_name", "item_status"]; var itemList1 = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9", "item10", "item11", "item12", "item13", "item14", "item15"]; var itemList2 = ["item16", "item17", "item18", "item19", "item20", "item21", "item22", "item23", "item24", "item25", "item26", "item27", "item28", "item29", "item30"]; var imgUp = "images/quotes_up.gif"; var imgDown = "images/quotes_down.gif"; var doFade = location.search.indexOf("fade=ON") > -1; var unique = Math.floor(Math.random() * 1000); var lsClient; var subsItemList1; var subsItemList2; var styleH = "lshot"; var styleC = "lscold"; var count=0; var flag=0; var flag2=0; require(["sharingClient","Subscription","DynaGrid"], function(sharingClient,Subscription,DynaGrid) { var dynaGrid = new DynaGrid("stocks",true); var cellList = dynaGrid.extractFieldList() dynaGrid.setSort("stock_name"); dynaGrid.setNodeTypes(["div","span","img","a"]); dynaGrid.setAutoCleanBehavior(true, false); dynaGrid.addListener({ onVisualUpdate: function(key,info,domNode) { if(flag2==0) { count++; if(count>=15) $("table > tbody > tr:gt(16)").hide(); if(count>=31) flag2=1; } if (info == null) { return; } //general style and effects info.setHotTime(400); info.setStyle(styleH,styleC); if (info.getChangedFieldValue("stock_name") != null) { dynaGrid.updateRow(key,{click:"openPopup('"+key+"');return false;"}); } else if (doFade) { info.setHotToColdTime(300); } var cold = (key.substring(4) % 2 == 1) ? "#eeeeee" : "#ddddee"; domNode.style.backgroundColor = cold; if (info.getChangedFieldValue("item_status") == "inactive") { //possible if testing the JMS version of the Data Adapter //if it happens we want all the cells to be highlighted in grey; //first we force the highlighting on every cell forceHighlight(info,true,cellList); info.setAttribute("#808080","#808080","color"); } else { if ((info.getChangedFieldValue("item_status") == "active" && dynaGrid.getValue(key,"item_status") == "inactive")) { //possible if testing the JMS version of the Data Adapter //so we force again the highlighting on every cell to restore //the "active" color forceHighlight(info,true,cellList); info.setAttribute("#000000","#000000","color"); info.setCellAttribute("stock_name","#000080","#000080","color"); } // illumination color // choose the backgroundColor var lastPrice = info.getChangedFieldValue("last_price"); if (lastPrice !== null) { var prevPrice = dynaGrid.getValue(key,"last_price"); if (!prevPrice || lastPrice > prevPrice) { info.setAttribute(greenColor,cold,"backgroundColor"); } else { info.setAttribute(redColor,cold,"backgroundColor"); } } else { info.setAttribute(greenColor,cold,"backgroundColor"); } //put arrow and handle change style var pctChange = info.getChangedFieldValue("pct_change"); if (pctChange !== null) { pctChange = formatDecimal(pctChange,2,true)+"%"; hotTxtCol = (pctChange.charAt(0) == '-') ? "#dd0000" : "#009900"; if (pctChange.indexOf("-") > -1) { info.setCellValue("arrow",imgDown); info.setCellAttribute("arrow",cold,cold,"backgroundColor"); info.setCellAttribute("pct_change","black",hotTxtCol,"color"); info.setCellValue("pct_change",pctChange); } else { info.setCellValue("arrow",imgUp); info.setCellAttribute("arrow",cold,cold,"backgroundColor"); info.setCellAttribute("pct_change","black",hotTxtCol,"color"); info.setCellValue("pct_change","+"+pctChange); } info.setCellAttribute("pct_change","bold","bold","fontWeight"); } // format decimal fields. formatDecimalField(info, "last_price"); formatDecimalField(info, "bid"); formatDecimalField(info, "ask"); formatDecimalField(info, "min"); formatDecimalField(info, "max"); formatDecimalField(info, "ref_price"); formatDecimalField(info, "open_price"); // format the timestamp var time = info.getChangedFieldValue("time"); if (time != null) { info.setCellValue("time",formatTime(time)); } } } }); subsItemList1 = new Subscription("MERGE",itemList1,fieldsList); subsItemList1.addListener(dynaGrid); subsItemList1.setDataAdapter("QUOTE_ADAPTER"); subsItemList1.setRequestedSnapshot("yes"); subsItemList1.setRequestedMaxFrequency(1); subsItemList2 = new Subscription("MERGE",itemList2,fieldsList); subsItemList2.addListener(dynaGrid); subsItemList2.setDataAdapter("QUOTE_ADAPTER"); subsItemList2.setRequestedSnapshot("yes"); subsItemList2.setRequestedMaxFrequency(0.1); sharingClient.subscribe(subsItemList1); sharingClient.subscribe(subsItemList2); //we may also subscribe both lists simultaneously lsClient = sharingClient; //enable switch document.getElementById("switchP2").style.display = ""; }); //////////////// Stock Details Popup Management function openPopup(item) { var wdt = window.open("popup.html?item=" + item, "SLDpopup_" + unique + "_" + item, "width=535,height=238,history=0,resizable,status=1,menubar=1"); wdt.focus(); return false; } //////////////// Stock Grid Management function changePage(groupNumber) { rowlimit =15; if (groupNumber == 1) { $("table > tbody > tr:eq(1)").hide(); $("table > tbody > tr:lt(16)").show(); $("table > tbody > tr:gt(16)").hide(); document.getElementById("switchP1").style.display = "none"; document.getElementById("switchP2").style.display = ""; //// lsClient.unsubscribe(subsItemList2); // lsClient.subscribe(subsItemList1); } else if (groupNumber == 2) { $("table > tbody > tr:lt(16)").hide(); $("table > tbody > tr:gt(16)").show(); document.getElementById("switchP1").style.display = ""; document.getElementById("switchP2").style.display = "none"; // lsClient.unsubscribe(subsItemList1); // lsClient.subscribe(subsItemList2); } } $(document).ready(function() { // Handler for .ready() called. $("table > tbody > tr:gt(16)").hide(); }); </script> </body> </html>
Bookmarks