chi's coding life

Q1：如何讓使用者可以利用Enter鍵，跳至下一列進行新增明細資料動作？

A1：通常網頁板不太會利用enter鍵去做操作，但若真的需要我們可以利用keyDown來製作，而左右位置跳欄請使用tab鍵。

//讓dataGrid可以透過enter建新增下一筆
   var selectedRowID = 0;
   $(function () {
      //以下為加一個按ENTER的事件, 每次按ENTER就把目前這一行結束編輯, 新增一筆 
      $(document).keydown(function (event) {
         if (event.keyCode == 13) {
            //如果按 enter 
            $("#dataGridDetail").datagrid("endEdit", selectedRowID);
            insertItem("#dataGridDetail");//insert下一筆明細
            }
        });
   });

   //以下為GRID在選中時,把行號記在selectedRowID的值裏
   function selectRow(rowIndex, rowData) {
      selectedRowID = rowIndex;
   }

Q2：如何再新增一筆資料時，只需要打產品編號及數量後方便會自動代出我要的單價等訊息

A2：撈出單價等訊息主要要透過Ajax執行並且再設值回前端的DataGridDetail上，其這邊主要問題在於如何抓取每一列所的產品編號及數量

//抓取單價、建議售價、單位及產品名稱並計算總金額
$(document).ready(function () {
   var rowIndex;
   var selectedRow;
   $("#dataGridDetail").datagrid({
      //必須在onAfterEdit後執行
      onAfterEdit: function (rowIndex, rowData, changes) {    
         var detailGrid = $('#dataGridDetail'); // 告訴到底是哪個ID
         selectedRow = detailGrid.datagrid("getSelected");//在非編輯模式下可以直接使用getSetected來抓
         rowIndex = detailGrid.datagrid("getRowIndex", selectedRow); //抓取到我選中的那一列
         var custID = $('#dataFormMasterODH_CUST').refval('getValue');//客戶編號
         var sptNO = selectedRow.ODB_PART; //ODB_PART 為欄位名稱
         selCustPrice(detailGrid, rowIndex, selectedRow, custID, sptNO);   //單價及建議售價
                   
       },

     });

});

var total = 0;
function selCustPrice(detailGrid, rowIndex, selectedRow, custID, sptNo) {
    
    var parm = custID + "|" + sptNo;

    //此為EEP 的 ajax 回傳規定模式    
    var data = "mode=method&method=" + "selCustPrice" + "&parameters=" + parm;
    $.ajax({
        url: '../handler/JQDataHandle.ashx?RemoteName=sOrders.ORDH',//command
        data: data,
        type: "POST",
        cache: false,
        async: false,//同步(若非同步則可能會有時間差的問題)
        success: function (price) {           
            var pr = price.split("|");           
            uSetDetailValue(detailGrid,rowIndex,"ODB_PR",pr[1]); //此為將值設回dataGridDetail
            uSetDetailValue(detailGrid, rowIndex, "ODB_PR1", pr[0]);
            uSetDetailValue(detailGrid, rowIndex, "st_desc", pr[2]);
            uSetDetailValue(detailGrid, rowIndex, "st_unit", pr[3]);
            var qty = selectedRow.ODB_QTY;
            var amt = qty * pr[1];
            uSetDetailValue(detailGrid, rowIndex, "ODB_AMT", amt);

        },
        error: function (error) {
           alert("抓取單價出現錯誤")         
        }
    });       
}

//將從後端撈出的值塞入datagridDetail
function uSetDetailValue(detailGrid, rowIndex, columnName, columnValue) {
    //將它改成editor樣子
    var temp = detailGrid.datagrid('getEditor', { index: rowIndex, field: columnName });
    if (temp != null)
        temp.actions.setValue(temp.target, columnValue); //把值塞入
    else {
        var rows = detailGrid.datagrid("getRows");
        var newRow = new Object();
        var dColumns = detailGrid.datagrid("getColumnFields");      
        newRow[columnName] = columnValue;
        detailGrid.datagrid("updateRow", { index: rowIndex, row: newRow });

    }
}

Q3：若我新增完明細資料後，我想要將明細所有的金額加總並且設值到dataFormMaster的總金額上該如何抓取dataGridDetail的所有列呢??

A3：可以利用以下的程式代碼，這邊getRows主要是指當前的頁面，但是我們在新增時並不會有分頁的問題所以可以抓出所有的金額，且將此方法放在onApply。

//將所有的明細總額存回訂單總金額
function totalAmt() {
   endEdit($('#dataGridDetail'));          
   var amt = 0;
   var rows = $('#dataGridDetail').datagrid('getRows');
   for (var i = 0; i < rows.length; i++) {
     amt = amt + rows[i].ODB_AMT;
   }
   //設值回去，請小心此欄位的型態是否為正確的設值法     
   $('#dataFormMasterODH_AMT').val(amt);     
}      

Q4：若我利用checkbox 想要批次更新訂單， 我該如何抓到我勾選到的那筆資料呢??

A4：

//抓取批次更新的單號
function getSelectedItemORDHID() {
    var rows = $("#dataGridView").datagrid('getChecked');//選擇被選取的row    
    var ordhID = "";
    for (var i = rows.length - 1 ; i >= 0; i--) {
        ordhID = ordhID + (rows[i].ODH_NO);
        if (i == 0) {
            continue;
        } else {
            //將所有的選取到的訂單編號用 ，串在一起
            ordhID += ",";
        }
    }
    return ordhID;
}

Q5：當我完成我批次更新的動作後，checkBox的勾選沒有消除。該如何消除呢?

A5：將此方法放置DataGrieView的onLoadSuccess

//將可以全選的勾勾reload時取消勾選
function unCheckAll() {
   $('#dataGridView').datagrid('uncheckAll');
}