miniUI2017-12-26

总结一下自己开发的一个项目中的前端技术，框架使用的是miniUI
1.默认选择下拉框的某个值

mini.get('id').select(value);//此处的value对应的是你所希望显示的那个字典值对应的code

2.获取是否界面查找后是否有数据，通过如下来判断

var grid=mini.get('datagridId');
if(grid.getTotalCount() == 0){
	mini.alert("没有查询到符合条件的数据");
}

3.一种mini-tab的布局方式

上图是一个div中class=“mini-tabs” ,里面包含了四个mini-fit,其中每个mini-fit里面是一个datagrid,通过url来触发后台controller，自动加载数据并显示，js中使用如下代码：

var grid1 = mini.get('datagrid1');
grid1.load();
var grid2 = mini.get('datagrid');
grid2.load();

4.设置某个控件只读或者不可修改

mini.get('id').setEnabled(false);
//或者下面这个也可以
mini.get('id').disable();

5 显示或者隐藏某列指的是datagrid中

mini.get('id').showColumn();//显示
mini.get('id').hideColumn();//隐藏

6.datagrid的表头动态更新，效果如下图所示：

当你上面填写接种剂次以后，点击查询，datagrid的那行数据就会动态更新为你所填写的接种剂次(数字)人数这种格式
实现方法：

//jsp定义一个标志
<div name="header"  headerAlign="center">
//js中写如下代码
var grid = mini.get（'datagrid'）;
//在查询方法中写如下代码
var jzjc = mini.get('jzjc').getValue();//获取你所输入的数值
grid.updateColumn("header", {header: "接种"+jzjc+"剂人数"});

上述代码就完成了动态更新某个列的字段值
7.正则表达式 只能输入1-99整数

 var re = new RegExp("^[1-9][0-9]{0,1}$");
    var v = mini.get("jzjc").getValue();
    if(v==''){
    	mini.alert("必须输入剂次！");
    	return false;
    }else{
	    if (!re.test(v)) {
	    	mini.alert("剂次只能输入【1-99】的整数");
	    	return false;
	    }
    }

8.给combobox绑定事件

//单位类型 valueChanged 事件
var comboboxDwlx = mini.get("dwlx");
comboboxDwlx.on("valuechanged",function(cbx){
	var comboboxDwxx = mini.get("jzdw");
	comboboxDwxx.load("${atx}/mg/mgReportJzjcCp/queryDwxxByDwlx.action?dwlx="+cbx.value);
				});

除了上面使用.on(“valuechanged”,function(cbx){});之外，还可以直接给该控件添加一个onvaluechanged事件
onvaluechanged="dwlxChange()"
8.动态查找并显示列
如下图所示，该datagrid中的列是动态的，根据所选择的疫苗种类来显示列，不同的疫苗种类有不同的列数

具体的实现：

//datagrid我们首先置为空，点击查询按钮，首先查找datagrid动态列
	var ymzl = mini.get("ymzl").getValue();
				$.ajax({
					url: "${atx}/mg/xxx/xxx.action",
					type: "get",
					data: {ymzl: ymzl},
					dataType: "json",
					success: function(data){
						grid.setColumns(data);
						grid.setFrozenStartColumn(0);
						grid.setFrozenEndColumn(0); //锁定列
						
						var params = $.fn.serializeObject($("#excelForm"));
						grid.load(params);
					},
					error: function(){
						mini.alert("查询失败！");
					}
				});