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="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 <= 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）
openTipfunction 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 disablecreatewindow(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", //返回数据形式为jsonasync: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 即为选择得到的部门 idif(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;// 获取选择的用户 名称+idvar 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 替换成 webuploadfunction 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
posted @ 2019-02-11 20:13 niceyoo 阅读(...) 评论(...) 编辑 收藏
![Android 图片压缩，Bitmap旋转，bitmap与byte[]之间相互转换，Bitmap与String互转](http://pic.xiahunao.cn/Android 图片压缩，Bitmap旋转，bitmap与byte[]之间相互转换，Bitmap与String互转)
