(转) 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;
}
(转) MiniUI使用的更多相关文章
- miniui中的相关问题
miniui中的datagrid,若需要为其中表格设置值,则: 必须保证查出来的json中字段对应field,且json的格式必须为: {“data”:[{"id":"0 ...
- 扩展 jquery miniui 组件实现自动查询数据
主题 之前写过一篇文章分享了公司basecode查找数据后台是怎么实现的(http://www.cnblogs.com/abcwt112/p/6085335.html).今天想分享一下公司前台是怎么扩 ...
- miniui前台无法显示数据
坑爹,刚开始使用miniui重写对账单的功能,显示数据的时候明明已经获取到json数据了,但前台还是显示不出来,找了一上午的原因,终于找到是因为前台显示字段的field值要改成和json中(数据库字段 ...
- miniui无法传递input值
miniui获取到的值死活传不到php去处理,input框里有值php接收到却一直为空,又是查资料.测试.搜索.提问,最后才在文档中发现尼玛miniui不用name的,其实是<input tex ...
- miniui后台无法接收到input传值
出错原因:在miniui中,此处应写成<input textName="current_unit",在php中才可以使用$_POST['current_unit']获取到值, ...
- MINIUI版本破解
miniui类似easyui是一个web ui,功能比不上人家还是收费,收费也就算了,代码还加密混淆,过期提示脚本越写越离谱,严重低估IT人员的智慧,对此表示强烈不满,故下载了几个版本花了一小时破解: ...
- MiniUI动态添加table表格
本文将介绍一下,如何用Jquery MiniUi动态添加一行table表格 1.效果展示 ↓ 2.具体代码 <script type="text/javascript"> ...
- MiniUI中DataGrid数据的载入
本文将介绍一下,在ASP.NET MVC环境下,如何用Jquery MiniUI中的Datagrid控件载入数据. 1.效果展示: 2.具体步骤: 1> 既然是在MVC里,那我们的界面自然选择 ...
- jQuery MiniUI开发系列之：数据验证
在开发应用系统界面时,往往需要进行很多.复杂的数据验证,当填写的数据符合规定,才能提交保存. jQuery MiniUI提供了比较完美的表单数据验证和错误显示的方式. 常见的表单控件,都有一个验证事件 ...
- jQuery MiniUI开发系列之：Ajax处理超时、服务端错误
MiniUI所有组件的ajax交互,均使用标准.成熟的jQuery.ajax. 依赖于jquery ajax组件的完善性,我们可以拦截住每一次ajax请求处理. 比如,拦截ajax返回数据前,判断返回 ...
随机推荐
- leetcode 123. 买卖股票的最佳时机 III
使用动态规划的解法,空间复杂度O(2*2)如果交易k次则为O(2*k),时间复杂度O(2n),交易k次为O(n*k), 因此本题实际上可以退化为买卖一次的情况:去掉buy2和sell2,即leetco ...
- leetcode 94二叉树的中序遍历
递归算法C++代码: /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; ...
- Java中的低级错误
1. 不能用“==”比较两个字符串内容相等. 2. 对list做foreach循环时,循环代码中不能修改list的结构. 3. ...
- WPF复杂形状按钮
方法很简单,将图片转换为<path>就可以了(需要用到Photoshop) 不过一般情况下制作按钮都不会用到这种方法,通常只要用image填充一张图片或者把路径转成按钮控件就可以了. 之所 ...
- 实现点击cell实现改变cell和cell上控件的背景颜色
话不多少,贴上代码吧!!! // // ViewController.m // CellChangeBgColorDemo // // Created by 思 彭 on 17/1/12. // Co ...
- python基本成分详解
字符串 一.需要了解的 msg = 'HelloWorld' 1.isdecimal判断是否是十进制(整数)w print(msg.isdecimal()) 2.endswith判断字符串末尾是否是指 ...
- 从“int中提取高八位”开始的学习
今天有个学弟问了一个问题,怎么提取int中的高八位. 这个是个非常基础的问题,随便用位运算瞎搞几下就出来了. 看到这个问题的时候,也不知道我当初想了些啥,想了个骚操作,用memcpy把int放到字符串 ...
- navicat连接 mysql报错1251解决方案
转自:https://blog.csdn.net/XDMFC/article/details/80263215 好不容易安装好mysql,但又出现了mysql客户端版本太低的问题.根据参考的这篇博客, ...
- python 爬取百度url
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2017-08-29 18:38:23 # @Author : EnderZhou (z ...
- CF 1140B Good String
Description You have a string ss of length nn consisting of only characters > and <. You may d ...