总结一下自己开发的一个项目中的前端技术,框架使用的是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("查询失败!");
}
});