近期由於專案的需要，需要對專案中的所有檢視頁面進行優化，使其更加美觀，提高使用者滿意度。


  /**
 * 檢視頁面設定為檢視樣式
 * 文字框、下拉列表替換為純文字
 * 單選按鈕和複選框設定為disabled
 */
PrpObj.makeFormViewType = function(){
	var maxW = 0;
	$(".form_label").each(function(idx){
		var w = ($(this).text().length)*20;
		maxW = maxW < w ? w : maxW;
	});
	/**$(".form_label").css("background-color","#FFFFFF");
	
	$(".form_label").css({
		"background-image":"url('')",
		width:maxW
	});
	
	$("tr").each(function(){
		var fl = $(this).find(".form_label :first").eq(0);
		var html = "<span style='text-align:right;'>"+fl.html()+"</span>";
		fl.html(html);
	});
	**/
	$('input,textarea').each(function(){
		var input = $(this);
		var type = input.attr("type");
		
		if(type=="hidden") return;
		
		if(type=="radio" || type=="checkbox"){
			input.prop("disabled",true);
			return;
		}
		input.before(input.val()).remove();
	});
	
	$('select').each(function(){
		var input = $(this);
		input.before(input.find("option:selected").text());
		input.remove();
	});
	
	$('.form_label').each(function(){
		var form_label = $(this);
		//求tr下面多少個td
		var len = $(this).parent().children('td').size();
		if(len==4){
		    form_label.next("td").css({"text-align":"left","width":"35%"});
		}
		form_label.css({"text-align":"center","width":"15%"});
		form_label.next("td").css({"text-align":"left","padding-left":"8px"});
	});
	
	$(".form_label").removeAttr("class").css({"text-align":"center","width":"15%"});
	
	$(".form_table TD").css('height','30px');
	$(".form_table TR").css('height','30px');
	$(".form_table").css({'width':"1050px",'text-align':"center",'margin-left':"5%",'margin-top':"5px"});
	$(".demo-info").css({'width':"1050px",'text-align':"left",'margin-left':"5%"});
	
	$("#tab").addClass("prp-tabs");
	$(".prp-tabs").css({'width':"1050px",'margin-left':"5%",'border-left':"1px solid #AEC2CD",'border-right':"1px solid #AEC2CD",'border-top':"1px solid #AEC2CD"});
	$(".datagrid-header TD").css({'border-right':"1px solid #AEC2CD",'border-bottom':"1px solid #AEC2CD",'border-top':"1px solid #AEC2CD"});
	$(".datagrid-body TD").css({'border-right':"1px solid #AEC2CD",'border-bottom':"1px solid #AEC2CD"});
	$(".datagrid-toolbar").removeAttr("class");
	
}
 

效果圖如下：