dyvel 20 Posted February 14, 2015 Report Share Posted February 14, 2015 Hi guys Here's a small snippet I made showing an example, how to fill a table with data in a UI HTML panel. This can easily be extended to use a ubot table to fill the UI HTML table. ui html panel("<style> body \{ font-family: arial; font-size: 12px; \} .container \{ height: 200px; overflow: auto \} table \{ border: 1px solid #000; \} tbody td, thead th \{ border-bottom: 1px solid #000; \} th, td \{ padding: 4px; \} </style> <div class=\"container\"> <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> <thead> <tr> <th>This is my header</th> </tr> </thead> <tfoot> <tr> <td>This is my footer</td> </tr> </tfoot> <tbody variable=\"#tabledata\" fillwith=\"innerhtml\"> </tbody> </table> </div>",300) set(#tabledata,$nothing,"Global") set(#value,0,"Global") loop(10) { set(#data,"Table data {#value}","Global") set(#tablerow,"<tr><td>{#data}</td></tr>","Global") set(#tabledata,$append line to text(#tabledata,#tablerow),"Global") increment(#value) } I hope you like it :-)Table data example.ubot 1 Quote Link to post Share on other sites
dyvel 20 Posted February 14, 2015 Author Report Share Posted February 14, 2015 And here using jQuery + Bootstrap to prettify it a bit... <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script type="text/javascript" charset="utf8" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </head> <body> <div class="table-container"> <table id="grid-basic" class="table table-condensed table-hover table-striped" data-toggle="bootgrid"> <thead> <tr> <th>This is my header</th> </tr> </thead> <tfoot> <tr> <td>This is my footer</td> </tr> </tfoot> <tbody variable="#tabledata" fillwith="innerhtml"> </tbody> </table> </div> </body> </html> Table data example.ubot Quote Link to post Share on other sites
blumi40 222 Posted February 14, 2015 Report Share Posted February 14, 2015 good example thx Quote Link to post Share on other sites
dyvel 20 Posted February 14, 2015 Author Report Share Posted February 14, 2015 And a closer to real world example using a list to populate the table set(#tabledata,$nothing,"Global") set(#i,0,"Global") clear list(%data_list) add list to list(%data_list,$list from text("Table data 0 Table data 1 Table data 2 Table data 3 Table data 4 Table data 5 Table data 6 Table data 7 Table data 8 Table data 9 Table data 10 Table data 11 Table data 12 Table data 13 Table data 14 Table data 15 Table data 16 Table data 17 Table data 18 Table data 19 Table data 20 Table data 21 Table data 22 Table data 23 Table data 24 Table data 25 Table data 26 Table data 27 Table data 28 Table data 29 Table data 30 Table data 31 Table data 32 Table data 33 Table data 34 Table data 35 Table data 36 Table data 37 Table data 38 Table data 39 Table data 40 Table data 41 Table data 42 Table data 43 Table data 44 Table data 45 Table data 46 Table data 47 Table data 48 Table data 49",$new line),"Delete","Global") loop while($comparison($list total(%data_list),">",#i)) { set(#data,"Table data {#i}","Global") set(#tablerow,"<tr><td>{#data}</td></tr>","Global") set(#tabledata,$append line to text(#tabledata,#tablerow),"Global") increment(#i) } ui html panel("<html> <head> <link rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css\"> <script type=\"text/javascript\" charset=\"utf8\" src=\"https://code.jquery.com/jquery-2.1.3.min.js\"></script> <script type=\"text/javascript\" charset=\"utf8\" src=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js\"></script> </head> <body> <div class=\"table-container\"> <table id=\"grid-basic\" class=\"table table-condensed table-hover table-striped\" data-toggle=\"bootgrid\"> <thead> <tr> <th>This is my header</th> </tr> </thead> <tfoot> <tr> <td>This is my footer</td> </tr> </tfoot> <tbody variable=\"#tabledata\" fillwith=\"innerhtml\"> </tbody> </table> </div> </body> </html>",300) Table data example.ubot Quote Link to post Share on other sites
dyvel 20 Posted February 14, 2015 Author Report Share Posted February 14, 2015 And here's the final example using a table to populate the HTML table. The header and footer are created manually in the define makeDemoTable. The rest is done automatically calculating the number of columns and rows in the table. on load("Bot Loaded") { makeDemoTable() makeHTMLTableRows() } define makeDemoTable { set(#i,0,"Global") loop(10) { add list to table as row(&data_table,#i,0,$list from text("Cell 1, Cell 2, Cell 3, Cell 4",",")) increment(#i) set(#table_head,"<tr> <th>This is my header</th> <th>This is my header</th> <th>This is my header</th> <th>This is my header</th> </tr> ","Global") set(#table_footer,"<tr> <td>This is my footer</td> <td>This is my footer</td> <td>This is my footer</td> <td>This is my footer</td> </tr>","Global") } } define makeHTMLTableRows { set(#table_columns,$table total columns(&data_table),"Global") set(#table_row,$nothing,"Global") set(#j,0,"Global") set(#k,0,"Global") loop while($comparison($table total rows(&data_table),">",#j)) { set(#table_row,$append line to text(#table_row,"<tr>"),"Global") set(#k,0,"Global") loop while($comparison(#table_columns,">",#k)) { set(#table_row,$append line to text(#table_row,"<td>{$table cell(&data_table,#j,#k)}</td>"),"Global") increment(#k) } set(#table_row,$append line to text(#table_row,"</tr>"),"Global") increment(#j) } } ui html panel("<html> <head> <link rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css\"> <script type=\"text/javascript\" charset=\"utf8\" src=\"https://code.jquery.com/jquery-2.1.3.min.js\"></script> <script type=\"text/javascript\" charset=\"utf8\" src=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js\"></script> </head> <body> <div class=\"table-container\"> <table id=\"grid-basic\" class=\"table table-condensed table-hover table-striped\" data-toggle=\"bootgrid\"> <thead variable=\"#table_head\" fillwith=\"innerhtml\"></thead> <tfoot variable=\"#table_footer\" fillwith=\"innerhtml\"></tfoot> <tbody variable=\"#table_row\" fillwith=\"innerhtml\"> </tbody> </table> </div> </body> </html>",300) Table data example.ubot 1 Quote Link to post Share on other sites
Pete 121 Posted February 14, 2015 Report Share Posted February 14, 2015 Just hope I can find it when I need it Quote Link to post Share on other sites
dyvel 20 Posted February 14, 2015 Author Report Share Posted February 14, 2015 Just hope I can find it when I need it Download the bot I've attached - problem solved Anyway - hope you can use it... Cheers Quote Link to post Share on other sites
Code Docta (Nick C.) 638 Posted February 15, 2015 Report Share Posted February 15, 2015 Very good Sir!!! Love to see more...I think we will see a lot from you! I appreciate it for sure. CD Quote Link to post Share on other sites
ianshier 1 Posted February 18, 2015 Report Share Posted February 18, 2015 Hello Dyvel.Nice work.I can't write a PM to you, can you answer in this topic how you solved this problem?http://www.ubotstudio.com/forum/index.php?/topic/17528-ui-html-dropdown-values-from-variable-resolved/Thanks for reply! Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.