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"> ...
随机推荐
- vb.net小试三层架构
在对三层架构有了初步了解后,用vb.net做了一个小的程序,真的很小,仅仅是为了体现一下三层之间机制.下面是我设计的操作界面: 还有程序集和类的分布情况, 接下来是数据的设计,数据库用到的是SQL S ...
- COSMOSBOX手遊制作手册（Word备份）
20140712版 版本号 Version 日期 Date 作者 Author 变更主要原因描述 Brief Description 1.0 2014-4-26 陈霈霖 初稿 2.0 1. 前言 本手 ...
- unity3d格式的导出与加载
http://blog.csdn.net/nateyang/article/details/7567831 1.导出.unity3d格式资源: http://game.ceeger.com/Scrip ...
- 如何取得jvm实例的cpu占用（转）
时间 2014-08-29 17:11:34 田加国的博客 原文 http://www.tianjiaguo.com/programming-language/java-language/如何取得j ...
- 解析Linux特殊文件【转】
您有Dos和Windows经验,就大概知道系统存在若干类型的文件,如系统文件.只读文件.隐含文件等.在Linux下用ls –l 命令来判断文件类型,可以依据第一列中的10个字符来判断.-rw-r—r— ...
- iOS开发一个制作Live Photo的工具
代码地址如下:http://www.demodashi.com/demo/13339.html 1.livePhoto简介 livePhoto是iOS 9.0 之后系统相机提供的拍摄动态照片的功能,但 ...
- Swashbuckle一个webapi调试利器
开发weibapi通常会使用postman或者其他模拟http请求的工具去模拟请求.但是这些工具需要自己保存请求地址的url以及参数 每次我都是先查询wiki看参数. 看见同事再用Swashbuckl ...
- Android 自己定义ViewGroup手把手教你实现ArcMenu
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37567907 逛eoe发现这种UI效果,感觉非常不错,后来知道github上有这 ...
- struts和spring整合
开发流程: 1)引jar包,可以在配置工程中设置用户libarary,然后直接引入.如果在web-inf/lib没有用户导入的lib文件,可以参考问题0的解决方案 需要的是struts_core,sp ...
- 点滴积累【JS】---JS小功能(checkbox实现全选和全取消)
效果: 代码: <head runat="server"> <title></title> <script type="text ...