datagrid表格封装、layui弹窗封装

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

function datagrids(obj){
	$(obj.id).datagrid({
		data:obj.data,
		fitColumns:obj.fitColumns==undefined?true:false,
		nowrap:obj.nowrap==undefined?true:false,//数据是否只在一行显示
		scrollbarSize:0,
		height:obj.parentht,
		rownumbers:true,
		singleSelect:true,
		columns:obj.newcolumns,
		pagination:true,//是否需要分页
	    pageSize:20,//每页最大数
	    pageList:[10,20,50,100],//数据量选择
	    autoRowHeight:false,
	    striped:true,
	    checkOnSelect:false,
	    selectOnCheck:false,
	    frozenColumns:obj.frozenColumns==undefined?[[]]:[[obj.frozenColumns]],
	    onLoadSuccess:function(data){
			scroll({id:".datagrid-view2 .datagrid-body"});//滚动条
			resizeScroll({id:".datagrid-view2 .datagrid-body"});
			window.addEventListener("resize",function(){
				$("#table").datagrid("resize",{
					height:$("#table_").height()+"px"
				});
				resizeScroll({id:".datagrid-view2 .datagrid-body"});
			});
		}
	});
}

使用：

$("#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

<div class="boxbot" id="table_">
		<div id="table" style='width:100%;height:100%;'>
								
		</div>
</div>

二、layui弹窗框封装

function layerr(obj){//弹出框
    top.layer.open({
        type:1,
        title:obj.title,
        content:obj.content,
        area:obj.area,
        shade:0.6,
        yes:obj.yes,
        success:function(layero,index){
        	$("#reset",parent.document).click();
        	obj.success(layero,index);
        },
        cancel:function(){
			$("#reset",parent.document).click();
		},
    })
}

使用：

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);
					}
				}
			})
		})