对数据进行追加样式之字符串的拼接

[不负遇见。。。]

今天想跟大家讲一下对数据进行样式的追加之字符串的拼接，在前面我给大家讲解的内容都以数据表格来呈现的，但是如果当你所需要的获取的数据不再是通过一个表格的形式获取，你又该怎样去做，大家看图一；这种数据的显示方法就不是表格的形式，而是一个个正方形的格式。

易错区：初次接触这种的数据格式显示的‘小白鼠’，会第一时间就在页面把样式和内容打出来，样式是可以直接在页码打出来，但是里面的数据：例如：（ 2 ，10 ，4） 人这种的数据就不是你打出来的了；这个必须是从数库查出来并且显示在方块上；
个人认为：这种最好的办法就是给一个空的内容区，在内容区里面什么都不要写，就让它为空；然后再去控制器那里对着这个数据的表格进行数据的查询；再返回页面；大家都知道返回给页面的往往是数据；
例如：以下的文字
注：蓝色为我设置的背景色。并非数据查询出来所呈现的颜色


如果想要数据像图一那样显示，这时候你就需要对出来的数据进行样式的追加；样式的追加肯定是少不了“字符串的拼接”，这是较重要的一点；
字符串代码的拼接如下；
$.post("/FrontDesk/Reception/SelectDesk", function (Data) {
$.each(Data, function (i) {
var StateID = Data[i].DeskStateID;

var Floor = Data[i].FloorID;
if (Floor == 1) {

if (StateID == 1) {
$("#table").append(

'<div class="m-1" data-id="' + Data[i].DeskID + '" style="background-color:#97b13d" onclick="check(' + Data[i].DeskID + ')"><span>' + Data[i].DeskName + '</span><em>' + Data[i].AccommodatePeople + '人</em><p hidden>' + Data[i].DeskStateID + '</p></div>'
)
} else if (StateID == 2) {
$("#table").append(
'<div class="m-1" data-id="' + Data[i].DeskID + '" style="background-color:#fca970" onclick="check(' + Data[i].DeskID + ')"><span>' + Data[i].DeskName + '</span><em>' + Data[i].AccommodatePeople + '人</em><p hidden>' + Data[i].DeskStateID + '</p></div>'

)
} else if (StateID == 3) {
$("#table").append(
'<div class="m-1" data-id="' + Data[i].DeskID + '" style="background-color:#ffe00b" onclick="check(' + Data[i].DeskID + ')"><span>' + Data[i].DeskName + '</span><em>' + Data[i].AccommodatePeople + '人</em><p hidden>' + Data[i].DeskStateID + '</p></div>'
)

} else if (StateID == 4) {
$("#table").append(
'<div class="m-1" data-id="' + Data[i].DeskID + '" style="background-color:#f0b3d7" onclick="check(' + Data[i].DeskID + ')"><span>' + Data[i].DeskName + '</span><em>' + Data[i].AccommodatePeople + '人</em><p hidden>' + Data[i].DeskStateID + '</p></div>'

)
}

}

});
});

StateID :为小方格的状态颜色值； 1 2 3 4 都代表着不同的状态；
字符串的拼接:
1、对于标签的样式要提前在样式表里面写好；这样才能实现进行标签的拼接就可以完成样式表；
2、如果你是利用插件里面的样式；则需要把该插件的样式引入进来；
3、字符串的拼接要注意换行位置，换行末尾的位置都需要用 +’进行连接 ；第二行的开始位置要用 ’ 进行连接；
拼接好了之后；数查完后；图一那样的表格就出开了拉。
好了；这个就是我今天要讲的内容点；希望对你有所帮助；不足之处请多多包涵；