layui本页面弹框、表格写法

var src_,departmentDate=[],groupDate=[],terminalStateDate=[],devTypeDate=[],form,laydate,layer,upload,judge=true;
$(function(){
	layui.use(["element","form","laydate","layer","upload"],function(){//用了layui表单,必须引用表单插件form,时间选择器同理
		element=layui.element,form = layui.form,laydate=layui.laydate,layer=layui.layer,upload=layui.upload;
		//右边内容容器添加
		ajax({
			url:path+"/energyMonitor/Equipment/getInfo",
			func:function(data){
				departmentDate=data.department;
				groupDate=data.Group;
				devTypeDate=data.dev_type;  
				terminalStateDate=data.TerminalState;
			}
		})
		form.render();
		//右边内容容器添加
		getData();
	});
});
function getData(){
	var form_=form,laydate_=laydate,layer_=layer,upload_=upload;
	var elem={
		"equipmentName":$("#sbmc").val()
	};
	fillTable(form_,laydate_,layer_,upload_,elem);
}
function fillTable(form,laydate,layer,upload,data){
	$("#table1").datagrid({
		url:path+"/energyMonitor/getAllEquipment",
	    columns:[[ 
			{field : "id",align : "center",align : "center",title : "id",checkbox:true},
		    {field : "terminal_ormeterid",align : "center",width:10,title : "资产编码"},
			{field : "equipment_name",align:"center",width:20,title : "资产名称"}, 
			{field : "terminal_no",align : "center",title : "资产标识"},
			{field:"department_id",align : "center",title:"所属部门",width:10,
	    		formatter:function(value,rowData,index){
	    			for(var i=0;i<departmentDate.length;i++){
	    				if(value == departmentDate[i].id){
	    					return departmentDate[i].text;
	    				}
	    			}
	    		} 
	    	},
	    	{field:"group_id",title:"所属组",align : "center",width:10,
	    		formatter:function(value,rowData,index){
	    			for(var i=0;i<groupDate.length;i++){
	    				if(value == groupDate[i].field_id){
	    					return groupDate[i].field_name;
	    				}
	    			}
	    		}	
	    	},
	    	{hidden:true,field:"mp_id",title:"计量点",width:10,},
	    	{field:"terminal_state",align : "center",title:"资产状态",width:10,
	    		formatter:function(value,rowData,index){
	    			for(var i=0;i<terminalStateDate.length;i++){
	    				if(value == terminalStateDate[i].id){
	    					return terminalStateDate[i].text;
	    				}
	    			}
	    		}	
	    	},
	    	{field:"dev_type",align : "center",title:"资产类型",width:10,
	    		formatter:function(value,rowData,index){
	    			for(var i=0;i<devTypeDate.length;i++){
	    				if(value == devTypeDate[i].id){
	    					return devTypeDate[i].text;
	    				}
	    			}
	    		}
	    	},
			{field : "operation_date",align : "center",width:20,title : "投运日期"}, 
			{field : "fade_date",align : "center",width:20,title : "报停日期"}, 
			{field : "create_time",align : "center",width:20,title : "归档时间"}, 
			{field : "working_hours",align : "center",title : "预计使用时长"},
			{field : "asset_no",align : "center",width:20,title : "资产编号"},
			{field : "specif_type",align : "center",width:10,title : "型号规格"}, 
			{field : "ter_manufacturer",switchable : false,width:10,title : "生产厂商"},
			{field : "product_date",align : "center",title : "生产时间"}, 
			{field : "purch_price",align : "center",title : "购买价",widht:10}, 
			{field : "acc_terminal",align : "center",title : "附属资产",width:10}, 
			{field : "ter_addr",align : "center",title : "安装地址",width:10},
			{field : "install_time",align : "center",title : "安装时间"},
			{hidden:true,field : "power_level",align : "center",title : "权重",width:10}, 
			{hidden:true,field : "warn_level_big",align : "center",width:10,title : "预警等级(强)"}, 
			{hidden:true,field : "warn_level_medium",align : "center",title : "预警等级(中)",width:10}, 
			{hidden:true,field : "warn_level_small",align : "center",width:10,title : "预警等级(弱)"}, 
		]],
	    fitColumns:true,
	    autoRowHeight:false,
	    striped:true,
	    singleSelect:true,//是否只能选一行
	    pagination:true,//是否需要分页
	    pageSize:20,//每页最大数
	    pageList:[20,50,100,200],//数据量选择
	    checkOnSelect:false,
	    selectOnCheck:false,
	    queryParams:data,//请求参数,结合url使用,与data无效
	    rownumbers:true,
	    scrollbarSize:12,//竖直滚动条宽度统一为12,水平高度为12
	    onLoadSuccess:function(data){//数据加载成功时触发
	    	scroll({id:".datagrid-view2 .datagrid-body"});
	    	resizeScroll({id:".datagrid-view2 .datagrid-body"});
	    	btn_(form,laydate,layer,upload,data)
	    }
	});
}

function btn_(form,laydate,layer,upload,elem){
	var day2 = new Date(),min;
    day2.setTime(day2.getTime());
    var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
    $("#add").unbind("click");
	$("#add").on("click",function(){
		layerr({
			title:"新增资产信息",
            content:$('#addwindow'),
            area:["700px","690px"],
            /*btn:["保存","取消"],*/
            offset:($(window).height()*1-690)*0.5-$("#topLuck",parent.document).height()/2+$("#bottomLuck",parent.document).height()/2+"px",//50是等于顶部菜单栏的高度/2
            success:function(){
            	$("#terminal_ormeterid").removeAttr("disabled");
            	$("#terminal_ormeterid").css("background","#fff");
            	var start=laydate.render({
            		elem:"#operation_date",
            		max:s2,
            		done:function(value,dates,endDate){
            			end.config.min={
        					year:dates.year,
        		            month:dates.month-1,
        		            date:dates.date
            			}
            		}
            	});
            	var end=laydate.render({
            		elem:"#fade_date",
            		max:s2,
            		done:function(value,dates,endDate){
            			start.config.max={
        					year:dates.year,
        		            month:dates.month-1,
        		            date:dates.date
            			}
            		}
            	});
            	laydate.render({elem:"#product_date",max:s2});
            	laydate.render({elem:"#install_time",max:s2});
            	$("#terminal_state").empty();
            	for(var i=0;i<terminalStateDate.length;i++){
                    var option=$("<option value='"+terminalStateDate[i].id+"'>"+terminalStateDate[i].text+"</option>");
                    $("#terminal_state").append(option);
                    form.render("select");
                }
            	$("#dev_type").empty();
            	for(var i=0;i<devTypeDate.length;i++){
                    var option=$("<option value='"+devTypeDate[i].id+"'>"+devTypeDate[i].text+"</option>");
                    $("#dev_type").append(option);
                    form.render("select");
                }
            	$("#group_id").empty();
            	for(var i=0;i<groupDate.length;i++){
                    var option=$("<option value='"+groupDate[i].field_id+"'>"+groupDate[i].field_name+"</option>");
                    $("#group_id").append(option);
                    form.render("select");
                }
            	/*for(var i=0;i<terminalStateDate.length;i++){
                    var option=$("<option value='"+terminalStateDate[i].id+"'>"+terminalStateDate[i].text+"</option>");
                    $("#mp_id").append(option);
                    form.render("select");
                }*/
            	$("#department_id").empty();
            	for(var i=0;i<departmentDate.length;i++){
                    var option=$("<option value='"+departmentDate[i].id+"'>"+departmentDate[i].text+"</option>");
                    $("#department_id").append(option);
                    form.render("select");
                }
            	if(judge){
            		judge=false;
            	}else{
            		uploadoption.config.auto=false;
                	upload.render(uploadoption);
            	}
            	var uploadoption=upload.render({//图片选择
            	    elem: '#file',
            	    auto:false,
            	    choose: function(obj){//预读本地文件示例,不支持ie8
            	    	obj.preview(function(index, file, result){
            	    		$('#uploadimg').attr('src', result); //图片链接(base64)
            	    		src_=result;
            	    	});
            	    }
            	});
            	$("#submit").unbind("click");
				$("#submit").on("click",function(){
                	var elem=$("#addwindow").serializeObject();
                	elem["url"]=src_;
                	if(elem.terminal_ormeterid == "" || elem.equipment_name == "" || elem.working_hours == ""){
                		return;
                	}
                	ajax({
                		url:path+"/energyMonitor/Equipment/save",
                		data:elem,
                		func:function(data){
                			msg({
                				layer:layer,
                				title:data.msg
                			});
                			if(data.success){
                				$("#table1").datagrid("reload");//重新加载数据但留在当前页
                			}
                		}
                	})
                	$('#uploadimg').removeAttr('src');
                    layer.closeAll();//关闭弹窗
                	$("#topLuck",parent.document).hide();
                	$("#bottomLuck",parent.document).hide();
                	return false;
                });
				$('#cancel').unbind();
            	$('#cancel').click(function(){//取消
            		$('#uploadimg').removeAttr('src'); 
            		$("#reset").click();
            		$("#topLuck",parent.document).hide();
            		$("#bottomLuck",parent.document).hide();
            		layer.closeAll();//关闭弹窗
            	});
            }
		})
	});
	$("#edit").unbind("click");
	$("#edit").on("click",function(){
		if(!$("#table1").datagrid("getSelected")){
			msg({
				layer:layer,
				title:"请选择要编辑的信息"
			});
			return;
		}else{
			var tbSelect=$("#table1").datagrid("getSelected");
			layerr({
				title:"编辑资产信息",
				content:$('#addwindow'),
                area:["700px","690px"],
//                btn:["保存","取消"],
                offset:($(window).height()*1-690)*0.5-$("#topLuck",parent.document).height()/2+$("#bottomLuck",parent.document).height()/2+"px",
                success:function(){
                	$("#terminal_ormeterid").attr("disabled","");
                	$("#terminal_ormeterid").css("background","#ccc");
                	$("#terminal_state").empty();
                	for(var i=0;i<terminalStateDate.length;i++){
                        var option=$("<option value='"+terminalStateDate[i].id+"'>"+terminalStateDate[i].text+"</option>");
                        $("#terminal_state").append(option);
                        form.render("select");
                    }
                	$("#dev_type").empty();
                	for(var i=0;i<devTypeDate.length;i++){
                        var option=$("<option value='"+devTypeDate[i].id+"'>"+devTypeDate[i].text+"</option>");
                        $("#dev_type").append(option);
                        form.render("select");
                    }
                	$("#group_id").empty();
                	for(var i=0;i<groupDate.length;i++){
                        var option=$("<option value='"+groupDate[i].field_id+"'>"+groupDate[i].field_name+"</option>");
                        $("#group_id").append(option);
                        form.render("select");
                    }
                	/*for(var i=0;i<terminalStateDate.length;i++){
                        var option=$("<option value='"+terminalStateDate[i].id+"'>"+terminalStateDate[i].text+"</option>");
                        $("#mp_id").append(option);
                        form.render("select");
                    }*/
                	$("#department_id").empty();
                	for(var i=0;i<departmentDate.length;i++){
                        var option=$("<option value='"+departmentDate[i].id+"'>"+departmentDate[i].text+"</option>");
                        $("#department_id").append(option);
                        form.render("select");
                    }
                	var start=laydate.render({
                		elem:"#operation_date",
                		max:s2,
                		done:function(value,dates,endDate){
                			end.config.min={
            					year:dates.year,
            		            month:dates.month-1,
            		            date:dates.date
                			}
                		}
                	});
                	var end=laydate.render({
                		elem:"#fade_date",
                		max:s2,
                		done:function(value,dates,endDate){
                			start.config.max={
            					year:dates.year,
            		            month:dates.month-1,
            		            date:dates.date
                			}
                		}
                	});
                	laydate.render({elem:"#product_date",max:s2});
                	laydate.render({elem:"#install_time",max:s2});
                	$("input[name='terminal_ormeterid']").val(tbSelect.terminal_ormeterid);
    				$("#equipment_name").val(tbSelect.equipment_name);
    				$("#terminal_state").val(tbSelect.terminal_state);
    				$("#dev_type").val(tbSelect.dev_type);
    				$("input[name='operation_date']").val(tbSelect.operation_date);
    				$("input[name='fade_date']").val(tbSelect.fade_date);
    				$("input[name='asset_no']").val(tbSelect.asset_no);
    				$("input[name='specif_type']").val(tbSelect.specif_type);
    				$("#group_id").val(tbSelect.group_id);
    				$("#mp_id").val(tbSelect.mp_id);
    				$("input[name='terminal_no']").val(tbSelect.terminal_no);
    				$("#department_id").val(tbSelect.department_id);
    				$("#working_hours").val(tbSelect.working_hours);
    				$("input[name='product_date']").val(tbSelect.product_date);
    				$("#purch_price").val(tbSelect.purch_price);
    				$("input[name='acc_terminal']").val(tbSelect.acc_terminal);
    				$("input[name='install_time']").val(tbSelect.install_time);
    				$("input[name='ter_addr']").val(tbSelect.ter_addr);
    				$("input[name='ter_manufacturer']").val(tbSelect.ter_manufacturer);
    				$('#uploadimg').attr('src',tbSelect.url); //图片链接(base64)
    				$("#submit").unbind("click");
    				$("#submit").on("click",function(){//保存
                    	var edit1=$("#addwindow").serializeObject();
                    	edit1["id"]=tbSelect.id;
                    	edit1["url"]=tbSelect.url;
                    	if(edit1.terminal_ormeterid == "" && edit1.equipment_name == "" && edit1.working_hours == ""){
                    		return;
                    	}
                    	ajax({
                    		url:path+"/energyMonitor/Equipment/edit",
                    		data:edit1,
                    		func:function(data){
                    			msg({
                    				layer:layer,
                    				title:data.msg
                    			});
                    			if(data.success){
                    				$("#table1").datagrid("reload");//重新加载数据但留在当前页
                    			}
                    		}
                    	})
                        layer.closeAll();//关闭弹窗
                    	$("#topLuck",parent.document).hide();
                    	$("#bottomLuck",parent.document).hide();
                    	$('#uploadimg').removeAttr('src'); 
                    	return false;
                    });
    				$('#cancel').unbind();
    				$('#cancel').click(function(){//取消
                		$("#reset").click();
                		$("#topLuck",parent.document).hide();
                		$("#bottomLuck",parent.document).hide();
                		$('#uploadimg').removeAttr('src'); 
                		layer.closeAll();//关闭弹窗
                	});
                }
			})
		}
	});
	$("#remove").unbind("click");
	$("#remove").on("click",function(){
		if($("#table1").datagrid("getChecked").length==0){
			msg({
				layer:layer,
				title:"请选择要删除的信息"
			});
			return;
		}else{
			var remove1={"ids[]":[]}
			var len=$("#table1").datagrid("getChecked").length;
			for(var i=0;i<len;i++){
				remove1["ids[]"].push($("#table1").datagrid("getChecked")[i].id);
			}
			$("#snum").text(len);
			layerr({
				title:"删除",
                content:$("#removewindow"),
                area:["370px","200px"],
                offset:($(window).height()*1-200)*0.5-$("#topLuck",parent.document).height()/2+$("#bottomLuck",parent.document).height()/2+"px",
                success:function(){
                	$("#submit1").unbind();
    				$("#submit1").on("click",function(){//保存
    					ajax({
                    		url:path+"/energyMonitor/Equipment/delete",
                    		data:remove1,
                    		func:function(data){
                    			msg({
                    				layer:layer,
                    				title:data.msg
                    			});
                    			if(data.success){
                    				$("#table1").datagrid("reload",data.grid);//重新加载数据但留在当前页
                    			}
                    		}
                    	})
                        layer.closeAll();//关闭弹窗
                    	$("#topLuck",parent.document).hide();
                    	$("#bottomLuck",parent.document).hide();
                    	return false;
                    });
    				$('#cancel1').unbind();
                	$('#cancel1').click(function(){//取消
                		$("#topLuck",parent.document).hide();
                		$("#bottomLuck",parent.document).hide();
                		layer.closeAll();//关闭弹窗
                	});
                }
			})
		}
	});
}
function layerr(obj){//弹出框
    layer.open({
        type:1,
        title:obj.title,
        content:obj.content,
        area:obj.area,
        shade:0.6,
        yes:obj.yes,
        offset:obj.offset,
        success:function(){
        	$("#reset").click();
        	obj.success();
        	$("#topLuck",parent.document).show();
        	$("#bottomLuck",parent.document).show();
        },
        cancel:function(){
			$("#topLuck",parent.document).hide();//遮罩层要的
			$("#bottomLuck",parent.document).hide();//遮罩层要的
			$('#uploadimg').removeAttr('src'); 
			$("#reset").click();
		},
    })
}

猜你喜欢

转载自blog.csdn.net/qq_36784628/article/details/81977725