Step46・明細表示: JavaScript初心者入門講座

明細表示

明細（details）は伝票（slip）のプログラムとほとんど同じ要領で作れます。この2つは見かけは違いますが、よく見るとプログラムの流れは同じです。

今回は伝票選択ボックスを選択すると、明細一覧が表示されるようになっています。テーブルT08Detailsのデータを一覧で表示していますが仕組みは伝票と同じです。商品選択ボックスも顧客選択ボックスの流用です。

伝票のプログラムが読めれば明細のプログラムはほとんど解説なしに読めるようになっていると思います。

まずは明細を表示するところまで作ってみましょう。

【1】以下のように details.html、details.css、details.js を作成します。base.css、database.js はこれまでと共通です。

details.html

<html>
  <head>
    <script type="text/javascript" src="database.js"></script>
    <script type="text/javascript" src="details.js"></script>
    <link href="base.css" rel="stylesheet" type="text/css">
    <link href="details.css" rel="stylesheet" type="text/css">
    <title>details</title>
  </head>
  <body>
    伝票
    <span id="slipDisplay"></span><br /><br />
    <a href="" name="linkNewDetails" id="linkNewDetails">明細新規</a>
    <form name="form2">
      <p>
        <input type="button" name="btnInsertDetails" id="btnInsertDetails" value="明細追加">
        <input type="button" name="btnUpdateDetails" id="btnUpdateDetails" value="明細更新">
        <input type="button" name="btnDeleteDetails" id="btnDeleteDetails" value="明細削除">
      </p>
      GOODS_CD:<span id="goodsDisplay"></span>
      AMOUNT:<input type="text" name="txtAmount" id="txtAmount">
      MEMO:<input type="text" name="txtMemo" id="txtMemo">
    </form>
    <div id="detailsDisplay"></div>
    <div id="totalDisplay"></div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <div id="sqlDisplay"></div>
  </body>
</html>

details.css

特にありませんので、必要があれば好みでCSSをデザインしてください。

details.js

var txtAmount;
var txtMemo;
var selectSlip;
var selectGoods;

onload = init;
onunload = dbClose;

function init() {
  //初期設定をする関数
  txtAmount = document.getElementById("txtAmount");
  txtMemo = document.getElementById("txtMemo");

  txtAmount.onfocus = function (){focus(this);}
  txtAmount.onblur = function (){blur(this);}
  txtMemo.onfocus = function (){focus(this);}
  txtMemo.onblur = function (){blur(this);}

  document.getElementById("btnInsertDetails").onclick = function (){dataInsertDetails();}
  document.getElementById("btnUpdateDetails").onclick = function (){dataUpdateDetails();}
  document.getElementById("btnDeleteDetails").onclick = function (){dataDeleteDetails();}
  document.getElementById("linkNewDetails").onclick = function (){return newDetails();}

  dbConnect();
  slipDisplay();
  goodsDisplay();
}

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

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

function slipDisplay() {
  //伝票を表示する関数

  var mySql = "select SLIP_CD,SLIP_DATE from T07Slip order by SLIP_CD";
  var recordSet = database.Execute(mySql);

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

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

  //alert(tempHtml);
  document.getElementById("slipDisplay").innerHTML = tempHtml;
  selectSlip = document.getElementById("selectSlip");
  selectSlip.onchange = function (){slipChange(this);}

  recordSet.Close();
  recordSet = null;
}

function slipChange(obj) {
  //伝票を選択した時の関数
  if(obj.selectedIndex==0){
    textClearDetails();
    goodsDisplay();
    document.getElementById("detailsDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("伝票を選択してください。");
  }else{
    textClearDetails();
    goodsDisplay();
    detailsDisplay();
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}

function detailsDisplay() {
  //明細を表示する関数
  var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";
  mySql = mySql + "from T08Details,T06Goods ";
  mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
  mySql = mySql + "and SLIP_CD = " + selectSlip.value;
  mySql = mySql + " order by DETAILS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "<select size=\"10\" name=\"selectDetails\" id=\"selectDetails\">\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">";
    tempHtml = tempHtml +"[DETAILS_CD]:" + recordSet(0) + " [SLIP_CD]:" + recordSet(1);
    tempHtml = tempHtml + " [GOODS_NAME]:" + recordSet(2) + " [PRICE]:" + recordSet(3);
    tempHtml = tempHtml + " [AMOUNT]:" + recordSet(4) + " [MEMO]:" + recordSet(5);
    tempHtml = tempHtml + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("detailsDisplay").innerHTML = tempHtml;
  document.getElementById("selectDetails").onchange = function (){detailsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function detailsChange(obj) {
  //明細を選択した時の関数
  var mySql = "select GOODS_CD,AMOUNT,MEMO ";
  mySql = mySql +"from T08Details ";
  mySql = mySql +"where Details_CD = " + obj.value ;
  var recordSet = database.Execute(mySql);

  selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));
  txtAmount.value = recordSet(1);
  txtMemo.value = recordSet(2);

  recordSet.Close();
  recordSet = null;

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

}

function goodsDisplay() {
  //商品を表示する関数

  var mySql = "select GOODS_CD,GOODS_NAME from T06Goods order by GOODS_CD";
  var recordSet = database.Execute(mySql);

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

  var tempHtml = "<select name=\"selectGoods\" id=\"selectGoods\">\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("goodsDisplay").innerHTML = tempHtml;
  selectGoods = document.getElementById("selectGoods");
  selectGoods.onchange = function (){goodsChange(this);}

  recordSet.Close();
  recordSet = null;
}

function goodsChange(obj) {
  //商品を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("商品を選択してください。");
  }else{
    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }

}

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

function newDetails(){
  //明細を新規作成する関数
  textClearDetails();
  document.getElementById("sqlDisplay").innerHTML = "";
  goodsDisplay();
  detailsDisplay();
  selectGoods.focus();
  return false;
}

function textClearDetails() {
  //テキストボックスをクリアする関数
  txtAmount.value = "";
  txtMemo.value = "";
}

function goodsIndexSearch(goodsCd){
  //商品選択ボックスのIndexを検索する関数
  var mySql = "select count(GOODS_CD) from (select GOODS_CD from T06Goods where GOODS_CD <= " + goodsCd + " order by GOODS_CD)";
  var recordSet = database.Execute(mySql);
  var goodsIndex = recordSet(0);
  return goodsIndex;
}

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

【3】明細が表示されました。

【4】伝票選択ボックスと商品選択ボックスはプログラムで表示しています。

【5】伝票選択ボックスから伝票番号「10」を選択します。

【6】明細が表示されました。

＊ゴチャゴチャして見難いかもしれませんが、DETAILS_CDとSLIP_CDの変化をつかんでほしいためです。これらは最終的に表示しないようにします。

【7】伝票番号「10」の明細だけが表示されているところが重要です。伝票選択ボックスで選択した伝票番号と同じだということを確認してください。

【8】明細のレコードを選択すると、そのデータが上の選択ボックスやテキストボックスに反映されます。

【9】「明細新規」をクリックします。

【10】テキストボックスはクリアされ、商品選択ボックスにフォーカスが移りました。

【11】商品選択ボックスで商品を選べます。

【12】伝票選択ボックスや明細をいろいろ切り替えて動作を確認してください。

【解説】

(1)関数slipDisplay()は伝票の時とまったく同じです。

(2)関数slipChange()は伝票選択ボックスをチェンジした時に、関数detailsDisplay()を呼び出しています。

(3)関数detailsDisplay()は明細を表示しています。テーブルT08DetailsにはGOODS_CDしかなく、商品に関する情報GOODS_NAME、PRICE、MEMOがわからないので、テーブルT06Goodsも一緒に使います。

var mySql = "select DETAILS_CD,SLIP_CD,GOODS_NAME,PRICE,AMOUNT,MEMO ";
mySql = mySql + "from T08Details,T06Goods ";
mySql = mySql + "where T08Details.GOODS_CD = T06Goods.GOODS_CD ";
mySql = mySql + "and SLIP_CD = " + selectSlip.value;
mySql = mySql + " order by DETAILS_CD";

＊SLIP_CDの抽出条件にselectSlip.valueを使うことで、目的の伝票の明細だけが取り出せる仕組みです。

またこの関数ではイベントハンドラの設定も行っています。
document.getElementById("selectDetails").onchange = function (){detailsChange(this);}

(4)関数detailsChange()は明細をクリックした時に、商品選択ボックスやテキストボックスに1レコード分のデータを表示しています。

var mySql = "select GOODS_CD,AMOUNT,MEMO ";
mySql = mySql +"from T08Details ";
mySql = mySql +"where Details_CD = " + obj.value ;

関数goodsIndexSearch()で商品選択ボックスを切り替えています。
selectGoods.selectedIndex = goodsIndexSearch(recordSet(0));

(5)関数goodsDisplay()は商品選択ボックスの表示と、イベントハンドラの設定を行っています。

(6)関数goodsChange()は商品選択ボックスがチェンジしたときに呼び出されます。

(7)関数newDetails()は「明細新規」をクリックした時に呼び出されます。

(8)関数textClearDetails()は明細のテキストボックスをクリアします。

(9)関数goodsIndexSearch()はGOODS_CDから何番目の商品を選択状態にするかIndexを返します。伝票の顧客の時と同じ仕組みです。

スポンサードリンク

JavaScript初心者入門講座TOPへ

JavaScript初心者入門講座

明細 表示

明細表示