雲服務器虛擬化web端項目總結

 

該項目是使用ZStack開源版本作爲內核,進行二次開發的一個服務器虛擬化的項目。

項目效果圖如下:

 

在做該項目遇到的一些問題和總結,方便以後使用。


1.前端js採用JQuery.1.11.1.js嗎,其中前端接收數據並顯示爲一個table頁面的代碼如下(可直接複用):

相應的h5頁面相關代碼如下,其中在引入JQuery等一些js文件的時候,注意先後順序:

<div class="btn_nav">
		<h3>計算規格配置</h3>
		<button type="button" class="btn btn-primary" onclick="location='<%=basePath%>CalculationSpecificationDetail/addCalculationSpecification.do'">創建</button>
		
		<button type="button" class="btn btn-primary" id="deleteButton" >刪除</button>
		<div id="calculation" class="main-box-body clearfix" style="margin-top: -10px; width: 1600px">
			<div class="table-responsive clearfix" >
				<table class="table table-striped table-hover" style="margin-top: -10px" id="tb_CalculationSpecification"></table>
			</div>
		</div>
</div>

 

相關的js代碼如下:

url : '../init/CalculationSpecificationTable.do', // 請求後臺的URL(*)

url : './CalculationSpecificationTable.do', // 請求後臺的URL(*)

 請求地址,上面兩種都可以

/**
 * 初始化計算規格table頁
 */
function getCalculationSpecification(){
	
	$('#tb_CalculationSpecification').bootstrapTable({
		url : '../init/CalculationSpecificationTable.do', // 請求後臺的URL(*)			
		method : 'get', // 請求方式(*)
		toolbar : '#toolbarComputer', // 工具按鈕用哪個容器
		striped : true, // 是否顯示行間隔色
		sortable : true, // 是否啓用排序
		sortOrder : "asc", // 排序方式			
		pagination : true, // 是否顯示分頁(*)
		pageNumber : 1, // 初始化加載第一頁,默認第一頁
		pageSize : 10, // 每頁的記錄行數(*)
		pageList : [ 5, 10, 20], // 可供選擇的每頁的行數(*)
		showColumns : false, // 是否顯示所有的列
		showRefresh : true, // 是否顯示刷新按鈕
		minimumCountColumns : 2, // 最少允許的列數
		clickToSelect : true, // 是否啓用點擊選中行
//		height : 530, // 行高,如果沒有設置height屬性,表格自動根據記錄條數覺得表格高度
		uniqueId : "index", // 每一行的唯一標識,一般爲主鍵列
		showToggle : false, // 是否顯示詳細視圖和列表視圖的切換按鈕
		cardView : false, // 是否顯示詳細視圖
		detailView : false, // 是否顯示父子表
		columns : [ {
			checkbox : true
		}, {
			field : 'name',
			title : '名稱',
			align : 'center',
			sortable : true
			
			
		}, {
			field : 'cpuNum',
			title : '內存',
			align : 'center',
			sortable : true
			
		}, {
			field : 'state',
			title : '啓用狀態',
			align : 'center',
			valign : 'middle',
			sortable : true,
			formatter : function(value, row, index) {
				var label = 'label-default';			
				if (value == 'Enabled') {
					label = 'label-success';
				} else {
					label = 'label-danger';
				}
				return "<label class='label-state " + label + "'>" + value+ "</label>";
			}
			
		},{
			field : 'allocatorStrategy',
			title : '物理機分配策略',
			align : 'center',
			sortable : true
			
		}, {
			field : 'createDate',
			title : '創建日期',
			align : 'center',
			sortable : true
			
			
		} ],
		//silent : true, // 刷新事件必須設置
		onClickRow : function(row, tr, field) {
			//進行你的操作,如彈出新窗口
		},
		formatLoadingMessage : function() {
			return "請稍等,正在加載中...";
		},
		formatNoMatches : function() { // 沒有匹配的結果
			return '無符合條件的記錄';
		},
		formatRecordsPerPage: function (pageNumber) {
			return '每頁顯示 ' + pageNumber + ' 條記錄';
		},
		formatShowingRows: function (pageFrom, pageTo, totalRows) {
			//return '顯示第 ' + pageFrom + ' 到第 ' + pageTo + ' 條記錄,總共 ' + totalRows + ' 條記錄';
			return '總共 ' + totalRows + ' 條記錄';
		},
		formatSearch: function () {
			return '搜索條件';
		},
		formatPaginationSwitch: function () {
			return '隱藏/顯示分頁';
		},
		formatRefresh: function () {
			return '刷新';
		},
		formatColumns: function () {
			return '列';
		},
		onLoadError : function(data) {
			$('#tb_CalculationSpecification').bootstrapTable('removeAll');
		},
		onRefresh:function(params) {
			updateChartValue();
		},
		onLoadSuccess:function(data) {
		}
	});
}

2.關於前臺數據數據傳輸的問題,注意各層之間的註解不要忘記:


3.在JQuery中,使用submit()提交form表單後,就可直接從後臺相應的model拿到請求數據,非常方便。


4.想要拿到相應的實際是string類型的jsonarray形式的對象

List<QueryInstanceOfferingModel> modelList = new ArrayList<QueryInstanceOfferingModel>();
String string = JSONArray.fromObject(modelList).toString();


//該代碼將數據返回到前端頁面,前端頁面能夠取到相應的值並顯示出來
try {
	response.getWriter().print(string);
} catch (IOException e) {
	// TODO Auto-generated catch block
    e.printStackTrace();
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章