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"> ...
随机推荐
- C++ new的nothrow关键字和new_handler用法
C++ new的nothrow关键字和new_handler用法 new && new(std::nothrow) new(std::nothrow) 顾名思义,即不抛出异常,当new ...
- JMeter 十二：命令行执行
参考文档:http://jmeter.apache.org/usermanual/get-started.html#non_gui 真正开始跑压力测试时,我们就不能使用GUI模式了.这时候需要采用命令 ...
- angular中使用promise
promise是一种用异步的方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或者抛出的异常,在与远程对象打交道时我们可以把他看作是远程对象的一个代理. 如果说是promise也是 ...
- kvm 虚拟化 SMP（对称多处理器）介绍及配置
一.SMP(对称多处理器)介绍 1)SMP简介 在计算机技术很普及和日益发达的今天,以 Intel.IBM 为代表的一些大公司推动着中央处理器(CPU)技术的飞速发展和更新换代.在如今计算机系统中,多 ...
- Odoo(OpenERP)开发实践：通过XML-RPC接口访问Odoo数据库
Odoo(OpenERP)服务器支持通过XML-RPC接口访问.操作数据库,基于此可实现与其他系统的交互与集成. 本文是使用Java通过XMLRPC接口操作Odoo数据库的简单示例.本例引用的jar包 ...
- Visual studio之C#的一些常见问题
背景 要写一个APP,APP通过串口控制下位机,在此记录C#的一些常用控件的使用办法. 正文 单击button控件,执行对应操作. 选择要操作的button控件,在属性栏内点击类似闪电标志一样的事件, ...
- 通过设置标签class值控制标签的显示与隐藏
需求背景如下: 原项目居民.单位.计量三模块共用一个jsp文件,显示的页面也顺理成章的统一了,幸亏没有调用同一个js,在此基础上要求居民和单位计量的分离,即居民的显示居民的相关信息,单位和计量的显示相 ...
- 学习-短信的上行(MO)和下行(MT)详解
基础知识: SP服务提供商: 通常是指在移动网内运营增值业务的社会合作单位, 它们建立与移动网络建立相连的服务平台, 为手机用户提供一系列信息服务, 如:娱乐.游戏.短信.彩信.WAP.彩铃.铃声下载 ...
- PHP拿到别人项目如何修改为自己
以下为借助google翻译的,个人润色了一下,官方版里面感觉有很多问题,我这里有我个人修改大部分问题的版本,包括翻译完善,有需要的可以联系我:qyj8411@163.com 1. 在您网站的根目录创建 ...
- centos7 crontab 定时执行python任务不执行的原因及解决办法
1.问题描述 在用crontab设置定时任务时,发现py脚本在crontab中报错,显示import某些包找不到,但是手动直接运行py脚本,完全正常. 01 05 * * * ./get_topi ...