家电企业网站推广方案,网络空间,建设网站主机,合肥自助建站11、jeecg 笔记之 界面常用整理 - 方便复制粘贴 1、datagrid 操作按钮#xff08;按钮样式#xff09; 操作按钮的显示主要依赖于 t:dgCol title操作 fieldopt /t:dgCol 标签#xff0c;如果没有该标签#xff0c;下方即使加入也… 11、jeecg 笔记之 界面常用整理 - 方便复制粘贴 1、datagrid 操作按钮按钮样式 操作按钮的显示主要依赖于 t:dgCol title操作 fieldopt /t:dgCol 标签如果没有该标签下方即使加入也不显示。 t:dgCol title操作 fieldopt width100/t:dgCol
t:dgDelOpt title删除 urlmyyCanvassMainController.do?doDelid{id} urlStyle urlclassace_button urlfontfa-trash-o/
t:dgFunOpt funnamecanvassDetail(id) title题目维护 urlStylebackground-color:#1a7bb9; urlclassace_button urlfontfa-calendar-o/t:dgFunOpt
t:dgFunOpt funnamecanvassView(id,mcmName) title问卷查看 urlStylebackground-color:#1a7bb9; urlclassace_button urlfontfa-eye/t:dgFunOpt
t:dgFunOpt funnamecanvassPhone(id) title用户列表 urlclassace_button urlfontfa-phone/t:dgFunOpt 颜色替换 urlStyle 属性 background-color 值 即可示例 红色urlStylebackground-color:#ec4758;
蓝色urlStylebackground-color:#1a7bb9; 2、datagrid 双击操作 onDbClick 双击操作主要实现 datagrid 的 onDbClick 属性示例 t:datagrid namemyyWorkOrderList checkboxtrue onDblClickgoView ...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工单号 popuptrue urlmyyWorkOrderController.do?goViewid{id}
stylecolor:blue;font-color:blue;width:55px fieldmwoNo querytrue queryModesingle width125/t:dgCol 6、datagrid 自定义字段样式替换formatjs 列上需要加入的 formatterjsxxx 示例formatterjsformatterTime 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 classfa fa-info-circle stylecolor:#e14f4f;nbsp;/spanmwoEstimatedProcessingTime;//即将过期: 满足工作日 办结时限 当前日期的#;}else if(limitTimeTD dateEpt dateEpt currentTime mwoWorkOrderStatus 1){return span classfa fa-info-circle stylecolor:#ffa92a;nbsp;/spanmwoEstimatedProcessingTime;}else{return mwoEstimatedProcessingTime;}}return value;
} 7、刷新 datagrid reload datagrid name () //重新刷新列表 数据 t:datagrid nameMyList checkboxtrue ... js 方法中只需要调用下方法即可jeecg 已经帮我们实现该方法了。reloadMyList(); 1、弹窗使用系统 curd.js 中的 function canvassView(id,mcmName){var title 调查问卷明细;var url myyCanvassItemController.do?listInspectMainViewmciMcmIdidmcmNamemcmName;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?goUploadmwoNotest,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?listInspectmciMcmId${mcaMcmId}ididmcmName${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?filedealisdel1fileIdfileId,//请求数据的地址dataType : json, //返回数据形式为jsonasync:true,success : function(result) {var success result.success;if(success){$(#tabletableId).remove();$.dialog.tips(操作成功, 2);}},error : function(errorMsg) {tip(操作失败);}
}); 6、input 遍历取值 $(input[namefileName1]).each(function(j,item){var value item.value;
}); 7、radio 或者 checkbox 获取选择 // radio 获取选中的值
$(input[nameaddType]).change(function(){if($(input[nameaddType]:checked).val() add){}
});//问卷状态选择实现checkbox 达到单选效果
$(input[namemcaStatus]).each(function(){$(this).click(function(){if($(this).attr(checked)){$(:checkbox[typecheckbox][name$(this).attr(name)]).removeAttr(checked);$(this).attr(checked,checked);}});
});!-- 选择当前手机号码问卷状态 --
div stylemargin: 35px 5px 10px 10px;float: left; idstatusParentt:dictSelect fieldmcaStatus typecheckbox typeGroupCodephone_mcp_status hasLabelfalse/t:dictSelect span styledisplay:-moz-inline-box;display:inline-block;margin-bottom:2px;text-align:justify;span stylevertical-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预约时间预约时间/spaninput typetext readonlyreadonly idmcaAppointTime namemcaAppointTime stylewidth: 140px classWdate οnclickWdatePicker({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 styledisplay:-moz-inline-box;display:inline-block;margin-bottom:2px;text-align:justify;
span stylevertical-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;
办结时限/span
select namelimitTime width120 stylewidth: 120px
option value-- 请选择 --/option
option value1我是选项一/option
option value2我是选项二 /option
/select/span;
$(select[namemwoIsUrge]).after(eptHtml);}); 9、弹出 datagrid 部门选择ztree树形式 $(input[namemwoSponsorOrganization]).click(function(){$.dialog.setting.zIndex getzIndex();var orgIds $(#orgIdsSponsorOrgId).val();$.dialog({content: url:departController.do?departSelectorgIdsorgIds, zIndex: getzIndex(), title: 组织机构列表, lock: true, width: 400px, height: 450px, opacity: 0.4, button: [{name: t:mutiLang langKeycommon.confirm/, callback: callbackDepartmentSelectSponsorOrg, focus: true},{name: t:mutiLang langKeycommon.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.length0){var ids,names;for(i0;inodes.length;i){var node nodes[i];ids node.id;names node.name;}$(input[namemwoSponsorOrganization]).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 langKeycommon.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?assignWorkOrderbeAccountuserNameassignTypeassignType;$.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 selectedNamesInputIdorgNames selectedIdsInputIdorgIds
/t:departSelect 12、系统自带的 UserSelectTag 人员选择 t:userSelect title用户名称 selectedNamesInputIduserNames
selectedIdsInputIduserIds windowWidth1000px windowHeight600px
/t:userSelect 13、choose 系统提供的弹窗 hiddenId隐藏域的id、hiddenName隐藏域的名称、textname用来展示信息、name弹出窗的datagrid name input idmgmMaillistId namemgmMaillistId typehidden value${mgmMaillistId}/
input namemmmName idmmmName classinputxt value${mmmName } readonlyreadonly datatype* /
t:choose hiddenNamemgmMaillistId hiddenidid textnamemmmName urlmyyMaillistMaintainController.do?groupList namemyyMaillistMaintainList iconicon-search title通讯录 iscleartrue isInittrue
/t:choose
span classValidform_checktipt:mutiLang langKey通讯录选择//span 14、文件下载文件上传搜索 webUpload function download(path){var url cgUploadController.do?showOrDownByurldown1dbPathpath;window.location.href encodeURI(url);
} 1、c:forEach、c:if 快速复制 (包含集合大小判断) c:forEach items${ myyWorkOrderFileList } varmwoFileEntity varStatusstatus${status.index} 坐标
/c:forEachc:if test${fn:length(myyWorkOrderFileList) 0 }/c:if 2、c:choose java switch 语法多条件 c:choosec:when testboolean.../c:whenc:when testboolean.../c:whenc:otherwise//都不符合.../c:otherwise
/c:choose 3、c:set 快速复制 c:set value${ 值 } varmwoAttachmentList / 4、ready function $(document).ready(function (){});$(function(){}); 5、定时器 setInterval setInterval(function(){},2000); 6、webUpload 上传按钮 t:webUploader namefileName1 urlmyyWorkOrderFileController.do?filedeal bizTypemwoFile autotrue extensions* buttonStylebtn-green btn-S mb20/t:webUploaderbizType 后台代码可以通过 request.getParement(bizType) 获取;由于这种上传方式 对于新添加的数据 并不能直接关联到上传附件上所以我们在提交 form 之前做一个填充效果。
//填充附件
function fillInFile(){var value;$(input[namefileName1]).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?uploaddeal_urldata,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 codeaddinput namemobile classinputxt value${depart.mobile }
/t:hasPermission 注意 这是一个非的控制code 匹配上包含页面片段将不显示。 控制精度: 只能控制表单片段的隐藏不区分隐藏和禁用 json打印对象 JSON.stringify() 导出、下载、模板下载当前界面 window.location.href encodeURI(myyWorkdayManageController.do?exportXls); select取值[获取选中] t:dictSelect fielddealFinish typeradio typeGroupCodeSF_10 defaultVal0 hasLabelfalse title不再办理 /t:dictSelect $(input[namedealFinish]:checked).val() 1 -------------------------------------------------- var selectValue $(select[namemkbbType]).val(); $(select[namemkbTypehid] option).each(function(){ $(select[namemkbType]).append(option value$(this).val()$(this).text()/option); }); 补充拿到 select 后通过 val() select赋值[选中] // 监听事件
$(input[namemwoSatisfaction]).change(function(){// 获取当前选中的值if($(input[namemwoSatisfaction]:checked).val() 2){}if($(input[namemwoSatisfaction]:checked).val() ! 2){}
}); redio去掉默认值勾选指定值 去除选中项
$(input[namemrServiceSatisfaction]:checked).prop(checked, false);
勾选第一个item选中项
$([nameaddType]:eq(0)).attr(checked,true);
移除指定第二个item选中项
$([namesex]:eq(1)).removeAttr(checked); fmt格式化数值、保留小数位 在 jstl 中 div 表示 除法 fmt:formatNumber typenumber value${revisitList.jrate} pattern####.## maxFractionDigits2 / format日期格式化 fmt:formatDate value${myyWorkOrderPage.mwoReportingTime } patternyyyy-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 classfa fa-info-new stylecolor:#e14f4f;img srcimages/new3.gif width18 stylemargin-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 阅读(...) 评论(...) 编辑 收藏
