zoukankan      html  css  js  c++  java

  • Jquery根据JSON生成Table

    先说下背景

    本人属于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
  • 相关阅读:
    js获取元素位置和style的兼容性写法
    javascript正则表达式---正向预查
    Typescript学习笔记（五） 模块机制
    Typescript学习笔记（四）class 类
    Typescript学习笔记（三）变量声明及作用域
    Typescript学习笔记（二）枚举
    Typescript学习笔记（一）基础类型
    tar命令
    linux的nohup命令的用法。
    vue.js移动端app实战1
  • 原文地址：https://www.cnblogs.com/jpfss/p/9104681.html
Copyright © 2011-2022 走看看