(转) MiniUI使用
来源于https://my.oschina.net/yunsy/blog/542597
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", type: "post", 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; }