css如何實現左右佈局，並實現左右側數據對應顯示

1.  列表中展示的數據經過sql去重處理。微信規定多圖文組合最多爲8個子對象。設計圖文素材表時以分組編號將多圖文組合關聯，並排序，此處顯示的記錄就是按分組編號去重後排序1的記錄。

    2.展示多圖文的詳情。左側爲組成多圖文的單圖文，顯示封面圖片和標題。右側爲每個單圖文的詳情。點擊左側對象右邊詳情實時對應。

3：詳情彈框代碼。 

       大致說下從點擊詳情按鈕到加載詳情頁流程，代碼中easyui的相關內容請自行查閱文檔。

function detail(){
	var row = context.find(".easyui-datagrid").datagrid('getSelected');
	$("#context_dialog_detail").dialog({title:'詳情',width:1000,height:700,left:400,top:150}).dialog("refresh", toEditUrl+"/"+row.mediaGroup).dialog("open");
}

 後臺接口：

 @GetMapping(value = "/page/edit/{mediaGroup}")
    public ModelAndView toDetail(@PathVariable("mediaGroup") String mediaGroup)
    {
        ModelAndView mv = new ModelAndView("pnimagetextpackaging/imagetextpackaging_detail");
        mv.addObject("mediaGroup", mediaGroup);
    //getClassRequestMappingUrl() 用於獲取該controller對應的mapping地址
        mv.addObject("menuCode", getClassRequestMappingUrl());
        return mv;
    }

 

 /**
     * 獲取RequestMapping 值
     * 
     * @return
     */
    public String getClassRequestMappingUrl()
    {
        RequestMapping qm = this.getClass().getAnnotation(RequestMapping.class);
        String[] url = qm.value();
        return url[0];
    }

     imagetextpackaging_detail.jsp代碼加載數據

• <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
  
  
  <style>
  	.ckbWords{
  		display: block;
  	}
  	* { margin: 0; padding: 0;}
  	.dowebok { margin: 0 auto; list-style-type: none; zoom: 1;}
  	.dowebok:after { content: ''; display: table; clear: both;}
  	.dowebok li { float: left; width: 210px; height: 176px; margin: 5px 5px 0; display: inline;}
  	.dowebok1 { border: 1px solid #d9534f;}
  	.dowebok1 img { width: 200px; height: 200px; vertical-align: top;}
  	.dowebok2 { border: 1px solid #FAF0E6;}
  	.dowebok2 img { width: 210px; height: 176px; vertical-align: top;}
  	.icon20_common {width: 20px;height: 20px;vertical-align: middle;display: inline-block}
  	.icon20_common.sort_up_white {background:
  		url("images/base_z318f29.png")
  		0 -4754px no-repeat
  	}
  	.icon20_common.sort_down_white {
  		background:
  			url("images/base_z318f29.png")
  			0 -4778px no-repeat
  	}
  	.icon20_common.del_media_white {
  		background:
  			url("images/base_z318f29.png")
  			0 -4802px no-repeat
  	}
  	.imglisttitle{
          overflow: hidden; 
          text-overflow: ellipsis; 
          white-space:nowrap;
          width:90px;
          display:block;position: relative;bottom: 163px;left: 100px;color:white;
      }
  	/* 第一個模板樣式 */
  	.firsttemplate{
  		margin-right: 5px;cursor:pointer;
  	}
  	.firsttemplate>.majorcontent {
  		width:225px;height: 122px;
  	}
  	.majorcontent>.j_addgoods_img {
  		width:225px;height: 122px;
  	}
  	.firstmask{
  		display:none;position: absolute;top: 100px;width: 225px;height: 30px;background: rgba(0,0,0,0.5)!important;text-align: right;
  	}
  	.firsttitle{
  		text-align: right;
  		overflow: hidden; 
          text-overflow: ellipsis; 
          white-space:nowrap;
          width:90px;
  		display:block;
  		color: white;
  		position: absolute;
  		right:22px;
  	    top: 85px;
  	}
  	/* 後面的模板樣式 */
  	.othertemplate{
  		cursor:pointer;
  	}
  	.othertemplate>.majorcontent {
  		width:225px;height: 80px;
  	}
  	.othermajorcontent>.j_addgoods_img {
  		width: 70px;height:70px;position: relative;bottom:10px;float: right;
  	}
  	.othermask{
  		display:none;position: relative;top:35px;width: 225px;height: 30px;line-height: 40px;background: rgba(0,0,0,0.5)!important;text-align: right;
  	}
  	.othertitle{
  		text-align: left;position: relative;top: 36px;z-index:999;
  	}
  	.img2{
  		width:225px;height: 80px;
  	}
      .othertitle{
          overflow: hidden; 
          text-overflow: ellipsis; 
          white-space:nowrap;
          width:90px;
          display:block;
      }
      .block {
              position: relative;
              width: 200px;
              height: 100px;
              margin: 0 10px;
              background: #ccc;
              border: 1px solid #ff8711;
        }
        .block:before {
            content: '';
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            border: 17px solid #ff8711;
            border-top-color: transparent;
            border-left-color: transparent;
            color: #fff;
        }
        .block:after {
            content: '';
            display: block;
            width: 5px;
            height: 12px;
            position: absolute;
            right: 6px;
            bottom: 6px;
            border: 2px solid #fff;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotate(45deg);
        }
  </style>
  
      <script type="text/javascript">
          		var result;
           $(function(){    	 
          	    var materialUrl = $("#menuCode").val();
          		var mediaGroup=$("#mediaGroup").val();
          	 $.ajax({
          		  async:false,
          		  type: 'GET',
          		  url: materialUrl+'/listDetail/'+mediaGroup,
          		  contentType: "application/json",
  				  dataType: "json",
          		  success: function(data) {
          			  DisplayListItems(data);
          			  result=data;
          		  },
          		});
          	 //禁止輸入
          	 $("input").attr("readonly","readonly");
          	 $("textarea").attr("readonly","readonly");
           });
           //鼠標點擊左側對象，右側顯示詳情
           $(".GoodsAdd_InfoBox_ImgBg_Img").click(function(){
          	 //獲取當前div對象的父元素
          	 var temp = $(this).parents("ul");
          	 //獲取當前ul在所有url中下標
          	 var indexNo = $("#leftcontent").find("ul").index(temp);
          	 //遍歷ajax返回的數據，根據下標來決定右側回顯數據
          	 $.each(result, function(index, row) {
          		if(indexNo==index){
          			setData(row);
          		}
          	 });
           });
           //頁面初始化後加載左側數據,每條數據都是一個ul,默認顯示第一條素材詳情
           function DisplayListItems(list) {
          	 $.each(list, function(index, row) {
          		 if(0==index){
          			$(".firsttitle").text(row.title); 
          			$(".firstimg").attr("src",row.thumbLocalPath);
          			setData(row);
          		 }else{
          			 //獲取該臨時模板html
          			 var dd = $("#lefttemplate").html();
          			 //克隆，類似於臨時變量作用
          			 var temp = $(dd).clone();
          			 //填充數據
          			 temp.find(".othertitle").text(row.title);
          			 temp.find(".otherimg").attr("src",row.thumbLocalPath);
          			 //添加到第一個模板中，實現左側多模塊展示
          			 $("#leftcontent").append(temp);
          		 }
          	 });
           }
           //填充表單數據
           function setData(row){
          	 debugger;
          	 if(row.contentSourceUrl!=""){
          		 //radio的選中效果不能使用
  //         		 $("#checkbox").attr("checked","checked");
          		$("#checkbox").prop("checked",true)
          	 }else{
          		 //如果去掉選中也不能使用
  //         		 $("#checkbox").attr("checked",false);
          		 $("#checkbox").prop("checked",false );
          	 }
              $("#author").val(row.author);
   			$("#titlex").val(row.title);
   			$("#digest").val(row.digest);
   			$("#contentShow").html(row.localContent);
   			$("#contentSourceUrl").val(row.contentSourceUrl);
   			$("#thumbLocalPath").attr('src',row.thumbLocalPath);
           }
           
      </script>
  <input type="hidden" id="menuCode" value="${menuCode }">
  <input type="hidden" id="mediaGroup" value="${mediaGroup }">
  <div style="margin-top: 20px;">
  <table style="width: 100%;height: 100%;" >
  <tr>
  <td valign="top" style="text-align:left;width:27%;">
  <div style="width:100%;height:100%;">
  <div style="position: relative;height:auto;display: inline;float:left;">
  <div style="overflow:scroll;width:262px; height:630px;position: fixed;margin-left: 20px;">圖文列表：
      <!--左側第一個模板 -->
  	<div id="leftcontent" style="border: 1.5px solid #C9C9C9;margin-right: 5px;padding-bottom: 5px;">
  			<ul class="unstyled spaced2" style="padding:5px;">
  			<li class="text-warning green"><i class="icon-star blue"></i>
  				<div class="GoodsAdd_InfoBox_ImgBg_ImgList j_addgoods_photo firsttemplate" >
  				<hr style="background-color: #C9C9C9;border: none;height: 1px;display:none;width: 225px;"/>
  					<div class="GoodsAdd_InfoBox_ImgBg_Img" >
  						<div class="majorcontent first">
  							<span class="firsttitle" ></span>
  							<img  class="j_addgoods_img firstimg" src="images/img.jpg" />
  						</div>
  					</div> 
  				</div>
  			</li>
  		</ul>	
  	</div>
  	<!-- 臨時模板，圖文對象數量大於1後使用 -->
  	<div id="lefttemplate" style="display:none;">
  			<ul class="unstyled spaced2" style="padding: 5px;" >
  				<li class="text-warning green"><i class="icon-star blue"></i>
  					<div class="GoodsAdd_InfoBox_ImgBg_ImgList j_addgoods_photo othertemplate" >
  					<hr style="background-color: #C9C9C9;border: none;height: 1px;width: 225px;"/>
  						<div class="GoodsAdd_InfoBox_ImgBg_Img img2">
  							<div class="othermajorcontent">
  								<span  class="othertitle"></span>
  								<img class="j_addgoods_img otherimg"  src="images/img.jpg"/>
  							</div>
  						</div> 
  					</div>
  				</li>
  			</ul>
  		</div>
  </div>
  </div>
  </div>
  </td>
  <td style="height:430px;width:45%;">詳情：
  	<div style="padding-left: 20px;padding-bottom: 20px;margin-right: 20px;border:1.5px #C9C9C9 solid;" id="editBlock" class="editblock">     
  		<table style="padding-bottom: 10px;border-collapse:separate; border-spacing:7px 16px;">
  	        <tr>
  	            <td><span>標題：</span></td>
  	            <td>    
  	            	<input type="text" class="easyui-validatebox" name="title" id="titlex">
  	            </td>
  	        </tr>
  	        <tr>
  	            <td>作者：</td>
  	            <td>    
  	    			<input name="author" type="text" class="easyui-validatebox" id="author"/>
  	            </td>
  	        </tr>
  	        <tr>
  	            <td>摘要：</td>
  	            <td> 
  	           	   <textarea id="digest" style="width: 320px; height:80px;"></textarea> 
  	            </td>
  	        </tr> 
  	        <tr>
  	        	<td>正文：</td>
  	            <td> 
  	            	<div id="contentShow" style="height: 302px;width:500px;border: 1px solid #C9C9C9" >
  	           	    </div>
  	            </td>
  	        </tr>
  	        <tr>
  	            <td></td>
  	            <td> 
  	            	<label><input type="radio" id="checkbox" /> 原文鏈接  </label> 
  	            	<div >
  	            		<input  style="width:500px" class="easyui-validatebox"  name="contentSourceUrl" id="contentSourceUrl"/>
  	            	</div>
  	            </td>
  	        </tr>
  	       <tr>
  	       		<td>封面：</td>
  	       		<td>
  					<div>
  <!-- 					    <input id="thumbLocalPath" name="thumbLocalPath" type="hidden" required="required" /> -->
  	    				<img  id="thumbLocalPath" class="imagetextcontent" alt="無圖片" src="${imageTextMaterial.thumbLocalPath}" onerror="javascript:{this.src='images/img.jpg'}" style="width: 100px; height: 100px;"/>
  					</div>
  				</td>
  	        </tr>
  	    </table>
  </div>
  </td>
  </tr>
  </table>
  </div>
  

  該ajax執行後臺： 返回list對象

   @ResponseBody
      @RequestMapping(value = "listDetail/{mediaGroup}")
      public List<ImageTextMaterial> listDetail(@PathVariable("mediaGroup") String mediaGroup)
      {
          return imageTextMaterialService.listData(mediaGroup);
      }

   

• 總結要點：

      1： 使用tr  td標籤實現左右佈局

<tr>
<td valign="top" style="text-align:left;width:27%;">
</td>
<td style="height:430px;width:45%;">詳情：
</td>
</tr>

2： radio的選中與取消必須使用prop方法。具體的說明請看博客https://blog.csdn.net/qq_29542611/article/details/73385002

3：ajax同步獲取list數據後，js遍歷list

4： 正文部分獲取的內容是html標籤格式的富文本內容，瀏覽器自動解析

5：左右數據的對應回顯