jquery miniui 学习笔记

最新推荐文章于 2022-05-06 18:49:51 发布

大神们都很忙呀

最新推荐文章于 2022-05-06 18:49:51 发布

阅读量983

点赞数

分类专栏： Jquery

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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" ο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 = " "
           + n + "年" + " " + y + "月";
         document.getElementById("compname").innerHTML = " 机构（名称）："
           + compname;
         insertRowsIntoSpace( result,colnamef, "tbody1");
        }
       },
       error : function(data) {
        mini.alert("数据未能传递！");
       }
      });
   }

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"