Jquery根据JSON生成Table

其他 2018-05-29 14:17:41 阅读次数: 1

先说下背景

本人属于juqery小白中的极品小白.基本对于JS jquery这些不懂.用到时候基本百度下 拿过来改改OK. 上面这东西让我弄了三天.可能对于其他人来说 一天就搞定了 .看来还真得去学一下juqery一下了.  废话不多说了.


系统目前使用的是STRUTS1 界面为JSP


HTML代码为:

[html] view plain copy
print ?
  1. <div id="content" class="content">  
  2.             <table id="body-table">  
  3.                 <tr>  
  4.                     <td class="left-panel" valign="top">  
  5.                         <ul id="navtree" style="float:left;">  
  6.                         </ul>  
  7.                     </td>     
  8.                     <td class="center-panel" valign="top">  
  9.                         <div style="float:right;">  
  10.                              <table id="table1" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6">    
  11.                               <tr>  
  12.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">大厦</span></div></td>  
  13.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">楼层</span></div></td>  
  14.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">房间</span></div></td>  
  15.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">类型</span></div></td>  
  16.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">朝向</span></div></td>  
  17.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">1床</span></div></td>  
  18.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">2床</span></div></td>  
  19.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">3床</span></div></td>  
  20.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">4床</span></div></td>  
  21.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">5床</span></div></td>  
  22.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">6床</span></div></td>  
  23.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">7床</span></div></td>  
  24.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">8床</span></div></td>  
  25.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">9床</span></div></td>  
  26.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">10床</span></div></td>  
  27.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">11床</span></div></td>  
  28.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">12床</span></div></td>  
  29.                               </tr>    
  30.                             </table>  
  31.                         </div>  
  32.                           
  33.                     </td>  
  34.                 </tr>  
  35.             </table>  
  36.         </div>  


JS代码为:


[javascript] view plain copy
print ?
  1. (function ($) {  
  2.         $.jsonList = function (obj) {  
  3.             this.listTable = function () {     //this.testFun方法，加上了this，就是公有方法了，外部可以访问。  
  4.                // alert(obj1.floorId + "," + obj2.houseId);  
  5.                 var action = obj.action ;  
  6.                 alert(obj.action);  
  7.                 alert("a= " + obj.floorId);  
  8.                 if(obj.action == 'floor'){  
  9.                     action = "bedlist";  
  10.                 }else{  
  11.                     action = "bedInit";  
  12.                     obj.floorId = obj.houseId;  
  13.                 }  
  14.                 alert("b= " + obj.floorId);  
  15.                 $.post("getBed.jsp",{  
  16.                      floorId:obj.floorId,  
  17.                      action:action  
  18.                        
  19.                 },function(data,status){  
  20.                     $("#table1  tr:not(:first)").empty();  
  21.                   for(var i=0;i<eval(data).length;i++){  
  22.                       var bedsSize=eval(data)[i].beds.length;   
  23.                         
  24.                       var trBegin ="<tr>";  
  25.                       var td1 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].houseName+"</span></div></td>";  
  26.                       var td2 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].floorName+"</span></div></td>";  
  27.                       var td3 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].roomName+"</span></div></td>";  
  28.                       var td4 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].roomNum+"</span></div></td>";  
  29.                       var td5 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].roomType+"</span></div></td>";  
  30.                         
  31.                       var beds ="";  
  32.                       for( var h=0;h<bedsSize; h++){  
  33.                           //var subTd = "<td style=\"background:yellow\" onclick='testAlert(\""+eval(data)[i].beds[h].opName+"\")'>"+eval(data)[i].beds[h].status+"</td>";  
  34.                           var subTd = statusColor(eval(data)[i].beds[h].status,eval(data)[i].beds[h].opName);  
  35.                           beds+=subTd;  
  36.                       }  
  37.                       var trEnd ="</tr>";  
  38.                       var room = trBegin + td1 + td2 + td3 + td4 + td5 + beds + trEnd;  
  39.                       $("#table1").append(room);    
  40.                   }  
  41.                 });  
  42.             };  
  43.         };  
  44.     })(jQuery);  
  45.       
  46.       
  47.     $(document).ready(function(){  
  48.             $("#navtree").omTree({  
  49.                 dataSource : 'getBed.jsp?action=houselist',  
  50.                 showIcon:false,  
  51.                 lineHover:true,  
  52.                 onSelect: function(nodedata){  
  53.                     if(!nodedata.children && nodedata.text){  
  54.                         alert("楼层ID = "+nodedata.floorId);  
  55.                         var a = new $.jsonList({ floorId: nodedata.floorId,action:"floor" });  
  56.                         a.listTable();  
  57.                     }else {  
  58.                         alert("大厦ID = "+nodedata.houseId);  
  59.                         var a = new $.jsonList({ houseId: nodedata.houseId, action:"house"});  
  60.                         a.listTable();  
  61.                     }  
  62.                 }  
  63.             });  
  64.               
  65.              $.post("getBed.jsp",{  
  66.                  floorId:"1",  
  67.                  action:"bedlist"  
  68.                 },function(data,status){  
  69.                   for(var i=0;i<eval(data).length;i++){  
  70.                       var bedsSize=eval(data)[i].beds.length;   
  71.                         
  72.                       var trBegin ="<tr>";  
  73.                       var td1 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].houseName+"</span></div></td>";  
  74.                       var td2 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].floorName+"</span></div></td>";  
  75.                       var td3 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].roomName+"</span></div></td>";  
  76.                       var td4 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].roomNum+"</span></div></td>";  
  77.                       var td5 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].roomType+"</span></div></td>";  
  78.                         
  79.                       var beds ="";  
  80.                       for( var h=0;h<bedsSize; h++){  
  81.                           //var subTd = "<td style=\"background:yellow\" onclick='testAlert(\""+eval(data)[i].beds[h].opName+"\")'>"+eval(data)[i].beds[h].status+"</td>";  
  82.                           var subTd = statusColor(eval(data)[i].beds[h].status,eval(data)[i].beds[h].opName);  
  83.                           beds+=subTd;  
  84.                       }  
  85.                       var trEnd ="</tr>";  
  86.                       var room = trBegin + td1 + td2 + td3 + td4 + td5 + beds + trEnd;  
  87.                       $("#table1").append(room);    
  88.                   }  
  89.                 });  
  90.     });  
  91.       
  92.       
  93.       
  94.       
  95.       
  96.     function testAlert(obj){  
  97.         if(obj == ''){  
  98.             alert("没有信息哦");  
  99.             return;  
  100.         }  
  101.         alert(obj);  
  102.     }  
  103.       
  104.     //床位状态:0,空闲;1,使用;2,预约;3,请假;4,试住;    
  105.     function statusColor(status,opName){  
  106.         if( status == 0){  
  107.             return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:#66B3FF\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">空闲</span></div></td>";  
  108.         }else if( status == 1){  
  109.             return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:Crimson\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">使用</span></div></td>";  
  110.         }else if( status == 2){  
  111.             return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:Orange\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">预约</span></div></td>";  
  112.         }else if( status == 3){  
  113.             return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:Yellow\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">请假</span></div></td>";  
  114.         }else if( status == 4){  
  115.             return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:HotPink\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">试住</span></div></td>";  
  116.         }  
  117.     }  



JSON格式为:

[plain] view plain copy
print ?
  1. [{"beds":[{"bedId":1,"bedIndex":1,"opId":0,"opName":"","status":0},{"bedId":2,"bedIndex":2,"opId":0,"opName":"","status":1},{"bedId":3,"bedIndex":3,"opId":0,"opName":"","status":2},{"bedId":4,"bedIndex":4,"opId":0,"opName":"","status":3},{"bedId":5,"bedIndex":5,"opId":0,"opName":"","status":4},{"bedId":6,"bedIndex":6,"opId":0,"opName":"","status":0}],"floorName":"一层","houseName":"哈哈楼","roomName":"测试房间","roomNum":"六人间","roomType":"朝北"},{"beds":[{"bedId":7,"bedIndex":1,"opId":0,"opName":"","status":0}],"floorName":"二层","houseName":"哈哈楼","roomName":"1101号房","roomNum":"单人间","roomType":"朝东"}]  



其中左侧树用的是 一个开源的UI插件 叫做OM-TREE.JS

右侧List列表是我自己封装的一个类jsonList

猜你喜欢

转载自www.cnblogs.com/jpfss/p/9104681.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022