Basic Filter(基本フィルタ)

HTML

<ui:define name="content">
		<h:outputScript name="js/kngme12.js" />
		</script>
		<f:event type="preRenderComponent"
			listener="#{kngme12Controller.doInit}" />
		<f:view>
			<h:form prependId="false" enctype="multipart/form-data">
				<div class="title_box">#{templateModel.gamenName}</div>
				<div style="padding-top: 10px">｜郵便番号マスタ更新</div>
				<div id="errorMsg" class="msg_summary_err">
					<h:messages />
				</div>
				<div>
					<table class="tableList" style="width: 90%; margin-left: 5px">
						<tr>
							<td width="30%">更新CSV選択</td>
							<!--  <td width="70%"><input type="file" id="csvFileObj"
								name="csvFileObj" accept=".csv" style="width: 85%"
								onclick="selectCsv()" /></td>-->
							<td width="70%"><input type="file" id="csvFileObj"
								name="csvFileObj" accept=".csv" style="width: 85%"
								onclick="selectCsv()" /></td>

						</tr>

						<tr>
							<td colspan="2"><h:commandButton id="update" type="submit"
									value="登録" style="margin-top:5px;margin-left:2px"
									action="#{kngme12Controller.update}"
									onclick="return btnUpdate_click()" /></td>
						</tr>

					</table>
					<br />
					<h:commandButton id="hdnUpdateBtn" type="submit"
						action="#{kngme12Controller.updateII}" style="display:none" />

					<div style="padding-top: 10px">｜郵便番号マスタ更新履歴</div>
					<br />
					<table class="tableList"
						style="width: 30%; height: 50px; margin-left: 5px">
						<tr>
							<td style="font-size: 15px" width="60%" align="center">更新日</td>
							<td style="font-size: 15px" width="40%" align="center">更新者</td>
						</tr>
						<ui:repeat var="list" value="#{kngme12Model.list}"
							offset="#{kngme12Model.pageInfo.startIndex}"
							size="#{kngme12Model.pageInfo.endIndex}" varStatus="status">
							<tr>
								<td align="center"><label
									id="#{'recDate'.concat(status.index + 1)}"> <h:outputText
											id="recDate" value="#{list.recDate}" />
								</label></td>
								<td...

CSS

@charset "UTF-8";
/**********************************************/
/* 全画面共通設定                             */
/**********************************************/
/* float解除の設定 */
.clear:before,.clear:after {content:"";display:block;overflow:hidden;}
.clear:after{clear:both;}
.clear{zoom:1;}

/* 折り返し文字の設定 */
pre {
	margin: 0;
	padding: 0;
	white-space: pre;
	white-space: pre-wrap;
	white-space: pre-line;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
}

/* bodyタグの設定 */
body {
	font-size:9pt;
}

/* html,bodyタグの設定 */
html, body{
	margin: 0;	/* 余白の削除 */
	padding: 0;	/* 余白の削除 */
	height: 100%;	/* 縦の高さを100% */
	width: 100%;	/* 横の幅を100% */
}

/* 全体を囲う大枠 */
div#contents {
	position: relative;		/* フッター部の配置用に定義 */
	min-height: 100%;		/* 縦の表示領域を100% */
}

/*
	div#contents内の大枠
*/
table.mainContext{
	height:95%;
}

/*
	メニュー/各画面の大枠
*/
td.mainArea{
	height:100%;
	vertical-align:top;
}

/*
	メニュー/各画面の大枠
*/
td.mainArea form{
	height:100%;
}

/**********************************************/
/* サイドメニュー設定                         */
/**********************************************/
div#sideMenu{
	float:left;
	background-color:lightgrey;
	width:200px;
	overflow:auto;
	height:100%;
}

/*
	メニュー（大項目）
*/
.menu_Daikomoku{
	margin-left: 10px;
	overflow:auto;
	white-space:nowrap;
	font-size:10pt;
}

/*
	メニュー（中項目）
*/
.menu_Chukomoku{
	margin-left: 20px;
	overflow:auto;
	white-space:nowrap;
	font-size:9pt;
}

/*
	メニュー（小項目）
*/
.menu_Shokomoku{
	margin-left: 30px;
	overflow:auto;
	white-space:nowrap;
	font-size:9pt;
}

/**********************************************/
/* ヘッダー設定                               */
/**********************************************/
div.header {
	height: 80px;  /* 縦の表示領域120px */
	width: auto;   /* 横の幅970px */
	margin: auto;   /* 中央揃え */
	margin-bottom:5px;
}

.tbl_collapse{
	border-collapse:...

JavaScript

/**
 * 画面制御
 */
function setInputControl() {

	$("input[name='update']").attr("disabled", true);

	// 一覧領域
	enabledByName("select");
	enabledById("selectPage");

	// ページングのコントロールを全て表示
	hideById("previousPage");
	hideById("nextPage");
	hideById("lblPreviousPage");
	hideById("lblNextPage");

	var selectIndex = $("[id$='selectPage'] option:selected").index();
	var maxIndex = $("[id$='selectPage']").children('option:last-child')
			.index();

	// 1ページ目表示
	if (selectIndex == 0) {
		showById("lblPreviousPage");
		showById("nextPage");
		// 最終ページ表示
	} else if (selectIndex == maxIndex) {
		showById("previousPage");
		showById("lblNextPage");
		// 上記以外
	} else {
		showById("previousPage");
		showById("nextPage");
	}
}

function selectCsv() {

	$("input[name='update']").removeAttr("disabled");

}

function btnUpdate_click() {

	if (confirm("CSVファイルを取り込みます。よろしいですか？")) {

		// ファイルが選択されたか
		var input_file = document.getElementById("csvFileObj");
		if (input_file.value) {

			// ファイル存在チェック
			var Fs;
			Fs = new ActiveXObject("Scripting.FileSystemObject");
			if (!Fs.FileExists(input_file.value)) {
				// alert($("[id$='msgNotExists']").val());
				alert("指定したファイルが存在しません。");
				return false;
			}

			// CSVファイルチェック
			var fileTypes = input_file.value.split(".");
			var len = fileTypes.length;
			if (len == 1) {
				alert($("[id$='msgNotCsvIn']").val());

				return false;
			}

			ret = fileTypes[len - 1];
			if (ret.toUpperCase() != "CSV") {

				alert($("[id$='msgNotCsvIn']").val());
				return false;
			}

			// 登録ボタン押下処理
			if (window.confirm($("[idS'masBtnUpdate']").val())) {
				return true;
			} else {
				return false;
			}
		} else {
			alert($("[id$='msgNoFileIn']").val());
			return false;
		}
	}else{
		return false;
	}
}