11、jeecg 筆記之 界面常用整理 - 方便復(fù)制粘貼

1、datagrid 操作按鈕（按鈕樣式）

操作按鈕的顯示主要依賴于?<t:dgCol title="操作" field="opt"? ></t:dgCol> 標(biāo)簽，如果沒有該標(biāo)簽，下方即使加入也不顯示。 <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="題目維護(hù)" 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;" 藍(lán)色：urlStyle="background-color:#1a7bb9;"

?

2、datagrid?雙擊操作 onDbClick

雙擊操作主要實(shí)現(xiàn) datagrid 的 onDbClick 屬性，示例： <t:datagrid name="myyWorkOrderList" checkbox="true" onDblClick="goView" ...

js 中實(shí)現(xiàn) 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("提示","至少勾選一筆需要調(diào)派的工單");return false; } //如果是單行的話，通?？赡軙玫?for 遍歷后拿到單行： rows[i].id // rows[i].id = 當(dāng)前行的 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?點(diǎn)擊單行超鏈接彈窗操作

<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}"));//辦結(jié)時(shí)限var mwoEstimatedProcessingTime = new Date().format('yyyy-MM-dd hh:mm:ss',value);//工單狀態(tài)var mwoWorkOrderStatus = row.mwoWorkOrderStatus;//當(dāng)前時(shí)間var currentTime = new Date();if (value != null && value != '') {//辦結(jié)時(shí)限var dateEpt = new Date(Date.parse(mwoEstimatedProcessingTime));//已經(jīng)過期： 辦結(jié)時(shí)限 > 當(dāng)前日期的if(currentTime > dateEpt && mwoWorkOrderStatus == '1'){return '<span class="fa fa-info-circle" style="color:#e14f4f;">&nbsp;</span>'+mwoEstimatedProcessingTime;//即將過期: 滿足工作日 > 辦結(jié)時(shí)限 > 當(dāng)前日期的#;}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 + () ）

//重新刷新列表 數(shù)據(jù) <t:datagrid name="MyList" checkbox="true" ... js 方法中只需要調(diào)用下方法即可，jeecg 已經(jīng)幫我們實(shí)現(xiàn)該方法了。

reloadMyList();

---

1、彈窗，使用系統(tǒng) curd.js?中的

function canvassView(id,mcmName){var title = "調(diào)查問卷明細(xì)";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);//兩者區(qū)別，input disablecreatewindow(title,url,800,height); }

?

2、彈窗，不帶確認(rèn)按鈕 dialog

function upload(){$.dialog({content: 'url:myyWorkOrderFileController.do?goUpload&mwoNo=test',zIndex: getzIndex(),cache:true,title:'上傳附件',button: [{name: "關(guān)閉",callback: function(){reloadmyyWorkOrderFileList();return true;}}]}); }

3、彈窗確認(rèn)操作，帶蒙罩 layer.open

layer.open({title:'提示',content:'確定要刪除該附件嗎？',icon:7,shade: 0.3,yes:function(index){layer.close(index);},btn:['確定','取消'],btn1:function(index){//真實(shí)文件不做刪除 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: "關(guān)閉",callback: function(){//重新刷新列表 數(shù)據(jù) reloadmyyCanvassPhoneList();return true;}}] });

?

5、ajax?快速復(fù)制

$.ajax({type : 'post',url : 'myyWorkOrderFileController.do?filedeal&isdel=1&fileId='+fileId,//請求數(shù)據(jù)的地址dataType : "json", //返回?cái)?shù)據(jù)形式為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'){} });//問卷狀態(tài)選擇實(shí)現(xiàn)，checkbox 達(dá)到單選效果 $("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');}}); });<!-- 選擇當(dāng)前手機(jī)號碼問卷狀態(tài) --> <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="預(yù)約時(shí)間">預(yù)約時(shí)間：</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 選中的值，外層嵌套一個(gè) div :checkbox var mcaStatus; $("#statusParent :checkbox[checked]").each(function(i){mcaStatus = $(this).val(); }); //alert(mcaStatus); if(!mcaStatus){openTip("提示","請勾選用戶問卷狀態(tài)");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; "'+ '>辦結(jié)時(shí)限：</span>'+ '<select name="limitTime" width="120" style="width: 120px"> '+ '<option value="">-- 請選擇 --</option> '+ '<option value="1">我是選項(xiàng)一</option> '+ '<option value="2">我是選項(xiàng)二 </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: '組織機(jī)構(gòu)列表', 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: '調(diào)派人員列表', lock: true, width: '400px', height: '450px', opacity: 0.4, button: [{name: '確定調(diào)派', callback: callbackSelectAssignUser, focus: true},{name: '<t:mutiLang langKey="common.cancel"/>', callback: function (){}} ]}).zindex();//用戶選擇的回調(diào)界面 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("提示","工單調(diào)派失敗，請重新嘗試");return false;}},error : function(errorMsg) {//請求失敗時(shí)執(zhí)行該函數(shù)openTip("提示","工單調(diào)派失敗，請重新嘗試");return false;}}); }

11、系統(tǒng)自帶的 DepartSelectTag ?部門選擇

<t:departSelect selectedNamesInputId="orgNames" selectedIdsInputId="orgIds"> </t:departSelect>

12、系統(tǒng)自帶的 UserSelectTag?人員選擇?

<t:userSelect title="用戶名稱" selectedNamesInputId="userNames" selectedIdsInputId="userIds" windowWidth="1000px" windowHeight="600px"> </t:userSelect>

13、choose?系統(tǒng)提供的彈窗 （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 快速復(fù)制 (包含集合大小判斷)

<c:forEach items="${ myyWorkOrderFileList }" var="mwoFileEntity" varStatus="status">${status.index} 坐標(biāo) </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?快速復(fù)制

<c:set value="${ 值 }" var="mwoAttachmentList" />

4、ready function

$(document).ready(function (){});$(function(){});

?

5、定時(shí)器?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") 獲取;由于這種上傳方式 對于新添加的數(shù)據(jù) 并不能直接關(guān)聯(lián)到上傳附件上，所以，我們在提交 form 之前做一個(gè)填充效果。 //填充附件 function fillInFile(){var value;$("input[name='fileName1']").each(function(j,item){if(value){value = item.value + "," + value;}else{value = item.value;}});$("#mwoAttachment").val(value); }系統(tǒng)中的 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:'導(dǎo)入工作日',button: [{name: "關(guān)閉",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?界面權(quán)限標(biāo)簽（name 按鈕容器的id?非必須）

<t:authFilter/> 說明：將該標(biāo)簽放在 JSP 頁面最底部即可，注意不要采用包含寫法。 控制精度： 可控制表單片段的隱藏和禁用

2、HasPermissionTag?界面權(quán)限標(biāo)簽 （code? 頁面控件權(quán)限 code）

<t:hasPermission code="add"><input name="mobile" class="inputxt" value="${depart.mobile }"> </t:hasPermission> 注意： 這是一個(gè)非的控制，code 匹配上，包含頁面片段將不顯示。 控制精度: 只能控制表單片段的隱藏（不區(qū)分隱藏和禁用） json打印對象 JSON.stringify()

---

導(dǎo)出、下載、模板下載（當(dāng)前界面）

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>"); }); 補(bǔ)充：拿到 select?后，通過 val()?

select賦值[選中]

// 監(jiān)聽事件 $('input[name="mwoSatisfaction"]').change(function(){// 獲取當(dāng)前選中的值if($("input[name='mwoSatisfaction']:checked").val() == '2'){}if($("input[name='mwoSatisfaction']:checked").val() != '2'){} });

?

redio去掉默認(rèn)值，勾選指定值

去除選中項(xiàng) $("input[name='mrServiceSatisfaction']:checked").prop("checked", false); 勾選第一個(gè)item選中項(xiàng) $("[name='addType']:eq(0)").attr("checked",true); 移除指定第二個(gè)item選中項(xiàng) $("[name='sex']:eq(1)").removeAttr("checked");

fmt格式化數(shù)值、保留小數(shù)位? ?在 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取值、賦值

// 獲取某一個(gè)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;// 關(guān)閉彈窗 frameElement.api.close();

?

博客地址：http://www.cnblogs.com/niceyoo posted @ 2019-02-11 20:13 niceyoo 閱讀(...) 評論(...) 編輯 收藏

總結(jié)

以上是生活随笔為你收集整理的11、jeecg 笔记之 界面常用整理 - 方便复制粘贴的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。