datagrid带查询带分页
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>历史数据</title>
<script type="text/javascript" src="../Scripts/easyui/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../Scripts/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="../Scripts/method.js"></script>
<link href="../Scripts/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="../Scripts/easyui/themes/icon.css" rel="stylesheet" />
<link href="../Scripts/easyui/demo/demo.css" rel="stylesheet" />
<style type="text/css">
#btn_excelExcel {
margin-left: 10px;
}
#status_type {
width: 80px;
}
</style>
</head>
<body class="easyui-layout">
<div data-options="region:'center',fit:true,border:false" style="height: 100%">
<table id="dg" class="easyui-datagrid" data-options="rownumbers:true,border:true,singleSelect:true,method:'get',fit:true,fitColumns:true,toolbar:'#tb'">
</table>
</div>
<div id="tb" style="padding: 5px; height: auto">
<div>
监测站:
<input id="monitoring_points_combox" class="easyui-combobox" name="language" data-options="
valueField:'monitoring_point_mn',
textField:'monitoring_point_name'" />
<span>状态类型：</span>
<select id="status_type" class="easyui-combobox" name="dept" title="状态类型">
<option value="2">未审核</option>
<option value="1">已审核</option>
</select>
开始时间：
<input id="startTime" class="easyui-datebox" style="width: 100px" />
结束时间:
<input id="endTime" class="easyui-datebox" style="width: 100px" />
<a href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="sreach_btn_click();">查询</a>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//加载站点信息
function initDomData() {
$.get("/OnlineMonitoring/ashx/SynthesizeMonitor.ashx", function (msg) {
$('#monitoring_points_combox').combobox('loadData', msg);
if (msg.length > 0) {
$("#monitoring_points_combox").combobox('select', msg[0].monitoring_point_mn);
$('#endTime').datebox('setValue', formatterDate(new Date()));
$('#startTime').datebox('setValue', formatterDate(new Date()));
sreach_btn_click();
}
})
}
//数据绑定
function getData(mn, start, end, all) {
var par = {
start: start,
end: end,
mn: mn,
all: all
}
$('#dg').datagrid({
url: "/OnlineMonitoring/ashx/realtime_check.ashx?" + $.param(par),
fitColumns: true,
fit: true,
rowStyler: status,
pagination: true,//分页控件
rownumbers: true,
pageNumber: 1,
pageSize: 50,
pageList: [50],
columns: [[
{ field: 'monitoring_point_name', title: '站点名称', width: 100, align: 'center' },
{ field: '雨量', title: '雨量', align: 'center', width: 100 },
{ field: '水位', title: '水位', width: 100, align: 'center' },
{ field: '电压', title: '电压', align: 'center', width: 100 },
{ field: 'datatime', title: '采集时间', align: 'center', width: 100 },
{ field: 'status', title: '状态', width: 100, align: 'center' },
{ field: '操作', title: '操作', width: 100, align: 'center', formatter: generateButton },
]],
onLoadSuccess: function (data) {
$("button[name='action']").linkbutton({ text: '审核', plain: true, iconCls: 'icon-add' });
}
});
//"雨量": 52.0,
//"水位": 34.0,
//"电压": 11.0,
//"monitoring_mn": "11111111111111",
//"status": "未审核"
}
//行颜色处理
function status(index, row) {
if (row.flag == "1") return "background-color:rgba(44, 255, 44, 1);";
if (row.flag == "2") return "background-color:rgba(252, 2, 25, 1);";
if (row.flag == "3") return "background-color:rgba(245, 255, 50, 1);";
else return "<span><span>";
}
//状态列文字格式化
function colStatus(val) {
if (val == "1") return "<span>预警</span>";
if (val == "2") return "<span>警告</span>";
if (val == "3") return "<span>报警</span>";
else return "<span>无<span>";
}
//值与单位
function jointUnit(val, row) {
return val + row.factor_realtime_unit;
}
//DOM加载完毕处理
$(function () {
initDomData();
});
//时间格式化方法
var formatterDate = function (date) {
var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : "0"
+ (date.getMonth() + 1);
return date.getFullYear() + '-' + month + '-' + day;
};
//查询事件处理
function sreach_btn_click() {
var start = $('#startTime').datebox('getValue') + ' 00:00:00';
var end = $('#endTime').datebox('getValue') + ' 23:59:59';
var mn = $('#monitoring_points_combox').combobox('getValue');
var all = $('#status_type').combobox('getValue');
getData(mn, start, end, all);
}
//双击事件处理(审核)
function checkeventHandle(rowIndex) {
var rowDatas = $("#dg").datagrid("getRows");
if (rowDatas.length > 0) {
var rowData = rowDatas[rowIndex];
if (rowData.status == "未审核") {
var par = {
mn: rowData.monitoring_mn,
datatime: rowData.datatime,
rainfall: rowData.雨量,
water_level: rowData.水位,
voltage: rowData.电压
};
//进行审核
$.get("/OnlineMonitoring/ashx/ChangeCheck.ashx?" + $.param(par), function (msg) {
var top = ($(window).height() - $("#dg").height()) / 2.5;
var left = ($(window).width() - $("#dg").width()) / 2.5;
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
if (msg.result == true) {
$.messager.show({
title: '恭喜',
msg: '操作成功',
showType: 'show',
style: {
right: '',
top: top + scrollTop,
left:left+scrollLeft,
bottom: ''
},
timeout:500
});
sreach_btn_click();
}
});
} else {
parent.$.messager.alert('操作错误', '此行数据不能被重复审核',"error");
}
} else {
console.error('错误');
}
}
function generateButton(val, rowData, rowIndex) {
return "<button name='action' type='button' onclick='checkeventHandle(" + rowIndex + ")' class='easyui-linkbutton' iconCls='icon-print' >审核</button>";
}
//function
</script>
分页要点：
easyui自动加上参数
page(当前页)
rows(每页显示的行数)
后台返回json格式如
｛
total:(总行数),
rows:(当前页的数据)
｝
