miniUI2017-12-26

阳光穿透心脏的1/2处 2022-06-01 22:56 229阅读 0赞

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

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

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

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

3.一种mini-tab的布局方式  
![这里写图片描述][SouthEast]  
上图是一个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的表头动态更新，效果如下图所示：  
![这里写图片描述][SouthEast 1]  
当你上面填写接种剂次以后，点击查询，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整数

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中的列是动态的，根据所选择的疫苗种类来显示列，不同的疫苗种类有不同的列数  
![这里写图片描述][SouthEast 2]  
具体的实现：

//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("查询失败！");
    					}
    				});

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]

[SouthEast]: /images/20220602/8d09351728144647aa0dc8589673f628.png
[SouthEast 1]: /images/20220602/ac5ca8f8d02042cd81b5ded99f9690d5.png
[SouthEast 2]: /images/20220602/854d57b738bf4631ab7ff61ec114a585.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]: /images/20220602/55324a371cbf49c5bf1fd747b6a26808.png