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