博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery miniui 学习笔记
阅读量:4312 次
发布时间:2019-06-06

本文共 4240 字,大约阅读时间需要 14 分钟。

1.取组件值 传递form data,load发送 请求加载数据

 <script type="text/">
  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}//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/">
 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" οnclick="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.选中多选行,取行中某列参数值

//的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"

转载于:https://www.cnblogs.com/huangf714/p/7204591.html

你可能感兴趣的文章
suse如何修改ssh端口为2222?
查看>>
详细理解“>/dev/null 2>&1”
查看>>
suse如何创建定时任务?
查看>>
suse搭建ftp服务器方法
查看>>
centos虚拟机设置共享文件夹并通过我的电脑访问[增加smbd端口修改]
查看>>
文件拷贝(IFileOperation::CopyItem)
查看>>
MapReduce的 Speculative Execution机制
查看>>
大数据学习之路------借助HDP SANDBOX开始学习
查看>>
Hadoop基础学习:基于Hortonworks HDP
查看>>
为什么linux安装程序 都要放到/usr/local目录下
查看>>
Hive安装前扫盲之Derby和Metastore
查看>>
永久修改PATH环境变量的几种办法
查看>>
大数据学习之HDP SANDBOX开始学习
查看>>
Hive Beeline使用
查看>>
Centos6安装图形界面(hdp不需要,hdp直接从github上下载数据即可)
查看>>
CentOS7 中把yum源更换成163源
查看>>
关于yum Error: Cannot retrieve repository metadata (repomd.xml) for repository:xxxxxx.
查看>>
2020-11-18
查看>>
Docker面试题(二)
查看>>
【NOI 2018】归程(Kruskal重构树)
查看>>