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

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

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

 

<t:dgCol title="操作" field="opt"  width=""></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="background-color:#1a7bb9;"  urlclass="ace_button"  urlfont="fa-calendar-o"></t:dgFunOpt>
<t:dgFunOpt funname="canvassView(id,mcmName)"  title="问卷查看" urlStyle="background-color:#1a7bb9;"  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="background-color:#ec4758;"
蓝色：urlStyle="background-color:#1a7bb9;"

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 <= ) {
    openTip("提示","至少勾选一笔需要调派的工单");
    return false;
}

 

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

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

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

openTip
 
function openTip(title,content){
    layer.open({
        title:title,
        content:content,
        icon:,
        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=""></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 == ''){
            return '<span class="fa fa-info-circle" style="color:#e14f4f;">&nbsp;</span>'+mwoEstimatedProcessingTime;
        //即将过期:    满足工作日 > 办结时限  > 当前日期的#;
        }else if(limitTimeTD > dateEpt && dateEpt > currentTime && mwoWorkOrderStatus == ''){
            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-;
     createdetailwindow(title,url,,height);
     //两者区别，input disable
     createwindow(title,url,,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:,
    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-;
 
$.dialog({
    content: 'url:myyCanvassItemController.do?listInspect&mciMcmId=${mcaMcmId}&id='+id+"&mcmName=${param.mcmName}",
    zIndex: getzIndex(),
    width:,
    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('操作成功', );
        }
    },
    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>){
        var ids='',names='';
        for(i=;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 = ; 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(){
 
},);

 

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() == ''){
 
    }
    if($("input[name='mwoSatisfaction']:checked").val() != ''){
 
    }
});

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="" />

 

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="data: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 = '';
 
// 获取 js 定义的 var 属性
frameElement.api.opener.document.xxx;
 
// 关闭弹窗
frameElement.api.close();

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