miniUI

miniUI笔记与问题

作为刚刚入职的小白，公司的很多项目都使用到miniUI，我自己接收的第一个比较正式的活便是关于miniUI的。
对于miniUI官方文档，我个人认为很不友好，易读性差。

mini.parse()

将html标签解析为miniui控件。
我们通常在js的第一行加上这段代码。

解析后，我们便可以使用mini.get获取到控件对象。

var username = mini.get("username");//其中get中的"username"为文档元素的id
username.setValue('小宇');//设置值

mini-combox下拉框

动态设置下拉选择项

 <input class="mini-combobox" id="combo1" textField="text" valueField="id" showNullItem="false"/>

var combo1 = nui.get("combo1");
 combo1.setData([{"id":"1","text":"abc"},{"id":"2","text":"edf"}])

日期选择器

设置只能选择今天及以后日期

<input id="hdsjq" name="zzywxxap.hdsjq" ondrawdate="onDrawDate" required="true"
				    class="mini-datepicker" allowInput="false"  textField="name"
				    valueField="code" emptyText="请选择..." valueFromSelect="true" style="width: 100%;"
				    requiredErrorText="活动开始时间不能为空！"/>

//时间选择器不能小于今日
	function onDrawDate(e) {
		   var date = e.date;
		   var d = new Date();
		   if (date.getTime() <= d.getTime()) 
		   {
		     e.allowSelect = false;
		   }
		 }

Form表单

var form = new mini.Form("#form1");

var data = form.getData();      //获取表单多个控件的数据

form.setData(data);    //设置控件数据

form.setEnabled(false)   //是否禁用只读

自定义校验

<input class="mini-textbox" onvalidation="onValidation"/>

function onValidation(e) {
            if (e.isValid) {
                if (isEnglish(e.value) == false) {
                    e.errorText = "必须输入英文";
                    e.isValid = false;
                }
            }
        }

//校验
		form.validate();
		if(form.isValid() == false){
	      	var a = form.getErrors();//自定义错误信息
	      return;
    	}

mini.DataGrid表

给想要渲染的列加上renderer处理事件。

值得注意的是：renderer只能用于表格某一列的渲染，而不能用于input等其他！！！

表格加载

load ( params, success, fail )
params是我们前端请求参数。

var grid = mini.get("grid");
grid.load(params);

miniUI会自动为我们加上一些参数

后台接收如下信息：
{
    params: "参数",  //自定义
    pageIndex: 0,
    pageSize: 10,
    sortField: "",
    sortOrder: "asc"
}

父子窗口传值

父窗口向子窗口传送数据

//父窗口
var data="传送的数据数据"
mini.open({
			title:"新建政治业务学习专题",
			url: urlUtil.getBaseUrl()+"application/zzyw/zzywxxap.jsp?state=1",
			width: 900,
			height:600,
			onload: function () {
                var iframe = this.getIFrameEl();
                iframe.contentWindow.init(data);//调用子窗口方法
            },
			ondestroy: function () {
			}
		});

//子窗口
function init(data) {
		console.log("接收到父窗口的数据"，data);
}

子窗口向父窗口传送数据

//父窗口
var data="传送的数据"
mini.open({
			title:"新建政治业务学习专题",
			url: urlUtil.getBaseUrl()+"application/zzyw/zzywxxap.jsp?state=1",
			width: 900,
			height:600,
			onload: function () {
                var iframe = this.getIFrameEl();
                iframe.contentWindow.init(data);//调用子窗口方法
            },
			ondestroy: function (data) {
			console.log("接收到子窗口的数据",data)
			}
		});

//子窗口
  var data = “传送的数据”
  window.CloseOwnerWindow(data);  // 通过 window.CloseOwnerWindow 关闭，将数据传递出去