jquery miniui 學習筆記

標籤：數組   tab   屬性   remove   ted   load   document   code   move   

1.取組件值 傳遞form data，load發送 請求載入資料
 <script type="text/JavaScript">
  mini.parse();
  // get grid
  var grid = mini.get("grid");
  var form = new mini.Form("#form");
  function search() {
  //取得某個id組件的 value
   var rq = mini.get("yf").getValue();
   if (rq ) {
   // 將form 裡的參數和值傳給 grid發送的請求
    grid.load(form.getData(true));
   } else {
    mini.alert("請選擇");
   }
  }
 </script>

 2.
 confirm確定框 確定title,選項，執行方法
 function cz() {
 \\取得grid選中行（單選）
   var row = grid1.getSelected();
   if (row) {
    mini.confirm("確認計算？",
        "確定？",
        function(action) {
        \\action 選項
         if (action == "ok") {
          var jhzt = ‘10‘;
          var flbm = mini.get("flbm").getValue();
          \\ok 則發送ajax請求，執行操作
          $.ajax({
             url : "${pageContext.request.contextPath}/js/cz.action",
             type : "POST",
             data : {
               flbm:flbm,
               pzh:row.pzh,
               jhzt:jhzt
             },
             success : function(text) {
             mini.alert("操作成功! ");
             \\重新載入資料
              grid.reload();
             },
             error : function(text) {
              mini.alert("操作失敗! ");
             }
            });
         } else {
         }
        });
   } else {
   \\如果沒有選中任何資料，彈出訊息
    mini.alert("請選擇一條資料");
   }
  }

 3. 渲染器
 <div  field="tjskg"  name="tjskg" allowSort="true"  renderer="onActionRenderer">按鈕</div>
 <script type="text/javascript">
 function onActionRenderer(e) {
             var grid = e.sender;
            var  record = e.record;
             var  uid = record._uid; 
             var column = e.column; 
             var s = ‘ <a class="mini-button" onclick="js(\‘‘+ uid +‘\‘)">‘+e.value+‘</a>‘;   
           return s;
         }

 </script>

 4.資料轉成json,提交表單
 //提交表單資料
 var form = new mini.Form("#form1");            
 var data = form.getData();      //擷取表單多個控制項的資料
 var json = mini.encode(data);   //序列化成JSON
 $.ajax({
     url: "../data/FormService.aspx?method=SaveData",
     type: "post",
     data: { submitData: json },
     success: function (text) {
         alert("提交成功，返回結果:" + text);
     }
 });

 5.json 還原序列化成對象
 載入表單
 $.ajax({
     url: "../data/FormService.aspx?method=LoadData",
     type: "post",
     success: function (text) {
         var data = mini.decode(text);   //還原序列化成對象
         form.setData(data);             //設定多個控制項資料
     }
 });

 6.發送ajax請求， 產生table ,設定td 跨行跨列屬性
 function setData(data) {
    data = mini.clone(data);
    var sbjgbh = data.sbjgbh;
    var jsrq = data.jsrq;
    var compname = data.compname;
    var n = jsrq.substring(0, 4);
    var y = jsrq.substring(4, 6);
    $.ajax({
       url : "${pageContext.request.contextPath}/jh/dd.action",
       type : "POST",
       data : {
        sbjgbh : sbjgbh,
        jsrq : jsrq
       },
       success : function(data) {
        if (data.success == true) {
         var result = data.result;
         var colnamef = [ ‘zs‘, ‘mz‘, ‘zy‘, ‘cwz‘,
           ‘cwmz‘, ‘cwzy‘, ‘zcz‘, ‘zcmz‘, ‘zczy‘,
           ‘zqz‘, ‘zqmz‘, ‘zqzy‘ ]; 
         document.getElementById("jsrq").innerHTML = "&nbsp;"
           + n + "年" + "&nbsp;" + y + "月";
         document.getElementById("compname").innerHTML = " 機構（名稱）："
           + compname;
         insertRowsIntoSpace( result,colnamef, "tbody1");
        }
       },
       error : function(data) {
        mini.alert("資料未能傳遞！");
       }
      });
   }

   function insertRowsIntoSpace(data,colnamef,
     tablenamef) { 
    for ( var i = 0; i < data.length; i++) {
     var row = document.createElement("tr");
     for ( var j = 0; j < colnamef.length; j++) {
      var colume = document.createElement("td");
      var key = colnamef[j];
      var value = data[i][key];
      colume.appendChild(document.createTextNode(value));
      row.appendChild(colume);
     }
     table.appendChild(row);
    }
    var row = document.createElement("tr");
    var colume = document.createElement("td");
    colume.innerHTML = ‘備忘‘;
    //colume.colSpan=12;
    //colume.setAttribute("rowSpan", "2");
    colume.setAttribute("colSpan", "12");
    colume.style.cssText="border:0px;";
    row.appendChild(colume);
    table.appendChild(row);
   }
 7.初始化介面及資料  setdata
 function setData(data) {
    //跨頁面傳遞的資料對象，複製後才可以安全使用
    data = mini.clone(data);
    flag = data.flag;
    wbwjm = data.wbwjm;
    mini.get(‘flag‘).setValue(flag);
    mini.get(‘wbwjm‘).setValue(wbwjm);
   }

 

8.選中多選行，取行中某列參數值

//jQuery的push使用方法，可向數組的末尾添加一個或多個元素，並返回新的長度,

var rows = grid.getSelecteds();
            if (rows.length > 0) {
                if (confirm("確定刪除選中記錄？")) {
                    var ids = [];
                    for (var i = 0, l = rows.length; i < l; i++) {
                        var r = rows[i];

                        ids.push(r.id);
                    }

                    //為數組添加分隔字元
                    var id = ids.join(‘,‘);
                    grid.loading("操作中，請稍後......");
                    $.ajax({
                        url: "../data/AjaxService.aspx?method=RemoveEmployees&id=" +id,
                        success: function (text) {
                            grid.reload();
                        },
                        error: function () {
                        }
                    });
                }
            } else {
                alert("請選中一條記錄");
            }

 12.datagrid  顯示 帶小數的列，例如 帶兩位小數

12.1       <div field="salary" numberFormat="￥#,0.00" align="right" width="100" allowSort="true">薪資</div>                                
               <div field="age" width="100" allowSort="true" decimalPlaces="2" dataType="float">年齡</div>

12.2       datatype="float" + numberFormat="n2" 

12.3       datatype="currency"

jquery miniui 學習筆記