jquery miniui dialog 怎样实现?

Posted 2023-05-18

记录原始位置的横纵坐标：var postion = $("#target").offset()、$("#target").data("x",postion.left)、 $("#target").data("y",postion.top)。点击还原就触发事件把某个东西还原到原始位置的横纵坐标：$("#target").data("x")取值。 参考技术A 其实就是一个高z-index的浮动DIV。

jquery miniui 学习笔记

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"