MiniUI使用

最新推荐文章于 2024-04-23 09:34:54 发布
最新推荐文章于 2024-04-23 09:34:54 发布
阅读量1k 收藏 2
点赞数
文章标签： json javascript ViewUI
原文链接：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;
}


转载于:https://my.oschina.net/yunsy/blog/542597

chenhua3042
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
miniui新增Tab
冷风中的夜晚
05-25 4513
小功能：点击一处跳转一个新的tab                 var mainTabs=window.parent.mini.get("mainTabs");//获取顶层tabs var node={ id:row.id, name:row.unitName, ...
miniui表格load数据成功后，回调函数，其中setData要用如下方法
weixin_34253126的博客
07-27 8119
init: function () { mini.parse(); this.grid = mini.get("jsDatagrid"); var grid1 = mini.get("jsDatagrid"); this.grid.load(null,function(e){ var s = e.result.data[0].data; var ...
探索GoWebMiniUI：轻量级前端框架的创新实践
最新发布
gitblog_00033的博客
04-23 372
探索GoWebMiniUI：轻量级前端框架的创新实践 项目地址:https://gitcode.com/gnimli/go-web-mini-ui GoWebMiniUI 是一个专注于简单、高效的轻量级前端框架，专为快速开发Web应用而设计。它结合了Go语言的强大与现代前端框架的理念，提供了一种简洁的API和可定制化的组件库，旨在简化Web开发流程，提高开发效率。 项目简介 GoWebMiniUI...
mini ui form.setData()设置不上值
wlittlefive的博客
03-14 6219
initForm: function () { var form = new mini.Form("#vm"); $.ajax({ type: 'post', url: "/eventVmChange/queryChangeHistoryFormParam-load-data.html", data: {"id": id}, ...
MiniUI关闭当前Tab页面并回到指定Tab
qq_35788725的博客
08-16 1161
MiniUI 业务场景：从列表页进入编辑页，如果编辑成功，则关闭当前的Tab页，跳转到之前的list列表页。 //全局获取信息 var pttabs = window.parent.tabs; //获取所有的tabs var tabsAll=pttabs.getTabs(); //遍历所有的tab for(let i=0; i<tabsAll.length;i++) { //在tebs中获取指定
MiniUI弹出页面、新增TAB页
热门推荐
Mrkaizi的博客
05-25 2万+
一、新增TAB //新增tab mini.addtab({ url: "/goPage?id="+id, title: "信息页面", onload: function () { // 此次写子页面初始化时，父页面进行的操作，可调用子页面已写好的函数 // 父子页面通信，preLoad为子页面预写好的方法 ...
miniui使用说明
10-09
miniui安装使用说明，由于版权原因，不再将miniui源码放上了。请谅解
miniui demo
09-04
miniui demo，以及java版本demo，适合minniui的学习者使用。
MINIUI-demo
07-23
SpringMvc+Hibernate+MINIUI框架案例，希望使用这个框架的朋友们提供帮助。
使用miniui做的简单oracle数据展示页面
03-31
Java1.8 平台支持，前台用miniui的grid展示数据，后台jsp查询，数据用json传到前台页面。数据从oracle 11g读出。 tomcat 7发布，用localhost:8080/simpletest/datagrid.html访问
miniUI grid.load({})传值
weixin_39743955的博客
05-08 6580
@[TOC](miniUI grid.load({})传值) 欢迎使用Markdown编辑器 /** * 考勤记录 销假列表 * @param MeetingRoom * @return */ @RequestMapping({"/queryVacationList.do"}) @ResponseBody public JsonView queryVacationList(@RequestPar...
设置MiniUI Datagrid setData错误json error解决方法
weixin_33739541的博客
05-16 1234
背景公司购买的MiniUI，改造现有项目Table表格时，官网API未提供静态数据案例，导致各种失败解决方案上官网论坛，看到有人说grid.load()是相对于url使用的，去掉就好了正确的setData使用方法<divid="datagridTable"class="mini-datagrid"style="width:100%;min-height:...
MIniUI跨页面传值
pengdayong77的博客
12-27 1864
项目需要使用它进行跨页面传值。下面是调用父页面打开子窗口。重要的是这一句【iframe.contentWindow.grid.getSelected();】子窗口中有一个grid对象。获取该对象已经选择的行记录。 注意【ondestroy：】对应的是子窗口关闭时调用的对象。所以在子窗口关闭时，要调用下列的方法。这个方法存在于子窗口之中的。 function Choise() { ...
miniui日期控件mini-datepicker禁止选中日期
weixin_33825683的博客
05-30 1737
mini-datepicker日期控件利用js禁止选中日期 html代码： <input id="ToDate" name="ToDate" class="mini-datepicker" allowInput="false" showTodayButton="false" ondrawdate="onDrawDate" /> js代码： <scri...
jQuery MiniUI 开发教程 表单控件 TextBox(List)：多选输入智能提示框（十五）
iteye_4698的博客
10-23 1408
[b]TextBoxList：多选输入智能提示框[/b] [img]http://www.miniui.com/docs/api/images/textboxlist.gif[/img] 参考示例：[url=http://www.miniui.com/demo/textboxlist/textboxlist.html]TextBoxList：多选输入智能提示框[/url] [b]创建...
miniui tabs 切换默认进入后选中其中一个
fengxiaopeng74的博客
09-11 1698
最近都是在使用很老的框架进行开发，还是作者都不更新的，所以会更新一些项目中的使用心得 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title> .
miniUI
mkijn的博客
07-22 1412
miniUI使用笔记
miniui的学习笔记（四）
qq_42265043的博客
09-05 928
1.前台可以显示相应的数据，根据后台的数据。 如下，当后台数据为0或者00时，前台文本会显示为未填报。 相应，当后天数据为1或者20时，前台文本会显示为已填报。 <div field="states" width="170" headerAlign="center" type="comboboxcolumn"> 是否填报 ...
miniui设置属性值_jQuery教程之MiniUi绑定mini-combobox下拉框
weixin_30189559的博客
01-17 2250
本篇文章探讨了jQuery教程之MiniUi绑定mini-combobox下拉框，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。<一：最先开始使用json字符串绑定combobox[{"id":1,"value":"是","text":"是"},{"id":0,"value":"否","text":"否"}]然后我忘记json字符串的格式了，id属性没有加""，com...
miniUI的使用教程
05-19
下面是 miniUI 的使用教程： 1. 引入 miniUI 在 HTML 文件中引入 miniUI 的 CSS 和 JavaScript 文件： ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/miniui/dist/miniui.min.css" /> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值