Jquery根据JSON生成Table_json

先说下背景

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


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


HTML代码为:



[html] ​​view plain​​ ​​copy​​

​​print​​​​?​​

  2. <div id="content" class="content">  
  3.             <table id="body-table">  
  4.                 <tr>  
  5.                     <td class="left-panel" valign="top">  
  6.                         <ul id="navtree" style="float:left;">  
  7.                         </ul>  
  8.                     </td>     
  9.                     <td class="center-panel" valign="top">  
  10.                         <div style="float:right;">  
  11.                              <table id="table1" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6">    
  12.                               <tr>  
  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">朝向</span></div></td>  
  18.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">1床</span></div></td>  
  19.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">2床</span></div></td>  
  20.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">3床</span></div></td>  
  21.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">4床</span></div></td>  
  22.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">5床</span></div></td>  
  23.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">6床</span></div></td>  
  24.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">7床</span></div></td>  
  25.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">8床</span></div></td>  
  26.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">9床</span></div></td>  
  27.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">10床</span></div></td>  
  28.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">11床</span></div></td>  
  29.                                 <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">12床</span></div></td>  
  30.                               </tr>    
  31.                             </table>  
  32.                         </div>  
  33.                           
  34.                     </td>  
  35.                 </tr>  
  36.             </table>  
  37.         </div>  
<div id="content" class="content">
            <table id="body-table">
                <tr>
                    <td class="left-panel" valign="top">
                        <ul id="navtree" style="float:left;">
                        </ul>
                    </td>   
                    <td class="center-panel" valign="top">
                        <div style="float:right;">
                             <table id="table1" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6">  
                              <tr>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">大厦</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">楼层</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">房间</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">类型</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">朝向</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">1床</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">2床</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">3床</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">4床</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">5床</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">6床</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">7床</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">8床</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">9床</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">10床</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">11床</span></div></td>
                                <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">12床</span></div></td>
                              </tr>  
                            </table>
                        </div>
                </td>
            </tr>
        </table>
    </div></pre><br><br><p><strong><span style="font-size:18px;">JS代码为:</span></strong></p>






[javascript] view plain copy

 print?

1. 

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



(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<eval（data).length;i++){
                  var bedsSize=eval（data)[i].beds.length; 

                  var trBegin ="<tr>";
                  var td1 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval（data)[i].houseName+"</span></div></td>";
                  var td2 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval（data)[i].floorName+"</span></div></td>";
                  var td3 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval（data)[i].roomName+"</span></div></td>";
                  var td4 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval（data)[i].roomNum+"</span></div></td>";
                  var td5 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval（data)[i].roomType+"</span></div></td>";

                  var beds ="";
                  for( var h=0;h<bedsSize; h++){
                      //var subTd = "<td style=\"background:yellow\" onclick='testAlert(\""+eval（data)[i].beds[h].opName+"\")'>"+eval（data)[i].beds[h].status+"</td>";
                      var subTd = statusColor(eval（data)[i].beds[h].status,eval（data)[i].beds[h].opName);
                      beds+=subTd;
                  }
                  var trEnd ="</tr>";
                  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<eval（data).length;i++){
                  var bedsSize=eval（data)[i].beds.length; 

                  var trBegin ="<tr>";
                  var td1 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval（data)[i].houseName+"</span></div></td>";
                  var td2 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval（data)[i].floorName+"</span></div></td>";
                  var td3 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval（data)[i].roomName+"</span></div></td>";
                  var td4 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval（data)[i].roomNum+"</span></div></td>";
                  var td5 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval（data)[i].roomType+"</span></div></td>";

                  var beds ="";
                  for( var h=0;h<bedsSize; h++){
                      //var subTd = "<td style=\"background:yellow\" onclick='testAlert(\""+eval（data)[i].beds[h].opName+"\")'>"+eval（data)[i].beds[h].status+"</td>";
                      var subTd = statusColor(eval（data)[i].beds[h].status,eval（data)[i].beds[h].opName);
                      beds+=subTd;
                  }
                  var trEnd ="</tr>";
                  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 "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:#66B3FF\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">空闲</span></div></td>";
    }else if( status == 1){
        return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:Crimson\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">使用</span></div></td>";
    }else if( status == 2){
        return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:Orange\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">预约</span></div></td>";
    }else if( status == 3){
        return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:Yellow\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">请假</span></div></td>";
    }else if( status == 4){
        return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:HotPink\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">试住</span></div></td>";
    }
}</pre><br><br><p><br></p>

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


[{"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