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

2020-04-01 17:04:06 阅读：235 来源： 互联网

标签：function 界面 name url datagrid 复制粘贴 var id jeecg

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

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

<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>

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

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

2、datagrid 双击操作 onDbClick

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

<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%"); }

3、datagrid 获取选中行

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

其中 xxx 为 datagrid 的 name 值 //判断选中几行

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

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

// 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);
}

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

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);
        }
    });
}

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"

function formatterTime(value,row,index){
    //后台传过来的 日期
    var limitTimeTD = new Date(Date.parse("${limitTimeDT}"));
    //办结时限
    var mwoEstimatedProcessingTime = new Date().format('yyyy-MM-dd hh:mm:ss',value);
    //工单状态
    var mwoWorkOrderStatus = row.mwoWorkOrderStatus;
    //当前时间
    var currentTime = new Date();
    
    if (value != null && value != '') {
        //办结时限
        var dateEpt = new Date(Date.parse(mwoEstimatedProcessingTime));
        //已经过期：     办结时限 > 当前日期的
        if(currentTime > dateEpt && mwoWorkOrderStatus == '1'){
            return '<span class="fa fa-info-circle" style="color:#e14f4f;">&nbsp;</span>'+mwoEstimatedProcessingTime;
        //即将过期:    满足工作日 > 办结时限  > 当前日期的#;
        }else if(limitTimeTD > dateEpt && dateEpt > currentTime && mwoWorkOrderStatus == '1'){
            return '<span class="fa fa-info-circle" style="color:#ffa92a;">&nbsp;</span>'+mwoEstimatedProcessingTime;
        }else{
            return ''+mwoEstimatedProcessingTime;
        }
    }
    return value;
}

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

//重新刷新列表数据

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

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

reloadMyList();

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

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); 
}

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

function upload(){
    $.dialog({
        content: 'url:myyWorkOrderFileController.do?goUpload&mwoNo=test',
        zIndex: getzIndex(),
        cache:true,
        title:'上传附件',
        button: [
            {
                name: "关闭",
                callback: function(){
                    reloadmyyWorkOrderFileList();
                    return true;
                }
            }
        ]
    });
}

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

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);
    }
});

4、带确定按钮的弹窗 dialog

//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;
            }
        }
    ]
});

5、ajax 快速复制

$.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('操作失败');
    }
});

6、input 遍历取值

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

7、radio 或者 checkbox 获取选择

// 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" 
　　　　　　onclick="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;
}

8、$(document).ready 追加 select

$(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);

});

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

$("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);
    }
}

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

var assignUrl = 'url:userController.do?userSelectAssignList';
        
$.dialog.setting.zIndex = getzIndex();
$.dialog({
    content: assignUrl, 
    zIndex: getzIndex(), 
    title: '调派人员列表', 
    lock: true, 
    width: '400px', 
    height: '450px', 
    opacity: 0.4, 
    button: [
       {name: '确定调派', callback: callbackSelectAssignUser, focus: true},
       {name: '<t:mutiLang langKey="common.cancel"/>', callback: function (){}}
]}).zindex();
 
//用户选择的回调界面
function callbackSelectAssignUser(){
    iframe = this.iframe.contentWindow;
    // 获取选择的用户 名称+id
    var userName = iframe.getuserListSelections('userName');    
    var id =iframe.getuserListSelections('id');
    console.log(userName+"_"+id);
    var ids = [];
    var rows = $('#myyWorkOrderAssignList').datagrid('getSelections');
   
    for ( var i = 0; i < rows.length; i++) {
        ids.push(rows[i].id);
    }
    
    var assignTaskUrl = "myyWorkOrderAssignController.do?assignWorkOrder&beAccount="+userName+"&assignType="+assignType;
    $.ajax({
        type : 'post',
        url : assignTaskUrl,
        dataType : "json",
        data : {
            ids : ids.join(',')
        },
        async:true,
        success : function(result) {
            assignType = "";
            console.log(result);
            console.log(result.msg);
            console.log(result.success);
            if (result.success) {
                var msg = result.msg;
                console.log(msg);
                tip(msg);
                reloadmyyWorkOrderAssignList();
                $("#myyWorkOrderAssignList").datagrid('unselectAll');
                ids='';
            }else{
                openTip("提示","工单调派失败，请重新尝试");
                return false;
            }
            
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            openTip("提示","工单调派失败，请重新尝试");
            return false;
        }
    });
}

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）

<input id="mgmMaillistId" name="mgmMaillistId" type="hidden" value="${mgmMaillistId}"/>
<input name="mmmName" id="mmmName" class="inputxt" value="${mmmName }" readonly="readonly" datatype="*" />
<t:choose hiddenName="mgmMaillistId" hiddenid="id" textname="mmmName" url="myyMaillistMaintainController.do?groupList" 
name="myyMaillistMaintainList" icon="icon-search" title="通讯录" isclear="true" isInit="true">
</t:choose>
<span class="Validform_checktip"><t:mutiLang langKey="通讯录选择"/></span>

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

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

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

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

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

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

3、c:set 快速复制

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

4、ready function

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

5、定时器 setInterval

setInterval(function(){
 
 
},2000);

6、webUpload 上传按钮

<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");
}

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赋值[选中]

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

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

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

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自定义格式化

function formatterNewData(value,row,index){
    var dateValue = new Date().format('yyyy-MM-dd  hh:mm',value);
    var currentUserDepartmentId =  $("#currentUserDepartmentId").val();
         
    if (row != null && row.mwoUnread == 'Y' &&  row.mwoSponsorOrganization == currentUserDepartmentId )  {
      return dateValue + '&nbsp;<span class="fa  fa-info-new" style="color:#e14f4f;"><img  src="images/new3.gif"                               
　　　　　　width="18"  style="margin-top:2px"></span>' ;
    }else{
      return dateValue;
    }
}

ifram取值、赋值

 
// 获取某一个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();

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

标签：function,界面,name,url,datagrid,复制粘贴,var,id,jeecg
来源： https://www.cnblogs.com/Jeely/p/12613761.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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