datagrid表格封装、layui弹窗封装

古城微笑少年丶 2022-03-22 08:56 480阅读 0赞

1、datagrid表格封装与使用，（需要分页的用不封装的）

使用：

$("#toptable21_").empty();
    			var watergriddata=[];
    			watergriddata.push(waterlinedata.maxMinWater);
    			var watercolumns = [
    					{field:'name',title:'监测名称',width:150,align:'center',
    						formatter:function(value,row,index){
    							return "总水表"
    						}},
    					{field:'thisMaxWater',title:"最大用水量(m³)",width:100,align:'center'},                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
    					{field:'thisMaxTime',title:"最大用水量时间",width:100,align:'center'},
    					{field:'thisMinWater',title:"最小用水量(m³)",width:100,align:'center'},
    					{field:'thisMinTime',title:"最小用水量时间",width:100,align:'center'}
    					]
    			datagrids({
    				id:"#toptable21_",
    				data:watergriddata,
    				parentht:$("#toptable21").height()+"px",
    				newcolumns:[watercolumns]
    			});

datagrid表格不封装：

$("#table_").datagrid({
    		url:path+"/queryBiaoMeiConvert",
    	    columns:[[
    	    	{field : "id",align : "center",align : "center",title : "id",checkbox:true},
    		    {field : "energy_type",align : "center",width:10,title : "能源类型",
    				formatter:function(value,rowData,index){
    	    			for(var i=0;i<nengtype.length;i++){
    	    				if(value == nengtype[i].value){
    	    					return nengtype[i].text;
    	    				}
    	    			}
        		} 
    			},
    			{field : "coal_coefficient",align:"center",width:10,title : "标煤系数"},
    			{field : "correction",align : "center",width:10,title : "修正值"},
    			
    		]],
    	    fitColumns:true,
    	    autoRowHeight:false,
    	    striped:true,
    	    singleSelect:true,//是否只能选一行
    	    pagination:true,//是否需要分页
    	    pageSize:100,//每页最大数
    	    pageList:[100,200,500,1000],//数据量选择
    	    checkOnSelect:false,
    	    selectOnCheck:false,
    	    queryParams:elem,//请求参数，结合url使用，与data无效
    	    rownumbers:true,
    	    scrollbarSize:12,//竖直滚动条宽度统一为12，水平高度为12
    	    onLoadSuccess:function(data){//数据加载成功时触发
    	    	scroll({id:".datagrid-view2 .datagrid-body"});
    	    	resizeScroll({id:".datagrid-view2 .datagrid-body"});
    	    	btn_()
    	    }
    	});

表格的html

二、layui弹窗框封装

使用：

layerr({
    			title:"编辑",
    			content:$('#addwindow_').html(),
    			area:["500px","300px"],
    			success:function(){
    				for(var i=0;i<department_id.length;i++){
                        var option=$("<option value='"+department_id[i].id+"'>"+department_id[i].text+"</option>");
                        $("#department_id",parent.document).append(option);
                        top.layui.form.render("select");
                    }
    				for(var i=0;i<nengtype.length;i++){
                        var option=$("<option value='"+nengtype[i].value+"'>"+nengtype[i].text+"</option>");
                        $("#energy_type",parent.document).append(option);
                        top.layui.form.render("select");
                    }
    				$("#energy_type",parent.document).val(selet.energy_type);
    				$("input[name='coal_coefficient']",parent.document).val(selet.coal_coefficient);
    				$("input[name='correction']",parent.document).val(selet.correction);
    				$("#submit",parent.document).off("click").on("click",function(e){
    					e.preventDefault()
    					var elem=$("#addwindow",parent.document).serializeObject();
    					elem["id"] = selet.id;
    					ajax({
    						url:path+"/editBiaoMeiConvert",
                    		data:elem,
                    		layer:layer,
                    		func:function(data){
                    			msg({
                    				layer:layer,
                    				title:data.msg
                    			});
                    			if(data.success){
                    				$("#table_").datagrid("loadData",data.grid);//重新加载数据但留在当前页
                    			}
                    		}
    					})
    					top.layer.closeAll();//关闭弹窗
                    	return false;
    				})
    				$('#cancel',parent.document).off("click").on("click",function(){
    					$("#reset",parent.document).click();
                		src_="";
                		top.layer.closeAll();//关闭弹窗
    				})
    			}
    		})

layui弹窗不封装：

$(this).off("click").on("click",i,function(){
    			top.layer.open({
    				type: 1,
    				content: $('#window_').html(),
    				title:data[i].nodeName,
    				shade:0.6,
    				area:[$(window).width()*0.7+"px",$(window).height()*0.8+"px"],
    				resizing:function(){
    					if(myChart){
    						myChart.resize();
    					}
    				},
    				cancel:function(){
    					if(myChart){
    						myChart.dispose();
    					}
    					window.clearInterval(timer2);
    					flag2=false;
    				},
    				success:function(layero, index){
    					datilsline(layero,data,i)
    					if(!flag2){
    						window.clearInterval(timer2); 
    						timer2=setInterval(function(){
    							if($("#tabsUl .layui-this",parent.document).text() === "动力系统监测ဆ"){
    								datilsline(layero,data,i);
    								flag2=true;
    							}
    						},refresh_interval*1000);
    					}
    				}
    			})
    		})