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"

时间: 2024-10-15 04:44:27

jquery miniui 学习笔记的相关文章

JQuery MiniUI学习笔记一

JQuery MiniUI来自开源中国的开源项目,由上海普加软件有限公司版权所有: 学习这个,对于如何设计表格.树形目录,数据库的增删改减以及UI设计的学习很有帮助. 下面来学习其中一个简单示例: 下面给出这部分的完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

jQuery插件学习笔记

最近在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块增加自己的方法和额外的功能.通过这种机制,Jquery允许我们自己创建属于我们自己的插件,提高我们在开发过程中的效率. 虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名.但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习

jquery.extend 学习笔记

//// jquery.extend 学习笔记// jquery.extend 扩展方法设计的很巧妙,动态增加静态方法和属性 // 虽然网上资料很多,还是跟据自已的学习理解记录一下.// //定义一个Person构造函数function Person(iname,iage){ this.uname = iname; this.age = iage;} //定义原型方法Person.prototype = { showN:function(){ //调用静态方法 Person.showName(t

jQuery的学习笔记2

jQuery学习笔记 Day two Chapter two 选择器 类选择器 语法结构:$(“.classname”) javascript里面没有类选择器所以这个时候使用jQuery会更加的简便 通配选择器 语法结构:jQuery(“*”) 例如下列代码就是匹配body里面的所有的元素 <script type="text/javascript"> $(function() { $("*").css("color","r

jQuery的学习笔记

JQuery学习笔记 Chapter one初识jQuery 1.2测试jQuery 在jQuery库中,$是jQuery的别名,如:$()相当于jQuery() 注意:在使用JQuery进行开发的时候如果在做所有事情之前,希望jQuery操作DOM文档,就必须保证在DOM载入完毕后开始执行,应该使用ready事件作为处理HTML文档的开始. 1.4JQuery的核心功能 1.对外接口单一让使用更简单 2.链式语法让编码更加的快速和优雅 3.模仿CSS选择器让选取元素更加的精确的灵活 4.拓展接

jQuery的学习笔记4

JQuery学习笔记3 2.9属性选择器 属性选择器就是根据元素的属性和属性值作为过滤条件,来匹配对应的DOM元素.属性选择器一般都以中括号作为起止分界符 它的形式如下: [attribute] [attribute=value] [attribute!=value] [attribute^=value]作用:匹配给定的属性是以某些值开始的元素 [attribute*=value]作用:匹配给定的属性是以包含某些值的元素 [attribute$=value]作用:匹配给定的属性是以某些值结束的元

jQuery 基础学习笔记总结(一)

Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特性和插件,感觉原来好多前端设计中感觉非常麻烦的东西.通过Jquery的函数和插件都非常easy的实现了而且效果极佳.这里仅仅是简单的介绍下Jquery有哪些知识点. 1.基础选择器 (1). $("button").attr("disabled","true&

Javascript,jQuery,ajax学习笔记。持续更新中。[荐]

欢迎大家关注我的博客,我的博客是在平常学习看书中和总结而撰写的,欢迎大家和我交流,不足之处还很多,希望大家和我交流. 一:javascript基础系列(已完结) 二:javascript基础系列之DOM(已完结) 三:jQuery系列文章(未完结) 四:AJAX(未完结) 五:JavaScript权威指南第6版中文版   一:javascript基础系列: Javascript基础系列之(一)JavaScript语法 Javascript基础系列之(二)变量 Javascript基础系列之(三)

jQuery源代码学习笔记:jQuery.fn.init(selector,context,rootjQuery)代码具体解释

3.1 源代码 init: function( selector, context, rootjQuery ) { var match, elem, ret, doc; // Handle $(""), $(null), or $(undefined) //假设selector为空格.!selector为false if (!selector) { //此时this为空jQuery对象 return this; } // Handle $(DOMElement) //nodeType节