技術標籤：筆記jsjavascript域物件nav-tabs

nav-tabs

選項卡(nav-tabs)
使用者點選或懸浮對應的選單項，能切換出對應的內容。

一個選項卡主要包括兩個部分，其一是選單項，其二是內容面板。

重點是data-toggle 和href是切換的標籤用id繫結
注意id不能重複
tab-content把兩個標籤包起來

<% EventInfo eventInfo = (EventInfo) request.getAttribute("obj"); %>

<ul  class="nav nav-tabs">
 

	<li class="active">
		<a href="#eventInfoForm1" data-toggle="tab">詳情</a>
	</li>
	<li>
		<a href="#flowList" data-toggle="tab">流程展示</a>
	</li>
</ul>


<div  class="tab-content" >
	<
 
!-- 單位詳情start -->
	<div class="tab-pane fade in active" id="eventInfoForm1">
		<div id="table_div">
			<h3 style="text-align:center;font-size:18px;height: 40px;padding-top: 15px;">單位詳情</h3>
			<table id="orgDetailTable">
 

				<tbody>

				<tr>
					<td class='td'><label>事件編號</label></td>
					<td class='td_content'><%=eventInfo.getSerialnumber() %>
					</td>
					<td class='td'><label>標題</label></td>
					<td class='td_content'><%=eventInfo.getEventsubject() %>
					</td>
				</tr>
				</tbody>
			</table>
		</div>
	</div>
	<!-- 單位詳情end -->


	<!-- 記錄日誌 -->
	<div class="tab-pane fade" id="flowList">
		<%--<div class="panel panel-info"></div>--%>
		<table id="eventFlowTable"></table>
	</div>
	<!-- 記錄日誌 -->

</div>

二級標題

從域物件取值,需要在controller存放後使用

<% EventInfo eventInfo = (EventInfo) request.getAttribute("obj"); %>

js從jsp獲取域物件

jsp中設定域物件var1,然後在js中可以獲取到叫var1

<script>
        var var1="<%=eventInfo.getSerialnumber()%>";
	</script>
	<script type="text/javascript">
		seajs.use("app/jczl/event/eventFlowList", function (main) {
			main.init(${authListTool});
		});
	</script>

define(function(require,exports,module){
	var glbFun = require("app/global/global");
	exports.init = function(authListTool){
	//和上面定義的table對應會封裝值
 	$("#eventFlowTable").table({
   	url:webRoot + '/intJczlEventFlow/datagridById.action?serialnumber='+var1,
		idField: "serialnumber",
		toolbar: glbFun.formatter(authListTool, [/*orgInfo_add,orgInfo_delete,orgInfo_update,*/]),
		pagination : false,
		//返回的物件是DataGrid
		columns : [ [
				{
					title: '序號',
					width: '50',
					align: 'center',
					formatter: function (value, row, index) {
						return index + 1;
					}
				},
			{
			  title : '事件編號',
				align : 'center',
				width : '100',
			    field : 'serialnumber'
			},

			{
			  title : '處理人組織編號',
				align : 'center',
				width : '150',
			  field : 'organizationcode'
			}
			] ],
		onLoadSuccess: function () {
		//自動調節行高
			//glbFun.heightLinker("#eventFlowTable");
		}
   });
 }

public class DataGrid {

	private Long total = 0L;
	private List rows = new ArrayList();

	public Long getTotal() {
		return total;
	}

	public void setTotal(Long total) {
		this.total = total;
	}

	public List getRows() {
		return rows;
	}

	public void setRows(List rows) {
		this.rows = rows;
	}
}

四級標題

五級標題

六級標題