【slip.html】
(1)slip.htmlとdetails.htmlを1つにまとめ、「slip.html」にしました。重複する部分は1つにしてあります。
(2)伝票と明細は水平線で区切りました。
(3)伝票の部品は「form1」の上、明細の部品は「form2」の上に配置しました。
(4)head部分でdatabase.js、slip.js、details.js、base.css、slip.cssを指定しています。
<script type="text/javascript" src="database.js"></script>
<script type="text/javascript" src="slip.js"></script>
<script type="text/javascript" src="details.js"></script>
<link href="base.css" rel="stylesheet" type="text/css">
<link href="slip.css" rel="stylesheet" type="text/css
【slip.css】
(1)slip.cssとdetails.cssを1つにまとめ、「slip.css」にしました。
(2)明細の選択ボックスの幅をCSSで指定しています。
#selectDetails {
width: 600px;
}
【slip.js】
(1)変数selectSlipをdetails.jsから移動しました。
(2)関数init()をinitSlip()に名前を変更しました。
(3)onload時に呼び出す関数は無名関数を使い、中で2つ呼び出しています。
onload = function (){initSlip();initDetails();}
(4)更新時にも確認メッセージを表示するようにしました。
if(!confirm("本当に更新しますか？")){
return ;
}
(5)関数slipChange()を統合しました。「//伝票側の処理」、「//明細側の処理」というようにコメントを付けています。
function slipChange(obj) {
//伝票を選択した時の関数
if(obj.selectedIndex==0){
//伝票側の処理
textClearSlip();
cstDisplay();
document.getElementById("addressDisplay").innerHTML = "";
document.getElementById("sqlDisplay").innerHTML = "";
//明細側の処理
textClearDetails();
goodsDisplay();
document.getElementById("detailsDisplay").innerHTML = "";
document.getElementById("totalDisplay").innerHTML = "";
document.getElementById("sqlDisplay").innerHTML = "";
alert("伝票を選択してください。");
}else{
var mySql = "select SLIP_CD,SLIP_DATE,T07Slip.CST_CD,TOWN_CD,ADDRESS ";
mySql = mySql +"from T07Slip,T04Customer ";
mySql = mySql +"where T07Slip.CST_CD = T04Customer.CST_CD ";
mySql = mySql +"and SLIP_CD = " + obj.value ;
var recordSet = database.Execute(mySql);
txtSlipCd.value = recordSet(0);
txtSlipDate.value = dateFormat(recordSet(1));
selectCst.selectedIndex = cstIndexSearch(recordSet(2));
document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);
recordSet.Close();
recordSet = null;
//明細側の処理
textClearDetails();
goodsDisplay();
detailsDisplay();
sqlDisplay("selectedIndex:" + obj.selectedIndex + " value:" + obj.value);
}
}
(6)関数newSlip()を変更しました。「//伝票側の処理」、「//明細側の処理」というようにコメントを付けています。
function newSlip(){
//伝票を新規作成する関数
//伝票側の処理
textClearSlip();
document.getElementById("addressDisplay").innerHTML = "";
document.getElementById("sqlDisplay").innerHTML = "";
slipDisplay();
cstDisplay();
txtSlipCd.value = maxCdSlip() + 1;
txtSlipDate.focus();
//明細側の処理
textClearDetails();
goodsDisplay();
document.getElementById("detailsDisplay").innerHTML = "";
document.getElementById("totalDisplay").innerHTML = "";
document.getElementById("sqlDisplay").innerHTML = "";
return false;
}
(7)関数dataDeleteSlip()を変更しました。「//伝票側の処理」、「//明細側の処理」というようにコメントを付けています。
function dataDeleteSlip() {
//データを削除する関数
if(!confirm("本当に削除しますか？")){
return ;
}
if(dataCheckSlip(0)){
//伝票側の処理
var mySql = "delete from T07Slip where SLIP_CD = " + Number(txtSlipCd.value);
sqlDisplay(mySql);
database.Execute(mySql);
document.getElementById("addressDisplay").innerHTML = "";
slipDisplay();
cstDisplay();
//明細側の処理
var mySql = "delete from T08Details where SLIP_CD = " + Number(txtSlipCd.value);
sqlDisplay(mySql);
database.Execute(mySql);
textClearDetails();
goodsDisplay();
document.getElementById("detailsDisplay").innerHTML = "";
document.getElementById("totalDisplay").innerHTML = "";
//伝票側の処理
textClearSlip();
alert("削除しました。");
}
}
【details.js】
(1)変数selectSlipをslip.js側へ移動しました。
(2)onload、onunloadは削除しました。slip.js側で呼び出すためです。
(3)関数init()をinitDetails()に名前を変更しました。
(4)関数focus()、blur()、slipDisplay()はslip.jsと重複しているので削除しました。
(5)slipChange()はslip.js側に統合しました。
(6)selectSlip.valueで値を取得していた部分をtxtSlipCd.valueに変更しました。これは必ずしも伝票選択ボックスが選択されているとは限らないからです。
(7)更新時にも確認メッセージを表示するようにしました。
if(!confirm("本当に更新しますか？")){
return ;
}
(8)明細を選択しないで更新、削除しようとするとメッセージを表示するようにしました。
if(selectDetails.value==""){
alert("明細が選択されていません。");
return ;
}
【まとめ】
一番大きな変更はslip.js側の関数slipChange()、newSlip()、dataDeleteSlip()です。これらの変更は伝票側の操作が明細へ影響することがあり、調整が必要だからです。
関数dataDeleteSlip()では伝票側の処理をわざわざ分けていますが、テキストボックスのクリアが明細に影響するので、先に明細の処理を行っています。
あとは全体の動きを確認しながら、プログラムの順番を入れ替えたり微調整しています。
【販売伝票のダウンロード】
伝票と明細を結合した完成版です。
slipDetails.zip
データベースをまだ入手していない方は一緒にダウンロードしてください。
SampleDB010.zip
データベース「SampleDB010.mdb」はCドライブの直下に保存します。
