MiniUI使用

发布时间：2020-12-14 02:10:06 所属栏目：大数据来源：网络整理

导读：1 ． MiniUI 页签定位 bodyinput?name?=?"bizType"?class="mini-hidden"?value="${bizType}"div?class="mini-fit"?style="margin-top:0px;"????div?id="tabs1"?class="mini-tabs"?activeIndex="0"?style="width:100%;height:100%;"?plain="false"????????s:i

1．MiniUI页签定位

<body>
<input?name?=?"bizType"?class="mini-hidden"?value="${bizType}">
<div?class="mini-fit"?style="margin-top:0px;">
????<div?id="tabs1"?class="mini-tabs"?activeIndex="0"?style="width:100%;height:100%;"?plain="false">
????????<s:iterator?value="@com.ciic.pub.util.Tools@CODE_ITEMS"?var="codeItem">
????????????<div?title="${codeItem.value?}"?name="${codeItem.key}"?url="${pageContext.request.contextPath}/consignee/batchAction_bizTypeIndex.action?isGrant=${param.isGrant}&isDown=${param.isDown}&bizType=<s:property?value="@com.ciic.pub.util.Endecode@base64Encode(#codeItem.key)"?/>"?refreshOnClick="true"></div>
????????</s:iterator>
????</div>
</div>
<script?type="text/javascript">
????mini.parse();
????var?tab?=?mini.get("tabs1");
????tab.activeTab(tab.getTab(mini.getbyName("bizType").getValue()));
????tab.load();
</script>
</body>

注:?refreshOnClick="true"用于tab页面的选中刷新;

进行tab标签的定位可以通过以下两种方法：

1.activeIndex="0"?

2.tab.activeTab(tab.getTab(mini.getbyName("bizType").getValue()));?

2.MiniUI数据加载

<!--ComboBox：本地数据-->
?<div?field="STATUS"?headerAlign="center"?align="center"?renderer="StatusRenderer">状态</div>
//初始化退票处理状态
var?STATUS?=?[{?id:?1,?text:?'已更新'?}];
function?StatusRenderer(e)?{
???for?(var?i?=?0,?l?=?STATUS.length;?i?<?l;?i++)?{
????????var?g?=?STATUS[i];
????????if?(g.id?==?e.value)?return?g.text;
????}
??return?"";
}
<!--ComboBox：远程数据-->
<input?name="STATUS"?class="mini-combobox"?valueField="id"?textField="name"?url="../data/AjaxService.aspx?method=GetEducationals"?/>

3.MiniUI初始化禁用勾选框

<div?field="APPROVAL_STATUS"?headerAlign="center"?align="center"?renderer="dealStatusRenderer">处理状态</div>
//未更新数据不允许选中
grid.on("beforeselect",?function?(e)?{
?????if?(e.record.APPROVAL_STATUS?==?null)?e.cancel?=?true;
});

4.MiniUI列操作

<div?name="action"?width="120"?headerAlign="center"?align="center"?renderer="onActionRenderer"?cellStyle="padding:0;">操作</div>
function?onActionRenderer(e)?{
???var?grid?=?e.sender;
???var?record?=?e.record;
???var?uid?=?record._uid;
???var?rowIndex?=?e.rowIndex;
???var?s?=?'?<a?class="Edit_Button"?href="javascript:editRow(''?+?uid?+?'')"?>字段编辑</a>?<a?class="Edit_Button"?href="javascript:conditRow(''?+?uid?+?'')"?>条件编辑</a><a?class="Edit_Button"?href="javascript:showRow(''?+?uid?+?'')"?>查看星形模型</a>';
???return?s;
}
//查看星形模型
function?showRow(row_uid)?{
??//根据UID获取行
???var?row?=?grid.getRowByUID(row_uid);
???window.open("/pisa/drawGraph/StartModel.jsp?modelId="+row.tblCode);
}

5.MiniUI参数传递和接收

function?detail(id,status){
????mini.open({
????????url:?"<%=path%>/panel/instrumentPanel.do?actPara=toEditInstrumentDetail",????????title:?"仪表盘明细",?width:?800,?height:?350,????????onload:?function?()?{
????????????var?iframe?=?this.getIFrameEl();
????????????var?data?=?{action:?"edit",id:id,status:status};
????????????iframe.contentWindow.SetData(data);
????????},????????ondestroy:?function?(action)?{
????????????if(action!="cancel")
????????????????grid.reload();
????????}
????});
}
//跨页面传递数据对象,克隆后方可安全使用
function?SetData(data){
????if(data.action=="edit"){
????????data?=?mini.clone(data);
????????grid.load({id:data.id,status:data.status});
????}
}

?注：1.父页面传值给子页面

? ? iframe.contentWindow.SetData(data);?
? ? 父页面调用子页面的自定义的SetData(),把data传递给子页面http://www.miniui.com/demo/#src=datagrid/datagrid.html?这里的“编辑”方法? ? 2.子页面传值给父页面? ? ?window.Owner.XXXX(data)? ? ?子页面调用父页面自定义的XXXX（）把data传递给父页面

6.MiniUI表单的加载和保存

创建表单????????????
只需要一个id即可创建表单对象：
var?form?=?new?mini.Form("#form1");?
??????????
加载表单
$.ajax({
????url:?"../data/FormService.aspx?method=LoadData",????type:?"post",????success:?function?(text)?{
????????var?data?=?mini.decode(text);???//反序列化成对象
????????form.setData(data);?????????????//设置多个控件数据
????}
});
???????????
提交表单
//提交表单数据
var?form?=?new?mini.Form("#form1");????????????
var?data?=?form.getData();//获取表单多个控件的数据
var?json?=?mini.encode(data);//序列化成JSON
$.ajax({
????url:?"../data/FormService.aspx?method=SaveData",????data:?{?submitData:?json?},????success:?function?(text)?{
????????alert("提交成功，返回结果:"?+?text);
????}
});
??????????
清除表单
form.clear();
??????
重置表单
form.reset();

7.MiniUI之ComboBox框

ComboBox联动选择框???????????????????
一：创建两个ComboBox?
<span>部门</span>
???<input?id="deptCombo"?class="mini-combobox"?style="width:150px;"?textField="name"?valueField="id"?
???????onvaluechanged="onDeptChanged"?url="../data/DataService.aspx?method=GetDepartments"?showNullItem="true"/>?????????
<span>职位</span><input?id="positionCombo"?class="mini-combobox"?style="width:150px;"?textField="name"?valueField="id"?/>??
????????????
二：valuechanged加载第二个ComboBox
function?onDeptChanged(e)?{
????var?id?=?deptCombo.getValue();
????positionCombo.setValue("");
????var?url?=?"../data/DataService.aspx?method=GetPositionsByDepartmenId&id="?+?id
????positionCombo.setUrl(url);????????????
}
?
ComboBox单选框?
<input?id="combo1"?class="mini-combobox"?style="width:150px;"?textField="text"?valueField="id"?
??????url="../data/countrys.txt"?value="cn"?showNullItem="true"?/>?
????????????
ComboBox多选?+?多列框
<div?class="mini-combobox"?style="width:250px;"??popupWidth="400"?textField="text"?valueField="id"?
????url="../data/countrys.txt"?value="cn,usa"?multiSelect="true"??>?????
????<div?property="columns">
????????<div?header="ID"?field="id"></div>
????????<div?header="国家"?field="text"></div>
????</div>
</div>

8.MiniUI后台数据处理

? 8.1.Json数据转换为List

var?rows?=?grid.getChanges();//改变列数据
var?rows?=?grid.getSelecteds();//选中列数据
var?data=?mini.encode(rows);//序列化成JSON
String?json??=?request.getParameter("data");
List?list?=?new?ArrayList();
if?(StringUtils.isNotEmpty(json)){
????json?=?json.replaceAll("＂",""");
????list?=?(List)JSON.Decode(json);
}

? 8.2.Int语句转换

String[]?summaryIds?=?request.getParameter("summaryIds").split(",");?//?对公平台的支出单是以客户为角度
StringBuffer?bufSql?=?new?StringBuffer();
bufSql.append("UPDATE?PUB_FS_PAYOUT_BILLS_SUMMARY?B?SET?B.IS_DOWN?=?'1'?").append("?WHERE?1=1?AND?"+Tools.splitInSql(summaryIds,"B.ID"));
/**
?*?由于in子句中超过1000个表达式出错，先用此方法把in子句拆分成每500一段。
?*
?*?@param?ids???????in子句中要排列的字符串数组
?*?@param?fieldName?in子句中字段的名称
?*?@return?拆分拼写好的sql语句
?*/
public?static?String?splitInSql(String[]?ids,?String?fieldName)?{
????StringBuffer?sqlStr?=?new?StringBuffer();
????if?(ids?==?null?||?ids.length?==?0?||?fieldName?==?null
????????????||?"".equals(fieldName))
????????return?null;
????int?len?=?ids.length;
????int?num?=?1;
????if?(len?>?500)
????????num?=?(len?%?500?==?0)???len?/?500?:?(len?/?500)?+?1;
????int?j?=?0;
????int?i?=?1;
????Hashtable?hash?=?new?Hashtable();
????for?(;?i?<=?num;?i++)?{
????????StringBuffer?sb?=?new?StringBuffer();
????????String?str?=?"";
????????for?(;?j?<?i?*?500?&&?j?<?len;?j++)?{
????????????if?(ids[j]?==?null?||?"".equals(ids[j])
????????????????????||?hash.containsKey(ids[j]))
????????????????continue;
????????????sb.append("'").append(ids[j]).append("',");
????????????hash.put(ids[j],?"");
????????}
????????str?=?sb.toString();
????????str?=?str.substring(0,?str.length()?-?1);
????????sqlStr.append("or?").append(fieldName).append("?in?(").append(str)
????????????????.append(")?");
????}
????hash.clear();
????hash?=?null;
????if?(sqlStr.length()?>?0)?{
????????sqlStr.delete(0,?2);
????????return?"("?+?sqlStr.toString()?+?")";
????}?else
????????return?"("?+?fieldName?+?"?in?(''))";
}

? 8.3.批量操作

String[]?batchSql?=?(String[])?sqlList.toArray(new?String[0]);
int[]?status?=?refurnTicktDAO.getJdbcTemplate().batchUpdate(batchSql);

? 8.4.插入语句构造

StringBuffer?buffer?=?new?StringBuffer("");
buffer.append("INSERT?INTO?F001(CUSID,F001222,F001223,F001216,F001234,F001220,F001235,F001200,F001215,F001202,F001221,F001246,F001245,F001242,F001236,F001243)VALUES(");
int?len?=?16?-?financeInfo.length;??????????//这里的16是指上面插入字段的长度
for(int?i=0;i<financeInfo.length;i++){
????buffer.append("'");
????buffer.append(financeInfo[i]);
????buffer.append("',");
}
if(len?>?0){
????for(int?i?=?0;i?<?len;i++){
????????buffer.append("'',");
????}
}
String?sql?=?buffer.substring(0,buffer.lastIndexOf(","))+")";
this.execSql(sql);

? 8.5.MiniUI分页设置

/**
?*?@param?vo????????????分页对象
?*?@param?countHql??????记录数语句
?*?@param?queryHql??????查询语句
?*?@param?isAppendOrder?是否在默认排序部分语句追加新的排序
?*?@return
?*?@throws?RollbackableException
?*/
public?List?pageQuery4Mini(PageVO?vo,?String?countHql,?String?queryHql,?boolean?isAppendOrder)?throws?RollbackableException?{
????Session?s;
????try?{
????????SessionFactory?sf?=?(SessionFactory)?HrmsContext.getBean("sessionFactory");
????????s?=?sf.getCurrentSession();
????????if(StringUtils.isNotEmpty(vo.getFilterStr())){
????????????String[]?filterStr?=?vo.getFilterStr().split("@");
????????????if(filterStr?!=?null){
????????????????StringBuffer?sbb=new?StringBuffer();
????????????????for(int?i=0;i<filterStr.length;i++){
????????????????????String?filter[]?=?filterStr[i].split(":");
????????????????????if(filter==null?||?filter.length<2)
????????????????????????continue;
????????????????????sbb.append("?and?").append(Tools.filterNull(vo.getPrefix())).append(filter[0]).append("?like?'%").append(filter[1]).append("%'");
????????????????}
????????????????queryHql+=sbb.toString();
????????????????countHql+=sbb.toString();
????????????}
????????}
????????List?list;
????????list?=?s.createQuery(countHql).list();
????????int?runtimePageSize?=?vo.getPageCount();
????????int?rSize?=?Tools.parseInt(list.get(0));
????????int?totalPage?=?rSize?/?runtimePageSize;
????????if?(rSize?%?runtimePageSize?>?0)
????????????totalPage++;
????????if?(vo.getPageIndex()?>?totalPage?&&?totalPage?!=?0)
????????????vo.setPageIndex(totalPage);
????????vo.setTotalRecord(rSize);
????????//默认排序部分语句
????????String?sortPart?=?vo.getSortPart();
????????if(isAppendOrder){?//如果是追加
????????????if?(StringUtils.isNotEmpty(sortPart))?{
????????????????queryHql?+=?"?order?by?"?+?sortPart;
????????????????if(StringUtils.isNotEmpty(vo.getSortField()))
????????????????????queryHql?+=?","?+?Tools.filterNull(vo.getPrefix())?+?vo.getSortField()?+?"?"?+?Tools.filterNull(vo.getSortKeyword());;
????????????}else{
????????????????if(StringUtils.isNotEmpty(vo.getSortField()))
????????????????????queryHql?+=?"?order?by?"+?Tools.filterNull(vo.getPrefix())?+?vo.getSortField()?+?"?"?+?Tools.filterNull(vo.getSortKeyword());;
????????????}
????????}else{
????????????String?temp="";
????????????if?(StringUtils.isNotEmpty(sortPart))
????????????????temp?=?"?order?by?"?+?sortPart;
????????????if(StringUtils.isNotEmpty(vo.getSortField()))
????????????????temp?=?"?order?by?"+?Tools.filterNull(vo.getPrefix())?+?vo.getSortField()?+?"?"?+?Tools.filterNull(vo.getSortKeyword());

????????????queryHql+=temp;
????????}

????????Query?q?=?s.createQuery(queryHql);
????????q.setFirstResult((vo.getPageIndex()?-?1)?*?runtimePageSize);
????????q.setMaxResults(runtimePageSize);
????????return?q.list();
????}?catch?(Exception?e)?{
????????throw?new?RollbackableException(Tools.getMessageForKey("base_query"),?e,?this.getClass());
????}
}

? ?使用分页设置需要在页面获取过滤参数：

function?onFilterChanged(e)?{
????grid.load({isMiniui:true,filterStr:getFilterStr});
}
/**获取过滤参数*/
function?getFilterStr(){
????var?filterobj?=?mini.getsbyName("filterName");
????var?filterStr?=?"";
????for(var?i?=?0;?i?<?filterobj.length;?i++)?{
????????if(i?==?filterobj.length?-?1){
????????????filterStr?+=?filterobj[i].id?+?":"?+?filterobj[i].getFormValue()+"";
????????}else{
????????????filterStr?+=?filterobj[i].id?+?":"?+?filterobj[i].getFormValue()?+?"@";
????????}
????}
????return?filterStr;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!