有个需求，页面数据需要显示成酒店管理系统的房态页面样式，本来以为会很麻烦，结果找了半天没找到现成的demo，翻了不少博客，弄出来之后，发现是真的简单，这里贴上我的是实现方式。

效果如图：

数据渲染首先是拿到数据，这里直接模拟后端返回的json数据：

    var data = [
    	{
    		"id": "1",
    		"name": "面板单元格1",
    		"state": 0,
    	},
    	{
    		"id": "2",
    		"name": "面板单元格2",
    		"state": 1,
    	},
    	{
    		"id": "3",
    		"name": "面板单元格3",
    		"state": 2,
    	},
    	{
    		"id": "4",
    		"name": "面板单元格4",
    		"state": 3,
    	}
    	];

这里data数据中最重要的一个属性是：状态值state，这个可以作为区分面板的标识，在元素拼接时，根据state来决定需要引入的样式。

然后就是对json数据进行遍历，循环拼接html元素。在页面里先定义一个用来存放面板的div，声明div的id为mbId，样式的话，这里"class="col-md-12 col-sm-12 margin-top20"和class="list-group""使用的是bootstrap的样式，

			<!-- 面板div -->
		    <div class="col-md-12 col-sm-12 margin-top20">
		    	<div id="mbId" class="list-group">
		    	</div>
		    </div>

定义面板单元格的css样式：

    .div1 {
            width: 110px;
            height: 70px;
            border: 1px solid #1cc09f;
            border-radius: 5px;
            background: #1cc09f;
            float: left;
            margin: 2px;
            text-align: center;
            color: white;
            cursor: pointer;
        }
        
    .div2 {
            width: 110px;
            height: 70px;
            border: 1px solid #1cc09f;
            border-radius: 5px;
            background: #ec7e7e;
            float: left;
            margin: 2px;
            text-align: center;
            color: white;
            cursor: pointer;
        }
        
    .div3 {
            width: 110px;
            height: 70px;
            border: 1px solid #1cc09f;
            border-radius: 5px;
            background: #f3a633;
            float: left;
            margin: 2px;
            text-align: center;
            color: white;
            cursor: pointer;
        }

下面就是js里面对数据进行拼接渲染了：

$(function(){
    	console.log("123init......");
    	initPage(data);
    	initPage(data);
    	initPage(data);
    	initPage(data);
    	initPage(data);
    	initPage(data);
    	initPage(data);
    });

    function initPage(data){
    	var tempData;
    	$.each(data, function(i){
    		//console.log(data[i]);
    		tempData = data[i];
    		if(tempData.state == 0 || tempData.state == 3){
	    		$("#mbId").append("<li οnclick='myclick(" + tempData.id + ")' class='div1'>"
	    			+ "<div>" + tempData.id + "</div>"		
	    			+ "<div>" + tempData.name + "</div>"		
	    			+ "</li>");
    		}
    		if(tempData.state == 2){
	    		$("#mbId").append("<li οnclick='myclick(" + tempData.id + ")' class='div2'>"
	    			+ "<div>" + tempData.id + "</div>"		
	    			+ "<div>" + tempData.name + "</div>"		
	    			+ "</li>");
    		}
    		if(tempData.state == 1){
	    		$("#mbId").append("<li οnclick='myclick(" + tempData.id + ")' class='div3'>"
	    			+ "<div>" + tempData.id + "</div>"		
	    			+ "<div>" + tempData.name + "</div>"		
	    			+ "</li>");
    		}
    	});
    }
    
    function myclick(id){
    	console.log("点击了ID为：" + id + "的面板块。。。。。");
    }

对数据的循环遍历使用的是$.each

$.each(data, function(i){
}

这里拼接使用的是<li>标签，也可以换成<a>标签，因为我想着面板的单元格，应该带有点击查看的功能，这里选用了<li>标签，鼠标悬浮单元格上时，鼠标自动变成小手的标志。点击单元格后触发myclick函数，这里可以改为自定义的函数，参数的话，直接拼接在方法里面就好了。即使做成点击单元格页面跳转的方式，也可以在自定义函数里面处理。

<li>标签的内部使用了div块，这里可以更灵活的配置样式，可以引入自定义的icon或者图片，更形象的展示面板的状态。