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"> ...
随机推荐
- Mac下访问windows的共享文件夹
Finder->前往->smb://<user>@<ip>
- jQuery EasyUI API 中文文档 - 表单（form补充）
继承(表单验证) 第一个参数如果是true那么就算key相同也会接着追加,相反怎会覆盖 $.extend([bool],obj,obj1); var obj = {name:"zhangsa ...
- vue - check-versions.js for child_process
webpack之类的配置文件. webpack.base.conf.js
- ZK框架笔记2、ZK框架安装、相关类库、web及zk配置
1.先去ZK官网注册一个账号 2.在MyEclipse菜单栏中Help----Eclipse Marketplace中搜索ZK Studio,点击install安装即可 3.相关类库 ...
- Visual studio之C# 串口通讯SerialPort
背景 App需要串口进行通讯,在此做个记录和简要说明. 正文 添加命名空间 using System.IO.Ports; 实例化串口 SerialPort serialPortO = new Seri ...
- Android--从零开始开发一款文章阅读APP
代码地址如下:http://www.demodashi.com/demo/11212.html 前言 本案例已经开源!如果你想免费下载,可以访问我的Github,所有案例均在上面,只求给个star.当 ...
- 自定义asp.net mvc Filter 过滤器
1新建一个mvc项目:如图 2.主要创建下面一些类文件 1.utility目录 放置自定义的过滤器 using System; using System.Collections.Generic; us ...
- 一个官翻教程集合：ASP.NET Core 和 EF Core 系列教程
通过一个大学课程案例讲解了复杂实体的创建过程及讲解 1.ASP.NET Core 和 Entity Framework Core 系列教程——入门 (1 / 10) 2.ASP.NET Core 和 ...
- Android数据格式解析对象JSON用法
1.JSON概念: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性,从而可以在不同平台间进行数据交换.JSON采用兼容性很高的文本格式,同时也具备类似于C语言体系的行为. JSON可以将 ...
- Hive 数据倾斜原因及解决方法（转）
在做Shuffle阶段的优化过程中,遇到了数据倾斜的问题,造成了对一些情况下优化效果不明显.主要是因为在Job完成后的所得到的Counters是整个Job的总和,优化是基于这些Counters得出的平 ...