mniUI组件

myNameGL

已于 2024-10-15 15:14:04 修改

阅读量281

点赞数 3

文章标签： java 前端服务器

于 2024-08-17 10:36:07 首次发布

本文链接：https://blog.youkuaiyun.com/myNameGL/article/details/141276902

版权

1. 表格为输入框设置可修改属性设置

属性：allowCellEdit="true" allowCellSelect="true"

<div id="srch_grid" class="mini-datagrid" style="width:100%;height:100%;" url="/xtgl/wcsq/gridlist.do" allowCellEdit="true" allowCellSelect="true" >

2. 大面积局部设置失活 javaScripse设置

form.setEnabled(false);
grid.setEnabled(false);

3. 必填属性属性设置

required="required"

4. 日期选择器设置事件当前事件属性设置

value="new Date()"

5. 列隐藏

visible="false"

6.表格添加上传列

<!-----------------------------.HTML文件部分代码--------------------->
<!--导入资源-->
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link href="/resource/css/all.css" rel="stylesheet" type="text/css"/>
    <script src="/resource/scripts/miniui/boot.js" type="text/javascript"></script>
    <script src="/resource/js/init.js" type="text/javascript"></script>

    <link rel="stylesheet" href="/resource/scripts/webuploader/webuploader.css"/>
    <script type="text/javascript" src="/resource/scripts/webuploader/webuploader.js"></script>
    <script type="text/javascript" src="/resource/scripts/webuploader/uploadFile.js"></script>
    <link rel="stylesheet" type="text/css" href="/resource/scripts/webuploader/webuploader.css"/>
    <link rel="stylesheet" type="text/css" href="/resource/scripts/webuploader/uploadFile.css"/>
    <style type="text/css">

<!--表格html代码,只代表一列,其他的根据规则追加-->
 <div class="mini-datagrid" id="cost_grid" style="width: 100%; height: 100%;" idField="bzCostCorp" showPager="false"
         pageSize="100" multiSelect="true" showColumnsMenu="true"
         OnCellBeginEdit="OnCellBeginEdit" showSummaryRow="true" ondrawsummarycell="onDrawSummaryCell"
         sortField="bzCostCorp" sortOrder="asc" allowCellEdit="true" allowCellSelect="true"
         editNextOnEnterKey="true" editNextRowCell="true" allowSortColumn="false"
         url="/xt/dailyRoutine/expenseReport/getCostList.do" showEmptyText="true" alwaysShowEmptyText="true"
         OnCellCommitEdit="OnCellCommitEdit">
<div field="fjpath" name="fjpath" width="80" align="center" headerAlign="center" renderer="onActionRenderer">附件</div>
</div>
<!--javascript代码   onActionRenderer方法-->
function onActionRenderer(e) {
        //debugger;
        var record = e.record;
        var html = "";

        if (!isNull(record.uuid)) {
            html = '<a  style="color:blue" class="text-link" onclick="FileClickView(' + "'" + record.uuid + "'" + ')" target="_blank">' + record.fileName + '</a> ';
            console.log(html);
        } else {
            html = '-';
        }
        return html;
    }

function OnCellBeginEdit(e) {

        var record = e.record;
        var grid = e.sender;
        var field = e.field, value = e.value;
        var editor = e.editor;
       
        if (field == "fjpath") {
            mini.open({
                url : "/common/upload.html",
                title : "附件上传",
                width : 533,
                height : 200,
                onload : function() {
                    var iframe = this.getIFrameEl();
                    var data = {
                        action : "upload",
                        file : value
                    };
                    iframe.contentWindow.SetData(data);
                },
                ondestroy : function(action) {
                    if (action == "ok") {
                        var iframe = this.getIFrameEl();
                        var row = iframe.contentWindow.GetData();
                        var chooseRow = grid.getSelected();
                        row = mini.clone(row);
                        costgrid.updateRow(chooseRow, {
                            fjpath: row.file
                        });
                    }
                }
            });
        }
    }


<!-------------------------------文件上传页upload.html文件全部代码------------------->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>产品编码</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="/resource/css/all.css" rel="stylesheet" type="text/css" />
<script src="/resource/scripts/miniui/boot.js" type="text/javascript"></script>
<script src="/resource/js/init.js" type="text/javascript"></script>
<link rel="stylesheet" href="/resource/scripts/webuploader/webuploader.css"/>
<script type="text/javascript" src="/resource/scripts/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/resource/scripts/webuploader/uploadFile.js"></script>
<link rel="stylesheet" type="text/css" href="/resource/scripts/webuploader/webuploader.css"/>
<link rel="stylesheet" type="text/css" href="/resource/scripts/webuploader/uploadFile.css"/>
</head>

<body>
	<form id="srch_from" method="post" style="height:60%;display:flex;align-items: center" >
			<table style="width:100%;">
				<tr>
					<td >附件:</td>
                	<td  >
                    <div id="uploader"></div>
                    <input id="file" name="file" class="mini-hidden"/>
                    </td>
				</tr>
			</table>
	</form>
	<div class="mini-toolbar" style="padding:2px;border-bottom:0;">
		<table style="width:100%;">
			<tr>
				<td style="width:100%;" align="center">
					<a class="mini-button" onclick="confirm" iconCls="icon-save" id="saveBtn">确认</a>
   					 <a class="mini-button"onclick="onCancel();" iconCls="icon-cancel">关闭</a>
				</td>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		mini.parse();
		var form = new mini.Form("srch_from");

		function onOk() {
			CloseWindow("ok");
		}

		
	
		
		
		function SetData(data) {
			 if ('upload' == data.action) {
		            var fileId = data.file;
		            if(fileId==""||fileId==undefined){
		                fileId=getFileId();
		            }
		            mini.get("file").setValue(fileId);
		            $("#uploader").filesUpload({
		                inputEl:mini.get("file"),
		                pickerid: fileId,
		                filecount: 1
		            });
		        }
		    }
	    function GetData() {
	    	 return form.getData(true);
	    }		
	    function confirm() {
	    	CloseWindow("ok");
	    }
	    function onCancel(e) {
			CloseWindow("close");
		}
		function CloseWindow(action) {
			if (window.CloseOwnerWindow)
				return window.CloseOwnerWindow(action);
			else
				window.close();
		}
	</script>
</body>
</html>

7.按钮失活

mini.get("delAllBtn").disable();

8.获取表格选择行

// 单行
var rows = costgrid.getSelected();
// 多行
var rows = costgrid.getSelecteds();

9.确认弹框

 mini.confirm("删除后不可撤回,确定删除吗？", "提示信息", function (returndata) {
 if (returndata == "ok") {
    // 确认后的时间
    }
}

10.表格删除行

grid.removeRows(rows, true);

11.输入框提示文字

emptyText="请输入编码"

12.下拉框值修改后事件

 onvaluechanged="onChangeCorp"
function onChangeCorp() {
			mini.get("code_fyxl").setUrl("'/select/getcombcode.do?module=财务&"+"code_fydl=" + mini.get("code_fydl").getText()+"'");
		}

13.下拉框值可自定义填写

 allowInput="true"

<input class="mini-comboBox" allowInput="true" name="code_fyxl" id="code_fyxl" valueField="combid" textField="combtext" style="width: 100px;" emptyText="费用小类" />

14.双击事件 - 关闭

 <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;"
                             url="/jcda/wldw/gridlist.do" borderStyle="border:0" showPageSize="false"
                             showPageIndex="false"
                             onrowdblclick="onRowDblClick">

    function onRowDblClick(e) {
        var lookup = mini.get("customer");
        lookup.hidePopup();
    }

15.表格列合计属性

summaryType="sum"

16.表格value和text

<div field="shl" displayField="shlname" >

17.加载提示

// 显示提示
grid.loading("操作中，请稍后......");
// 提示关闭
grid.unmask();

18.form表单大小缩放自适应

  <style type="text/css">
        .flex-container {
            display: flex;
            flex-wrap: wrap;
        }

        .input-item {
            display: flex;
            align-items: center;
            margin:3px;
        }
        .input-item label{
            margin-right:3px;
        }
    </style>

19.mini-combobox前端自定义写死选择项

<label>状态: </label>
						<input class="mini-combobox" name="srch_flag" id="srch_flag" textField="text" valueField="id" width="80px" emptyText="全部" showNullItem="true" nullItemText="全部"
						 data="[{id:'登记',text:'登记'},{id:'确认',text:'确认'}]" />

20.div设置隐藏miniui隐藏div隐藏tr的方法-优快云博客

  if (action == "view" ){
       // 表单失活
       // form.setEnabled(false);
       // div隐藏
          mini.get("btn").setVisible(false);
     }else {
       // 按钮隐藏
          mini.get("cancel").setVisible(false);
    }



window.document.all("div31").style.display = "none";
window.document.all("div32").style.display = "none";