前端页面实例1，多datagrid，panel，添加检查计划，下发到PAD端

最新推荐文章于 2021-07-13 15:16:13 发布

chengshun5940

最新推荐文章于 2021-07-13 15:16:13 发布

阅读量130

点赞数

原文链接：https://my.oschina.net/u/2471041/blog/532618

版权

<%@ page language="java" pageEncoding="UTF-8" %><%@taglib uri="http://www.springframework.org/tags" prefix="spring" %><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ taglib uri="/xxll-tags" prefix="x"%>

<%@ taglib uri="/sw-tags" prefix="sw"%>

<sw:pageRights code="100300100"/>

<!DOCTYPE html>

<%--

作者：吴云辉

邮箱：Fly@mmgg.net

QQ:963415

创建日期：2014-08-14 23:45:35

Key:88DF159C-A898-47B4-A227-06387A9DEDFE

--%>

<html>

<head>

function doupload(url,browse_button){

var uploader = new plupload.Uploader({

runtimes : 'html5,flash,silverlight,html4',

browse_button : browse_button,

url : url,

file_data_name:'files',

multi_selection:false,

flash_swf_url : '${staticpath}/common/js/plupload-2.1.2//js/Moxie.swf',

silverlight_xap_url : '${staticpath}/common/js/plupload-2.1.2//js/Moxie.xap',

filters : {

max_file_size : '5mb',

mime_types: [

{title : "图片", extensions : "jpg,gif,png,bmp,jpeg"},

]

init: {

FilesAdded: function(up, files) {

uploader.start();

$.messager.progress({

title:'请稍后...',

text:"文件正在上传...",

interval:120

});

FileUploaded:function(a,b,data){

var selRow=$("#plan_datagrid").datagrid('getSelected');

if(!$("#checkerDiv").data(selRow.checkItemId+"_Image")){

$("#checkerDiv").data(selRow.checkItemId+"_Image",new Array());

}

var d=$.parseJSON(data.response);

$("#checkerDiv").data(selRow.checkItemId+"_Image").push(d.msg[0]);

var imageHtml="<li id='ImgList_"+d.msg[0]+"' class='Cls_"+selRow.checkItemId+"'>";

imageHtml+='<img src="${base}/upload/down/'+d.msg[0]+'" class="img-thumbnail checkfile"/>';

imageHtml+="<div class='dask'>";

imageHtml+="<div class='zoom'><i class='icon-zoom-in'></i><a href='#' title='"+d.msg[0]+"'>放大</a></div>"

imageHtml+="<div class='del'><i class='icon-remove'></i><a href='#' title='"+d.msg[0]+"'>删除</a></div>"

imageHtml+="</div>"

imageHtml+="<p>"+d.msg[1]+"</p>";

imageHtml+="</li>"

$(imageHtml).fadeIn().appendTo("#checkImageList");

UploadComplete:function(a,b,c){

$.messager.progress('close');

Error: function(up, err) {

$.messager.alert("错误提示",err.message,"error");

$.messager.progress('close');

}

});

uploader.init();

}

function uploadpdf(url,browse_button){

var uploader = new plupload.Uploader({

runtimes : 'html5,flash,silverlight,html4',

browse_button : browse_button,

url : url,

file_data_name:'files',

multi_selection:false,

flash_swf_url : '${staticpath}/common/js/plupload-2.1.2//js/Moxie.swf',

silverlight_xap_url : '${staticpath}/common/js/plupload-2.1.2/js/Moxie.xap',

filters : {

max_file_size : '20mb',

mime_types: [

{title : "文件", extensions : "rar,pdf,doc,docx,xls,xlsx,ppt,pptx,zip,7z,txt"},

]

init: {

FilesAdded: function(up, files) {

uploader.start();

$.messager.progress({

title:'请稍后...',

text:"文件正在上传...",

interval:120

});

FileUploaded:function(a,b,data){

var selRow=$("#plan_datagrid").datagrid('getSelected');

if(!$("#checkerDiv").data(selRow.checkItemId+"_Image")){

$("#checkerDiv").data(selRow.checkItemId+"_Image",new Array());

}

var d=$.parseJSON(data.response);

$("#checkerDiv").data(selRow.checkItemId+"_Image").push(d.msg[0]);

var imageHtml="<li id='ImgList_"+d.msg[0]+"' class='Cls_"+selRow.checkItemId+"'>";

imageHtml+='<img src="${staticpath}/common/image/file_64.png" class="img-thumbnail checkfile" tip="${base}/upload/down/'+d.msg[0]+'"/>';

imageHtml+="<div class='dask'>";

imageHtml+="<div class='down'><i class='icon-zoom-in'></i><a href='#' title='"+d.msg[0]+"'>下载</a></div>"

imageHtml+="<div class='del'><i class='icon-remove'></i><a href='#' title='"+d.msg[0]+"'>删除</a></div>"

imageHtml+="</div>"

imageHtml+="<p>"+d.msg[1]+"</p>";

imageHtml+="</li>"

$(imageHtml).fadeIn().appendTo("#checkImageList");

UploadComplete:function(a,b,c){

$.messager.progress('close');

Error: function(up, err) {

$.messager.alert("错误提示",err.message,"error");

$.messager.progress('close');

}

});

uploader.init();

}

$(document).ready(function() {

$("#inlineForm").validate();

doupload('${base}/upload/check.do','multi');

uploadpdf('${base}/upload/check?sync=false','multipdf');

//image

$(".checkImageList").on("mouseenter mouseleave","li",function(event){

if(event.type=='mouseenter'){

$(this).find(".dask").stop().delay(50).animate({"top":0,opacity:0.5},300)

}else{

$(this).find(".dask").stop().animate({"top":-100,opacity:0},300)

}

});

//image zoom

$(".checkImageList").on("click","li .zoom a",function(event){

$(event.target).parents("li").find(".checkfile").each(function(a,b) {

$(b).colorbox({photo:true,href:$(b).attr('src'),maxWith:"100%",maxHeight:"100%"});

});

$(event.target).parents("li").find(".checkfile").trigger("click");

});

//pdf down

$("#checkImageList").on("click","li .down a",function(event){

$(event.target).parents("li").find(".checkfile").each(function(a,b) {

$("<div style='display:none;'><iframe src='"+$(b).attr('tip')+"'></iframe><div>").appendTo("body");

});

$(event.target).parents("li").find(".checkfile").trigger("click");

});

//image del

$(".checkImageList").on("click","li .del a",function(event){

var id=$(this).attr("title");

var selRow=$("#plan_datagrid").datagrid('getSelected');

$.post("${base}/upload/del/"+id,function(msg){

Notifier.msg(msg);

$("#ImgList_"+id).remove();

var arr=$("#checkerDiv").data(selRow.checkItemId+"_Image");

arr.splice($.inArray(id,arr),1);

});

var datagridx={

nowrap: false,striped: true,fitColumns: true,fit:true,border:false,singleSelect:true,

rownumbers:true,groupField:'groupName',view:groupview,

groupFormatter:function(value,rows){

return value + ' (共 ' + rows.length + ' 项)';

columns:[[

{field:"checkItemName",title:"检查项",width:'75%'},

{field:"pushPad",title:"Pad",width:'50px',formatter: function(value,row,index){

if(value=='是'){

$("#checkerDiv").data(row.checkItemId+"_Pad",true);

return '<div class="'+row.checkItemId+'"><a href="#" class="easyui-linkbutton pad bbb" data-options="selected:true,toggle:true,plain:true,iconCls:\'icon-mobile-phone icon-3x\'"></a></div>';

}else{

return '<div class="'+row.checkItemId+'"><a href="#" class="easyui-linkbutton pad ccc" data-options="toggle:true,plain:true,iconCls:\'icon-mobile-phone icon-3x\'"></a></div>';

}

}},

{field:"checkResult",title:"检查结果",width:'180px',formatter: function(value,row,index){

var str='<div class="'+row.checkItemId+'">';

if(value=='qualified'){

$("#checkerDiv").data(row.checkItemId+"_Check",'qualified');

str+='<a href="#" class="easyui-linkbutton c1 icon-ok" data-options="selected:true,toggle:true,plain:true,group:\'g_'+index+'\'" style="width:50px">符合</a>';

str+='<a href="#" class="easyui-linkbutton c2" data-options="toggle:true,plain:true,group:\'g_'+index+'\'" style="width:50px">不符合</a>';

str+='<a href="#" class="easyui-linkbutton c3" data-options="toggle:true,plain:true,group:\'g_'+index+'\'" style="width:50px">不涉及</a>';

}else if(value=='unqualified'){

$("#checkerDiv").data(row.checkItemId+"_Check",'unqualified');

str+='<a href="#" class="easyui-linkbutton c1" data-options="toggle:true,plain:true,group:\'g_'+index+'\'" style="width:50px">符合</a>';

str+='<a href="#" class="easyui-linkbutton c2 icon-remove" data-options="selected:true,toggle:true,plain:true,group:\'g_'+index+'\'" style="width:50px">不符合</a>';

str+='<a href="#" class="easyui-linkbutton c3" data-options="toggle:true,plain:true,group:\'g_'+index+'\'" style="width:50px">不涉及</a>';

}else if(value=='none'){

$("#checkerDiv").data(row.checkItemId+"_Check",'none');

str+='<a href="#" class="easyui-linkbutton c1" data-options="toggle:true,plain:true,group:\'g_'+index+'\'" style="width:50px">符合</a>';

str+='<a href="#" class="easyui-linkbutton c2" data-options="toggle:true,plain:true,group:\'g_'+index+'\'" style="width:50px">不符合</a>';

str+='<a href="#" class="easyui-linkbutton c3 icon-minus" data-options="selected:true,toggle:true,plain:true,group:\'g_'+index+'\'" style="width:50px">不涉及</a>';

}else{

str+='<a href="#" class="easyui-linkbutton c1" data-options="toggle:true,plain:true,group:\'g_'+index+'\'" style="width:50px">符合</a>';

str+='<a href="#" class="easyui-linkbutton c2" data-options="toggle:true,plain:true,group:\'g_'+index+'\'" style="width:50px">不符合</a>';

str+='<a href="#" class="easyui-linkbutton c3" data-options="toggle:true,plain:true,group:\'g_'+index+'\'" style="width:50px">不涉及</a>';

}

str+='</div>';

return str;

}}

]],

};

//click yiju

$("#yiju").on("click",".list-group-item",function(){

var id=$(this).attr("id");

var BASIS_VIEW_URL="${base}/business/checkbasis/view/"+id;

var t=$.window({

href:BASIS_VIEW_URL,height:'90%',

title:'<spring:message code="admin.view.txt.view"/>',

view:true

});

//checktable change event

var datagridy={

url:'${base}/business/checkplan/listRecordDetail.do?checkTableId=${checkRecord.checkTable.id}&checkRecordId=${checkRecord.id}',

onLoadSuccess:function(data){

$(".easyui-linkbutton").linkbutton({

onClick:function(){

var sel=$(this).linkbutton("options").selected;

var cId=$(this).parent().attr("class");

if(sel){

$(this).removeClass("ccc")

if($(this).hasClass("c1")){

$(this).siblings().removeClass("icon-remove").removeClass("icon-minus");

$(this).addClass("icon-ok");

$("#checkerDiv").data(cId+"_Check",'qualified');

}

if($(this).hasClass("c2")){

$(this).siblings().removeClass("icon-ok").removeClass("icon-minus");

$(this).addClass("icon-remove");

$("#checkerDiv").data(cId+"_Check",'unqualified');

}

if($(this).hasClass("c3")){

$(this).siblings().removeClass("icon-remove").removeClass("icon-ok");

$(this).addClass("icon-minus");

$("#checkerDiv").data(cId+"_Check",'none');

}

if($(this).hasClass("pad")){

$("#checkerDiv").data(cId+"_Pad",sel);

$(this).addClass("bbb");

}

}else{

$("#checkerDiv").data(cId+"_Pad",sel);

$(this).addClass("ccc").removeClass("bbb");

}

});

$(".easyui-linkbutton").find(".l-btn-left").removeAttr("style");

//otherResult

$("#other").empty();

$(data.rows).each(function(ix,detail){

var otherStr="";

if(detail.otherResult!=''){

var jsonList=$.parseJSON(detail.otherResult);

for(var key in jsonList){

otherStr+="<div class='form-group itemDetail "+detail.checkItemId+"_Detail' style='display:none;'>";

otherStr+="<label>"+key+"</label>";

otherStr+="<input type='text' title='"+detail.checkItemId+"' value='"+jsonList[key]+"' class='form-control othInput' name='"+key+"'/>";

otherStr+="</div>"

}

$("#other").append(otherStr);

//add checkremark

var checkmarkstr='<div class="itemDetail '+detail.checkItemId+'_Detail" style="display:none;"><label>备注</label><div><textarea title="'+detail.checkItemId+'" style="width:400px;height: 60px;" class="form-control checkRemark">'+detail.checkremark+'</textarea></div></div>';

$("#other").append(checkmarkstr);

});

onSelect:function(rowIndex, rowData){

$("#yiju").empty();

$("#fangfa").empty();

$(".itemDetail").hide();

$("#checkFile").fadeIn();

$("."+rowData.checkItemId+"_Detail").fadeIn();

$("#checkImageList").children("li").hide();

$(".Cls_"+rowData.checkItemId).fadeIn();

$.ajax({

url:'${base}/business/checkplan/getCheckItemAndImage.do',

type:'post',dataType:'json',

data:'checkItemId='+rowData.checkItemId+'&checkRecordItemId='+rowData.checkRecordItemId,

success:function(d){

var cbContent="";

$(d.checkItem.checkBasiss).each(function(i,obj){

cbContent+="<li id='"+obj.id+"' class=\"list-group-item\"><i class='icon-chevron-sign-right'></i> "+obj.title+"</li>";

});

$(cbContent).fadeIn().appendTo("#yiju");

//checkmethod

$("#fangfa").append(d.checkItem.checkMethod);

$("#remark").append(d.checkItem.remark);

//ImageList

$(d.listAttr).each(function(a,b){

if($("#ImgList_"+b.id+"").length==0){

if(b.sync){

var imageHtml="<li id='ImgList_"+b.id+"' class='Cls_"+d.checkItem.id+"'>";

imageHtml+='<img src="${base}/upload/down/'+b.id+'" class="img-thumbnail checkfile"/>';

imageHtml+="<div class='dask'>";

imageHtml+="<div class='zoom'><i class='icon-zoom-in'></i><a href='#' title='"+b.id+"'>放大</a></div>"

imageHtml+="<div class='del'><i class='icon-remove'></i><a href='#' title='"+b.id+"'>删除</a></div>"

imageHtml+="</div>"

imageHtml+="<p>"+b.originalName+"</p>";

imageHtml+="</li>"

$(imageHtml).fadeIn().appendTo("#checkImageList");

}else{

var imageHtml="<li id='ImgList_"+b.id+"' class='Cls_"+d.checkItem.id+"'>";

imageHtml+='<img src="${staticpath}/common/image/file_64.png" class="img-thumbnail checkfile" tip="${base}/upload/down/'+b.id+'"/>';

imageHtml+="<div class='dask'>";

imageHtml+="<div class='down'><i class='icon-zoom-in'></i><a href='#' title='"+b.id+"'>下载</a></div>"

imageHtml+="<div class='del'><i class='icon-remove'></i><a href='#' title='"+b.id+"'>删除</a></div>"

imageHtml+="</div>"

imageHtml+="<p>"+b.originalName+"</p>";

imageHtml+="</li>"

$(imageHtml).fadeIn().appendTo("#checkImageList");

}

});

}

});

}

};

$("#plan_datagrid").datagrid($.extend(datagridx,datagridy));

//before submit

var beforeSubmit=function(){

if($.isEmptyObject($("#checkerDiv").data())){

Notifier.warning("至少做一次检查");

return false;

}

var selCheckers=$("#checkerName").combobox("getValues");

if(selCheckers.length<=0){

Notifier.warning("检查人不能为空");

return false;

}

if($.fn.validate){

return $('#inlineForm').valid();

}

};

function submitForms(url){

$("#checkerDiv").empty();

//checker

var selCheckers=$("#checkerName").combobox("getValues");

$(selCheckers).each(function(i,id){

$("#checkerDiv").append("<input type='hidden' name='checker' value='"+id+"'/>");

});

//select checkitem

//select pushpad

$(".othInput").each(function(){

var cId=$(this).attr("title");

var oname=$(this).attr("name");

var ovalue=$(this).val();

if(ovalue!=''){

if(!$("#checkerDiv").data(cId+"_Other")){

$("#checkerDiv").data(cId+"_Other",{});

}

var dd=$("#checkerDiv").data(cId+"_Other");

var oooo=$.parseJSON('{"'+oname+'":"'+ovalue+'"}');

$("#checkerDiv").data(cId+"_Other",$.extend(dd,oooo));

}

});

$(".checkRemark").each(function(){

var cId=$(this).attr("title");

$("#checkerDiv").data(cId+"_CheckRemark",$(this).val());

});

var sendData=JSON.stringify($("#checkerDiv").data());

$('#inlineForm').ajaxSubmit({

type:"post",dataType:"json",

url:url,

data:{'itemResult':sendData},

beforeSubmit:beforeSubmit,

success:function(data){

Notifier.msg(data);

$(edit_window).dialog('destroy');

$("#CheckRecord_datagrid").datagrid("reload");

}

});

}

//save check

$("#saveCheck").click(function(){

var url="${base}/business/checkplan/save.do"

submitForms(url);

});

//push check

$("#pushCheck").click(function(){

var url="${base}/business/checkplan/push.do"

submitForms(url);

});

//over check

$("#overCheck").click(function(){

var url="${base}/business/checkplan/over.do"

submitForms(url);

});

</script>

.ccc{

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

.bbb{

color: red;

}

a,a:HOVER{

text-decoration: none;

}

.datagrid-btable .icon-ok{

background: #D2E9C3;

}

.datagrid-btable .icon-remove{

background: #E9C3C3;

}

.datagrid-btable .icon-minus{

background: #D9D9FF;

}

.checkContent{

padding:0px 15px;

}

.checkContent .form-group{

width:200px;

margin: 3px 2px;

}

#yiju li:hover{

background: #ddd;cursor: pointer;

}

.checkImageList li{

float:left;position:relative;overflow:hidden;padding: 0px;

}

.checkImageList li .dask{width:64px;height:64px;padding:0px;background:#000;opacity:0.5;position:absolute;top:-100px;left:2px;z-index: 1000;

color: #FFF;

text-align: center;

padding-top: 10px;

line-height: 25px;

}

.checkImageList li .dask a{

color: #FFF;

text-decoration: none;

}

.checkfile{

width:64px;

height: 64px;

margin: 2px;

}

</style>

</head>

<body>

<x:hidden name="id" value="${checkRecord.id}"/>

 ${checkRecord.checkedOrgan.organName}<x:hidden name="checkedOrgan.id" value="${checkRecord.checkedOrgan.id}"/>

</div>

 ${checkRecord.checkTable.name}<x:hidden name="checkTable.id" value="${checkRecord.checkTable.id}"/>

</div>

<c:forEach items="${employees}" var="e">

</c:forEach>

</select>

<label>计划检查日期</label>

<x:datePicker name="planDate" afterNow="true" cssClass="form-control required" value="${checkRecord.planDate}"></x:datePicker>

<x:button id="saveCheck" value="保存" leftIcon="icon-save bigger-110" cssClass="btn btn-purple btn-sm"></x:button>

<x:button id="pushCheck" value="发布" leftIcon="icon-share bigger-110" cssClass="btn btn-primary btn-sm"></x:button>

<x:button id="overCheck" value="完成检查" leftIcon="icon-ok bigger-110" cssClass="btn btn-success btn-sm"></x:button>

</div>

</div>

</div>

<div class="panel-heading">其他检查结果</div>

</ul>

</div>

</ul>

</div>

</div>

</div>

</form>

</div>

</body>

</html>

转载于:https://my.oschina.net/u/2471041/blog/532618

chengshun5940

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端页面实例1，多datagrid，panel，添加检查计划，下发到PAD端

<%@ page language="java" pageEncoding="UTF-8" %><%@taglib uri="http://www.springframework.org/tags" prefix="spring" %><%@ taglib uri...
复制链接

扫一扫