Jquery根据JSON生成Table

来源：互联网发布：电信宽带测速软件编辑：程序博客网时间：2024/05/17 02:20

先说下背景

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

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

HTML代码为:

<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>

JS代码为:

(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>";    }    }

JSON格式为:

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

0 0