博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
Jquery根据JSON生成Table
阅读量：7213 次
发布时间：2019-06-29

本文共 13342 字，大约阅读时间需要 44 分钟。

先说下背景

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

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

HTML代码为:

[html]
  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>  
     
            
      
                               
                                                     
                              		                                                        
          
 
           
                          
               
               
                大厦
               
               
               
                楼层
               
               
               
                房间
               
               
               
                类型
               
               
               
                朝向
               
               
               
                1床
               
               
               
                2床
               
               
               
                3床
               
               
               
                4床
               
               
               
                5床
               
               
               
                6床
               
               
               
                7床
               
               
               
                8床
               
               
               
                9床
               
               
               
                10床
               
               
               
                11床
               
               
               
                12床

JS代码为:

[javascript]
  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\" οnclick='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\" οnclick='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\" οnclick='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\" οnclick='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\" οnclick='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\" οnclick='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\" οnclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">试住</span></div></td>";  
  116.         }  
  117.     }  
(function ($) {        $.jsonList = function (obj) {            this.listTable = function () {     //this.testFun方法，加上了this，就是公有方法了，外部可以访问。               // alert(obj1.floorId + "," + obj2.houseId);                var action = obj.action ;                alert(obj.action);                alert("a= " + obj.floorId);                if(obj.action == 'floor'){                    action = "bedlist";                }else{                    action = "bedInit";                    obj.floorId = obj.houseId;                }                alert("b= " + obj.floorId);                $.post("getBed.jsp",{                     floorId:obj.floorId,                     action:action                                     },function(data,status){                    $("#table1  tr:not(:first)").empty();                  for(var i=0;i
     
      ";                      var td2 = "
      
       "+eval(data)[i].floorName+"
      
";                      var td3 = "
      
       "+eval(data)[i].roomName+"
      
";                      var td4 = "
      
       "+eval(data)[i].roomNum+"
      
";                      var td5 = "
      
       "+eval(data)[i].roomType+"
      
";                                            var beds ="";                      for( var h=0;h
      
       "+eval(data)[i].beds[h].status+"";                          var subTd = statusColor(eval(data)[i].beds[h].status,eval(data)[i].beds[h].opName);                          beds+=subTd;                      }                      var trEnd ="";                      var room = trBegin + td1 + td2 + td3 + td4 + td5 + beds + trEnd;                      $("#table1").append(room);                    }                });            };        };    })(jQuery);            $(document).ready(function(){            $("#navtree").omTree({                dataSource : 'getBed.jsp?action=houselist',                showIcon:false,                lineHover:true,                onSelect: function(nodedata){                    if(!nodedata.children && nodedata.text){                        alert("楼层ID = "+nodedata.floorId);                        var a = new $.jsonList({ floorId: nodedata.floorId,action:"floor" });                        a.listTable();                    }else {                        alert("大厦ID = "+nodedata.houseId);                        var a = new $.jsonList({ houseId: nodedata.houseId, action:"house"});                        a.listTable();                    }                }            });                         $.post("getBed.jsp",{                 floorId:"1",                 action:"bedlist"                },function(data,status){                  for(var i=0;i
       
        ";                      var td2 = "
        
         "+eval(data)[i].floorName+"
        
";                      var td3 = "
        
         "+eval(data)[i].roomName+"
        
";                      var td4 = "
        
         "+eval(data)[i].roomNum+"
        
";                      var td5 = "
        
         "+eval(data)[i].roomType+"
        
";                                            var beds ="";                      for( var h=0;h
        
         "+eval(data)[i].beds[h].status+"";                          var subTd = statusColor(eval(data)[i].beds[h].status,eval(data)[i].beds[h].opName);                          beds+=subTd;                      }                      var trEnd ="";                      var room = trBegin + td1 + td2 + td3 + td4 + td5 + beds + trEnd;                      $("#table1").append(room);                    }                });    });                        function testAlert(obj){        if(obj == ''){            alert("没有信息哦");            return;        }        alert(obj);    }        //床位状态:0,空闲;1,使用;2,预约;3,请假;4,试住;      function statusColor(status,opName){        if( status == 0){            return "
         
          空闲
         
";        }else if( status == 1){            return "
         
          使用
         
";        }else if( status == 2){            return "
         
          预约
         
";        }else if( status == 3){            return "
         
          请假
         
";        }else if( status == 4){            return "
         
          试住
         
";        }    }

JSON格式为:

[plain]
  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":"朝东"}]  
[{"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

你可能感兴趣的文章
区块链软件公司：创新的区块链技术如何改变法律行业的面貌
查看>>
一张时序图让你看懂：脏读、不可重复读
查看>>
js创建对象的几种方法
查看>>
浮点数杂想
查看>>
摧枯拉朽，说说ES6的三把火
查看>>
Java/Android基础-02
查看>>
nginx代理响应报文体不全解决思路
查看>>
前端性能优化 —— 项目瘦身
查看>>
全球人形机器人接连突破 拟人度越来越高
查看>>
vue按需加载
查看>>
创成汇2019年参加创新创业大赛都能获得什么？
查看>>
vue双向数据绑定原理
查看>>
美研究最新生物活性玻璃 可消灭致命的细菌
查看>>
内部类
查看>>
Vue中数组赋值问题
查看>>
APK path is not specified for module
查看>>
Linux运维宝典：最常用的150个命令汇总
查看>>
使用RecycleView实现无限滚动的日历
查看>>
Golang Failpoint 的设计与实现
查看>>
小微贷是美团的上坡之路？
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2025-02-14 21:13:09   当前IP: 18.216.52.58   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我