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: 90px;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
转载于:https://www.cnblogs.com/Jeely/p/11309455.html
相关资源：JAVA上百实例源码以及开源项目
