Step31・顧客マスター表示: JavaScript初心者入門講座

顧客マスター表示

まずは顧客マスターのデータを表示するところまでのプログラムを作成してみましょう。

データベースのテーブル「T04Customer」には、TOWN_CDがあるだけで郵便番号、都道府県名、市町村名、地域名は無いことに注目してください。

住所は関数addressRefer()を使って参照しているところがポイントです。この関数は顧客を表示する時や、TOWN_CDをサブウィンドウから入力する時にも共通して使われています。

【1】以下のように customer.html、customer.js を更新します。他は「住所表示その3」と同じです。

＊このページの最後に今回の顧客マスターに必要なすべてのファイルがダウンロードできるリンクがあります。

customer.html

<html>
  <head>
    <script type="text/javascript" src="database.js"></script>
    <script type="text/javascript" src="customer.js"></script>
    <link href="base.css" rel="stylesheet" type="text/css">
    <link href="customer.css" rel="stylesheet" type="text/css">
    <title>customer</title>
  </head>
  <body>
    顧客マスター
    <div id="customerDisplay"></div>
    <div id="sqlDisplay"></div>
    <form name="form1">
      <p>
        <input type="button" name="btnInsert" id="btnInsert" value="追加">
        <input type="button" name="btnUpdate" id="btnUpdate" value="更新">
        <input type="button" name="btnDelete" id="btnDelete" value="削除">
      </p>
      CST_CD:<input type="text" name="txtCstCd" id="txtCstCd">
      <a href="" name="linkMaxCd" id="linkMaxCd">最大値</a>　<br />
      CST_NAME:<input type="text" name="txtCstName" id="txtCstName"><br />
      TOWN_CD:<input type="text" name="txtTownCd" id="txtTownCd"><br />
      ADDRESS:<input type="text" name="txtAddress" id="txtAddress"><br />
      TEL:<input type="text" name="txtTel" id="txtTel"><br />
      BIRTH:<input type="text" name="txtBirth" id="txtBirth"><br />
      SEX_CD:<input type="text" name="txtSexCd" id="txtSexCd">
    </form>
    <div id="addressDisplay"></div>
  </body>
</html>

customer.js

var w;
var cstCd;

var txtCstCd;
var txtCstName;
var txtTownCd;
var txtAddress;
var txtTel;
var txtBirth;
var txtSexCd;

onload = init;
onunload = dbClose;

function init() {
  //初期設定をする関数
  txtCstCd = document.getElementById("txtCstCd");
  txtCstName = document.getElementById("txtCstName");
  txtTownCd = document.getElementById("txtTownCd");
  txtAddress = document.getElementById("txtAddress");
  txtTel = document.getElementById("txtTel");
  txtBirth = document.getElementById("txtBirth");
  txtSexCd = document.getElementById("txtSexCd");

  txtCstCd.onfocus = function (){focus(this);}
  txtCstCd.onblur = function (){blur(this);}
  txtCstName.onfocus = function (){focus(this);}
  txtCstName.onblur = function (){blur(this);}
  txtTownCd.onfocus = function (){focus(this);addressOpen();}
  txtTownCd.onblur = function (){blur(this);}
  txtAddress.onfocus = function (){focus(this);}
  txtAddress.onblur = function (){blur(this);}
  txtTel.onfocus = function (){focus(this);}
  txtTel.onblur = function (){blur(this);}
  txtBirth.onfocus = function (){focus(this);}
  txtBirth.onblur = function (){blur(this);}
  txtSexCd.onfocus = function (){focus(this);}
  txtSexCd.onblur = function (){blur(this);}

  document.getElementById("btnInsert").onclick = function (){dataInsert();}
  document.getElementById("btnUpdate").onclick = function (){dataUpdate();}
  document.getElementById("btnDelete").onclick = function (){dataDelete();}
  document.getElementById("linkMaxCd").onclick = function (){return maxCd();}

  dbConnect();
  cstDisplay();
}

function addressOpen(){
  txtAddress.focus();
  w = window.open("address.html","","WIDTH=400,HEIGHT=200,STATUS=1");
}

function focus(obj){
  obj.style.backgroundColor = "#ffff00";
}

function blur(obj){
  obj.style.backgroundColor = "#ffffff";
}

function cstDisplay() {
  //顧客を表示する関数

  var mySql = "select CST_CD,CST_NAME from T04Customer order by CST_CD";
  var recordSet = database.Execute(mySql);

  document.getElementById("customerDisplay").innerHTML = "";

  var tempHtml = "<select name=\"selectCst\" id=\"selectCst\">\n";
  tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("customerDisplay").innerHTML = tempHtml;
  document.getElementById("selectCst").onchange = function (){cstChange(this);}

  recordSet.Close();
  recordSet = null;
}

function cstChange(obj) {
  //顧客を選択した時の関数
  if(obj.selectedIndex==0){
    textClear();
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("顧客を選択してください。");
  }
  else{
    cstCd = Number(obj.value);
    var mySql = "select * from T04Customer where CST_CD = " + obj.value ;
    var recordSet = database.Execute(mySql);

    txtCstCd.value = recordSet(0);
    txtCstName.value = recordSet(1);
    txtTownCd.value = recordSet(2);
    txtAddress.value = recordSet(3);
    txtTel.value = recordSet(4);
    txtBirth.value = recordSet(5);
    txtSexCd.value = recordSet(6);
    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(2),database);

    recordSet.Close();
    recordSet = null;

    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}

function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}

function maxCd(){
  //最大値を取得する関数
  var mySql = "select max(CST_CD) from T04Customer";
  var recordSet = database.Execute(mySql);
  textClear();
  document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";
  cstDisplay();
  txtCstCd.value = recordSet(0) + 1;
  txtCstName.focus();
  return false;
}

function textClear() {
  //テキストボックスをクリアする関数
  txtCstCd.value = "";
  txtCstName.value = "";
  txtTownCd.value = "";
  txtAddress.value = "";
  txtTel.value = "";
  txtBirth.value = "";
  txtSexCd.value = "";
}

【2】保存したら customer.html をダブルクリックしてWebブラウザで開きます。
★database.js、base.css、customer.html、customer.css、customer.js、address.html、address.css、address.js は必ず同じフォルダ内に置いてください。

【3】顧客マスターが表示されました。顧客選択ボックスも表示されています。

【4】顧客選択ボックスから、「山田　明子」を選択してください。

【5】顧客のデータが表示されました。郵便番号、都道府県名、市町村名、地域名もきちんと表示できていますね。

【6】今度は「選択してください。」を選択します。

【7】アラートが表示され、画面はクリアされました。正しく顧客を選択してください。

【8】「最大値」をクリックしてみましょう。

＊最大値をクリックするのは、新しい顧客データを入力する場合なので「新規」とお考えください。

【9】CST_CDが自動で入力され、CST_NAMEが入力できる状態になりました。テキストボックスはクリアされ、顧客選択ボックスは初期値に戻っています。

【9】TOWN_CDをクリックし、住所が選択できることも確認してください。

【10】顧客を切り替えたり、住所を変更したりして動作を確認してください。

【解説】

(1)顧客マスターはフィールド数が多いので、関数init()での設定が増えていますが、よくみるとこれまでと同じことをしていることがわかります。

この文はTOWN_CDをクリックした時、2つの関数を呼び出すようになっています。
txtTownCd.onfocus = function (){focus(this);addressOpen();}

(2)関数cstDisplay()は顧客選択ボックスを表示しています。今回新しく出てきたのは、最初に「選択してください」というoptionを加えたことです。valueは0にしています。
（CST_CDは1から始まっています）

function cstDisplay() {
省略
tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
省略
}

この関数で作成されるselectタグは以下のようになります。新しく加えたoptionを見てください。

(3)関数cstChange()ではif文を使って処理を分けています。もし顧客選択ボックスで顧客を選択していない場合は、メッセージを表示しています。（一番上のoptionを選択した場合）正しく選択された時は顧客データを表示しています。

function cstChange(obj) {
  if(obj.selectedIndex==0){
省略
  }
  else{
    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(2),database);
省略
  }
}

関数addressRefer()の引数に、TOWN_CDとデータベースの参照を渡しているところがポイントです。この関数の戻り値は住所です。
addressRefer(recordSet(2),database)

(4)あとは誕生日と性別の表示などもう少し工夫が必要ですね。

【ファイルのダウンロード】

念のため今回の顧客マスターが動くファイルをダウンロードできるようにしました。データベースをまだ入手していない方は一緒にダウンロードしてください。

customer1.zip
SampleDB010.zip
データベース「SampleDB010.mdb」はCドライブの直下に保存します。

スポンサードリンク

JavaScript初心者入門講座TOPへ

JavaScript初心者入門講座

顧客マスター 表示

顧客マスター表示