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
 
posted @ 2020-04-01 16:57  DarJeely  阅读(529)  评论(0编辑  收藏  举报