11、jeecg 笔记之界面常用整理 - 方便复制粘贴

淡淡的烟草味﹌ 2023-06-01 03:24 1阅读 0赞

# [11、jeecg 笔记之 界面常用整理 - 方便复制粘贴][11_jeecg _ _ -] #

### 1、datagrid 操作按钮（按钮样式） ###

操作按钮的显示主要依赖于  **<t:dgCol title="操作" field="opt"  ></t:dgCol>** 标签，如果没有该标签，下方即使加入也不显示。

![复制代码][copycode.gif]

<t:dgCol title="操作" field="opt"  width="100"></t:dgCol>
    <t:dgDelOpt title="删除"  url="myyCanvassMainController.do?doDel&id={id}"  urlStyle=""  urlclass="ace_button"  urlfont="fa-trash-o"/>
    <t:dgFunOpt funname="canvassDetail(id)" title="题目维护" urlStyle=""  urlclass="ace_button"  urlfont="fa-calendar-o"></t:dgFunOpt>
    <t:dgFunOpt funname="canvassView(id,mcmName)"  title="问卷查看" urlStyle=""  urlclass="ace_button" urlfont="fa-eye"></t:dgFunOpt>
    <t:dgFunOpt funname="canvassPhone(id)" title="用户列表" urlclass="ace_button"  urlfont="fa-phone"></t:dgFunOpt>

![复制代码][copycode.gif]

颜色替换 **urlStyle** 属性 **background-color** 值 即可，示例：

红色：urlStyle=""
    蓝色：urlStyle=""

### 2、datagrid 双击操作 onDbClick ###

双击操作主要实现  **datagrid** 的  **onDbClick** 属性，示例：

![复制代码][copycode.gif]

<t:datagrid name="myyWorkOrderList" checkbox="true" onDblClick="goView" ...
    
    js 中实现 goView 方法。

function goView(rowIndex,rowData)\{

var title = " 工 单 查 看 ";

var url = "myyWorkOrderController.do?goView";

var id = "myyHighQueryList";

detail(title,url,id,"80%","100%");

![复制代码][copycode.gif]

### 3、datagrid 获取选中行 ###

var rows =  $('#xxx').datagrid('getSelections');

其中  **xxx** 为  **datagrid** 的  **name** 值

//判断选中几行

if (rows.length <= 0) {
        openTip("提示","至少勾选一笔需要调派的工单");
        return false;
    }

//如果是单行的话，通常可能会用到 for 遍历后拿到单行： rows\[i\].id

![复制代码][copycode.gif]

// rows[i].id = 当前行的 filed = 'id' 的属性值
    var ids = [];
    var rows = $('#xxx').datagrid('getSelections');
     
    for ( var i = 0; i < rows.length; i++) {
        ids.push(rows[i].id);
    }

![复制代码][copycode.gif]

### 4、dialog 带蒙版的弹窗（layer） ###

![复制代码][copycode.gif]

openTip
     
    function openTip(title,content){
        layer.open({
            title:title,
            content:content,
            icon:7,
            shade: 0.3,
            yes:function(index){
                layer.close(index);
            },
            btn:['确定','取消'],
            btn2:function(index){
                layer.close(index);
            }
        });
    }

![复制代码][copycode.gif]

### 5、datagrid 点击单行超链接弹窗操作 ###

<t:dgCol title="工单号"  popup="true"  url="myyWorkOrderController.do?goView&id={id}" 
    style="color:blue;font-color:blue;width:55px" field="mwoNo" query="true"  queryMode="single"  width="125"></t:dgCol>

### 6、datagrid 自定义字段样式替换（formatjs） ###

列上需要加入的  **formatterjs="xxx"** ，示例：formatterjs="formatterTime"

![复制代码][copycode.gif]

![复制代码][copycode.gif]

### 7、刷新 datagrid （reload + datagrid name + () ） ###

//重新刷新列表 数据

<t:datagrid name="MyList" checkbox="true"  ...

js 方法中只需要调用下方法即可，jeecg 已经帮我们实现该方法了。
    
    reloadMyList();

--------------------

### 1、弹窗，使用系统 curd.js 中的 ###

![复制代码][copycode.gif]

function canvassView(id,mcmName){
         var title = "调查问卷明细";
         var url =  "myyCanvassItemController.do?listInspectMainView&mciMcmId="+id+"&mcmName="+mcmName;
         var datagrid = "myyCanvassMainList";
         var height  =window.top.document.body.offsetHeight-200;
         createdetailwindow(title,url,800,height);
         //两者区别，input disable
         createwindow(title,url,800,height); 
    }

![复制代码][copycode.gif]

### 2、弹窗，不带确认按钮 dialog ###

![复制代码][copycode.gif]

![复制代码][copycode.gif]

### 3、弹窗确认操作，带蒙罩 layer.open ###

![复制代码][copycode.gif]

layer.open({
        title:'提示',
        content:'确定要删除该附件吗？',
        icon:7,
        shade: 0.3,
        yes:function(index){
            layer.close(index);
        },
        btn:['确定','取消'],
        btn1:function(index){
            //真实文件不做删除
            layer.close(index);
        },
        btn2:function(index){
            layer.close(index);
        }
    });

![复制代码][copycode.gif]

### 4、带确定按钮的弹窗 dialog ###

![复制代码][copycode.gif]

//var width = window.top.document.body.offsetWidth;
    var height =window.top.document.body.offsetHeight-200;
     
    $.dialog({
        content: 'url:myyCanvassItemController.do?listInspect&mciMcmId=${mcaMcmId}&id='+id+"&mcmName=${param.mcmName}",
        zIndex: getzIndex(),
        width:800,
        height:height,
        cache:false,
        title:'${param.mcmName}',
        //title:'民意问卷题目列表',
        button: [
            {
                name: "确定",
                callback: function(){
                    //alert("aaa");
                    iframe = this.iframe.contentWindow;
                    saveObj();
                    return false;
                },
                focus: true
            },
            {
                name: "关闭",
                callback: function(){
                    //重新刷新列表 数据
                    reloadmyyCanvassPhoneList();
                    return true;
                }
            }
        ]
    });

![复制代码][copycode.gif]

## 5、ajax 快速复制 ##

![复制代码][copycode.gif]

$.ajax({
        type : 'post',
        url : 'myyWorkOrderFileController.do?filedeal&isdel=1&fileId='+fileId,//请求数据的地址
        dataType : "json", //返回数据形式为json
        async:true,
        success : function(result) {
            var success = result.success;
            if(success){
                $("#table"+tableId).remove();
                $.dialog.tips('操作成功', 2);
            }
        },
        error : function(errorMsg) {
            tip('操作失败');
        }
    });

![复制代码][copycode.gif]

### 6、input 遍历取值 ###

$("input[name='fileName1']").each(function(j,item){
          var value = item.value;
    });

### 7、radio 或者 checkbox 获取选择 ###

![复制代码][copycode.gif]

// radio 获取选中的值
    $('input[name="addType"]').change(function(){
        if($("input[name='addType']:checked").val() == 'add'){
        
        }
    });
     
    //问卷状态选择实现，checkbox 达到单选效果
    $("input[name='mcaStatus']").each(function(){
        $(this).click(function(){
            if($(this).attr('checked')){
                $(':checkbox[type="checkbox"][name='+$(this).attr("name")+']').removeAttr('checked');
                $(this).attr('checked','checked');
            }
        });
    });
     
    
    <div style="margin: 35px 5px 10px 10px;float: left;" id="statusParent">
        <t:dictSelect field="mcaStatus" type="checkbox" typeGroupCode="phone_mcp_status" hasLabel="false"></t:dictSelect>     
        <span style="display:-moz-inline-box;display:inline-block;margin-bottom:2px;text-align:justify;">
            <span style="vertical-align:middle;display:-moz-inline-box;display:inline-block;width: 90px;
    　　　　　　text-align:right;text-overflow:ellipsis;-o-text-overflow:ellipsis; overflow: hidden;white-space:nowrap; " title="预约时间">
                预约时间：
            </span>
            <input type="text" readonly="readonly" id="mcaAppointTime" name="mcaAppointTime" style="width: 140px" class="Wdate" 
    　　　　　　οnclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})">
        </span>
    </div>
     
    // 获取 checkbox 选中的值，外层嵌套一个 div :checkbox
    var mcaStatus;
    $("#statusParent :checkbox[checked]").each(function(i){
        mcaStatus = $(this).val();
    });
    //alert(mcaStatus);
    if(!mcaStatus){
        openTip("提示","请勾选用户问卷状态");
        return false;
    }

![复制代码][copycode.gif]

### 8、$(document).ready 追加 select ###

![复制代码][copycode.gif]

$(document).ready(function (){
               
    
    var eptHtml = '<span style="display:-moz-inline-box;display:inline-block;margin-bottom:2px;text-align:justify;">'+
    '<span style="vertical-align:middle;display:-moz-inline-box;display:inline-block;width: 9
    0px;text-align:right;text-overflow:ellipsis;-o-text-overflow:ellipsis; overflow: hidden;white-space:nowrap; "'+
    '>办结时限：</span>'+
    '<select name="limitTime" width="120" style="width: 120px"> '+
    '<option value="">-- 请选择 --</option> '+
    '<option value="1">我是选项一</option> '+
    '<option value="2">我是选项二 </option>'+
    '</select></span>';
    $("select[name='mwoIsUrge']").after(eptHtml);
    
    });

![复制代码][copycode.gif]

### 9、弹出 datagrid 部门选择（ztree树形式） ###

![复制代码][copycode.gif]

$("input[name='mwoSponsorOrganization']").click(function(){
        $.dialog.setting.zIndex = getzIndex();
        var orgIds = $("#orgIdsSponsorOrgId").val();
        $.dialog({
            content: 'url:departController.do?departSelect&orgIds='+orgIds, 
            zIndex: getzIndex(), 
            title: '组织机构列表', 
            lock: true, 
            width: '400px', 
            height: '450px', 
            opacity: 0.4, 
            button: [
               {name: '<t:mutiLang langKey="common.confirm"/>', callback: callbackDepartmentSelectSponsorOrg, focus: true},
               {name: '<t:mutiLang langKey="common.cancel"/>', callback: function (){}}
       ]}).zindex();
    });
     
     
    function callbackDepartmentSelectSponsorOrg(){
        var iframe = this.iframe.contentWindow;
        var treeObj = iframe.$.fn.zTree.getZTreeObj("departSelect");
        var nodes = treeObj.getCheckedNodes(true);
        // nodes 即为选择得到的部门 id
        if(nodes.length>0){
            var ids='',names='';
            for(i=0;i<nodes.length;i++){
                var node = nodes[i];
                ids += node.id;
                names += node.name;
            }
            $("input[name='mwoSponsorOrganization']").val(names);
            $('#orgIdsSponsorOrgId').val(ids);
        }
    }

![复制代码][copycode.gif]

### 10、弹出 datagrid 人员选择（弹出datagrid形式） ###

![复制代码][copycode.gif]

![复制代码][copycode.gif]

### 11、系统自带的 DepartSelectTag  部门选择 ###

<t:departSelect selectedNamesInputId="orgNames" selectedIdsInputId="orgIds">
    </t:departSelect>

### 12、系统自带的 UserSelectTag 人员选择  ###

<t:userSelect title="用户名称" selectedNamesInputId="userNames"
    selectedIdsInputId="userIds" windowWidth="1000px" windowHeight="600px">
    </t:userSelect>

### 13、choose 系统提供的弹窗 （hiddenId：隐藏域的id、hiddenName：隐藏域的名称、textname：用来展示信息、name：弹出窗的datagrid name） ###

![复制代码][copycode.gif]

![复制代码][copycode.gif]

### 14、文件下载（文件上传搜索 webUpload） ###

function download(path){
        var url =  "cgUploadController.do?showOrDownByurl&down=1&dbPath="+path;
        window.location.href = encodeURI(url);
    }

--------------------

### 1、c:forEach、c:if 快速复制 (包含集合大小判断) ###

![复制代码][copycode.gif]

<c:forEach items="${ myyWorkOrderFileList }" var="mwoFileEntity"  varStatus="status">
       ${status.index} 坐标
    </c:forEach>
     
     
    <c:if test="${fn:length(myyWorkOrderFileList)  > 0 }">
       
    </c:if>

![复制代码][copycode.gif]

### 2、c:choose  java switch 语法（多条件） ###

![复制代码][copycode.gif]

<c:choose>
        <c:when test="<boolean>">
            ...
        </c:when>
        <c:when test="<boolean>">
            ...
        </c:when>
        
        <c:otherwise>
            //都不符合...
        </c:otherwise>
    </c:choose>

![复制代码][copycode.gif]

### 3、c:set 快速复制 ###

<c:set value="${ 值 }"  var="mwoAttachmentList" />

### 4、ready function ###

![复制代码][copycode.gif]

$(document).ready(function (){
     
    });
     
    $(function(){
             
    });

![复制代码][copycode.gif]

### 5、定时器 setInterval ###

setInterval(function(){
     
     
    },2000);

### 6、webUpload 上传按钮 ###

![复制代码][copycode.gif]

<t:webUploader  name="fileName1"  url="myyWorkOrderFileController.do?filedeal"  bizType="mwoFile" auto="true" extensions="*"  
    buttonStyle="btn-green btn-S mb20"></t:webUploader>
     
    bizType 后台代码可以通过 request.getParement("bizType") 获取;
     
    由于这种上传方式 对于新添加的数据 并不能直接关联到上传附件上，所以，我们在提交 form 之前做一个填充效果。
    //填充附件
    function fillInFile(){
        var value;
        $("input[name='fileName1']").each(function(j,item){
            if(value){
                value = item.value + "," + value;
            }else{
                value = item.value;
            }
        });
        $("#mwoAttachment").val(value);
    }
     
    系统中的 upload 替换成 webupload
     
    function ImportXls() {
            
        var deal_url = "myyWorkdayManageController.do?importExcel";
        var data = encodeURIComponent(deal_url);
        $.dialog({
            content: 'url:myyWorkdayManageController.do?upload&deal_url='+data,
            zIndex: getzIndex(),
            cache:false,
            title:'导入工作日',
            button: [
                {
                    name: "关闭",
                    callback: function(){
                        window.location.reload();
                        return true;
                    }
                }
            ]
        });
        
    }
    --------------------------------------------------------------------------
     
    @RequestMapping(params = "upload")
    public ModelAndView upload(HttpServletRequest req) {
        String deal_url = URLDecoder.decode(req.getParameter("deal_url"));
        req.setAttribute("deal_url",deal_url);
        return new ModelAndView("common/upload/web_upload_excel");
    }

![复制代码][copycode.gif]

--------------------

### 1、AuthFilter 界面权限标签（name 按钮容器的id 非必须） ###

<t:authFilter/>

**说明：将该标签放在 JSP 页面最底部即可，注意不要采用包含写法。**

**控制精度： 可控制表单片段的隐藏和禁用**

### 2、HasPermissionTag 界面权限标签 （code  页面控件权限 code） ###

<t:hasPermission code="add">
        <input name="mobile" class="inputxt" value="${depart.mobile }">
    </t:hasPermission>

**注意： 这是一个非的控制，code 匹配上，包含页面片段将不显示。**

**控制精度: 只能控制表单片段的隐藏（不区分隐藏和禁用）**

json打印对象

JSON.stringify()

--------------------

### 导出、下载、模板下载（当前界面） ###

window.location.href =  encodeURI("myyWorkdayManageController.do?exportXls");

select取值\[获取选中\]

<t:dictSelect field="dealFinish" type="radio"  typeGroupCode="SF\_10"  defaultVal="0" hasLabel="false"  title="不再办理" ></t:dictSelect>

$("input\[name='dealFinish'\]:checked").val() == '1'

\--------------------------------------------------

var selectValue = $("select\[name='mkbbType'\]").val();

$("select\[name='mkbTypehid'\] option").each(function()\{

$("select\[name='mkbType'\]").append("<option  value='"+$(this).val()+"'>"+$(this).text()+"</option>");

\});

补充：拿到 select 后，通过 val()

### select赋值\[选中\] ###

![复制代码][copycode.gif]

// 监听事件
    $('input[name="mwoSatisfaction"]').change(function(){
            // 获取当前选中的值
        if($("input[name='mwoSatisfaction']:checked").val() == '2'){
            
        }
        if($("input[name='mwoSatisfaction']:checked").val() != '2'){
            
        }
    });

![复制代码][copycode.gif]

### redio去掉默认值，勾选指定值 ###

![复制代码][copycode.gif]

去除选中项
    $("input[name='mrServiceSatisfaction']:checked").prop("checked", false);
    勾选第一个item选中项
    $("[name='addType']:eq(0)").attr("checked",true);
    移除指定第二个item选中项
    $("[name='sex']:eq(1)").removeAttr("checked");

![复制代码][copycode.gif]

### fmt格式化数值、保留小数位   在 jstl 中 div 表示 除法 ###

<fmt:formatNumber type="number"  value="${revisitList.jrate}" pattern="####.##"  maxFractionDigits="2" />

### format日期格式化： ###

<fmt:formatDate value="${myyWorkOrderPage.mwoReportingTime }" pattern="yyyy-MM-dd HH:mm:ss"/>

### formatterjs自定义格式化 ###

![复制代码][copycode.gif]

![复制代码][copycode.gif]

### ifram取值、赋值 ###

![复制代码][copycode.gif]

// 获取某一个id控件
    frameElement.api.opener.document.getElementById("mwopOperateRemarks");
     
    // 赋值
    var mwopOperateRemarks = frameElement.api.opener.document.getElementById("mwopOperateRemarks");
    mwopOperateRemarks.value = '123';
     
    // 获取 js 定义的 var 属性
    frameElement.api.opener.document.xxx;
     
    // 关闭弹窗
    frameElement.api.close();

![复制代码][copycode.gif]

**博客地址：http://www.cnblogs.com/niceyoo**

转载于:https://www.cnblogs.com/Jeely/p/11309455.html

[11_jeecg _ _ -]: https://www.cnblogs.com/niceyoo/p/10363054.html
[copycode.gif]: /images/20230601/6b65322bb060477ebeee5f07987be2e7.png