11、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;"> </span>'+mwoEstimatedProcessingTime; //即将过期: 满足工作日 > 办结时限 > 当前日期的#; }else if(limitTimeTD > dateEpt && dateEpt > currentTime && mwoWorkOrderStatus == '1'){ return '<span class="fa fa-info-circle" style="color:#ffa92a;"> </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"
ο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; }
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 + ' <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