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:(当前页的数据)
｝
datagrid带查询带分页的更多相关文章
- MVC3 带查询的分页Helper
接上篇mvc3 分页Helper. 带查询的分页Helper是在上一篇分页的基础上来的.下面看代码: 首先,在System.Web.Mvc命名空间下的自定义类HtmlPage下面添加一个用于处理“查询 ...
- 关于ExtJs4的Grid带 查询 参数 分页（baseParams-->extraParams）
(园里很多文章,美名其曰 :ExtJs GridPanel+查询条件+分页. 但是加查询条件后点击下一页,查询条件失效,求你们自己测试明白再显摆 不要误导我这种新人.) ExtJs6发布了,ExtJ ...
- Java高级架构师（一）第15节：带查询的分页、修改和删除页面
@RequestMapping(value="toList",method=RequestMethod.GET) public String toList(@ModelAttrib ...
- mysq带条件的分页查询数据结果错误
记一次mysql分页条件查询的结果出错: 以一张用户表为例,首先我们看表中的所有数据,注意红色框住的部分: 我们使用不带条件的分页查询来查询,数据显示是OK的: SELECT id,login_nam ...
- hibernate中带查询条件的分页
所谓分页,从数据库中分,则是封装一个分页类.利用分页对象进行分页. 但,分页往往带查询条件. 分页类的三个重要数据:[当前页码数],[数据库中的总记录数],[每页显示的数据的条数] 原理:select ...
- laravel 带条件的分页查询
laravel 带条件的分页查询, 原文:http://blog.csdn.net/u011020900/article/details/52369094 bug:断点查询,点击分页,查询条件消失. ...
- springboot中使用mybatisplus自带插件实现分页
springboot中使用mybatisplus自带插件实现分页 1.导入mybatisplus分页依赖 <dependency> <groupId>com.baomidou& ...
- sqlite数据库 select 查询带换行符数据
在sqlite 数据库中用 select 语句查询带 换行符的 数据信息 实现 SELECT * from questions_exec where title like '%'||x'0 ...
- C# 带偏移量自定义分页方法
/// <summary> /// 带偏移量自定义分页方法 /// </summary> /// <param name="PageSize"> ...
随机推荐
- Python监控进程性能数据并画图保存为PDF文档
引言 利用psutil模块(https://pypi.python.org/pypi/psutil/),可以很方便的监控系统的CPU.内存.磁盘IO.网络带宽等性能參数,下面是否代码为监控某个特定程序 ...
- HDU 5296 Annoying problem
Annoying problem Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- Intellij IDEA 10.5 语言设置
适应于:英文操作系统,但是语言和区域设置为中文的环境. Mac: /Applications/IntelliJ IDEA CE.app/Contents/bin/idea.vmoptions 增加 - ...
- C#创建COM组件供VB,PB,Delphi调用
1 COM组件概述 COM是微软公司为了计算机工业的软件生产更加符合人类的行为方式开发的一种新的软件开发技术.在COM构架下,人们可以开发出各种各样的功能专一的组件,然后将它们按照需要组合起来,构成 ...
- jpush推送
1.下载这个压缩包,vendo文件夹,复制里面的vendo到该文件夹下. 解压 2.修改AppKey和MasterSecret就ok 了
- phpexcel表的一些设置
$objPHPExcel = new PHPExcel(); $objPHPExcel->setActiveSheetIndex(0); //set default styles$objPHPE ...
- golang中使用mongodb的操作类以及如何封装
mgo简介 mongodb官方没有关于go的mongodb的驱动,因此只能使用第三方驱动,mgo就是使用最多的一种. mgo(音mango)是MongoDB的Go语言驱动,它用基于Go语法的简单API ...
- 转：微软分布式云计算框架Orleans
http://www.cnblogs.com/ants/p/5122068.html 一种构建分布式. 高规模(伸缩)的应用程序 微软对奥尔良计划(Project Orleans)云计算框架开源.奥尔 ...
- Phone
User-Agent Switcher for Chrome EditThisCookie cornerstone SVN
- PHP特性整合(PHP5.X到PHP7.1.x)
Buid-in web server内置了一个简单的Web服务器 把当前目录作为Root Document只需要这条命令即可: php -S localhost:3300 也可以指定其它路径 php ...