datagrid带查询带分页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!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:(当前页的数据)

posted @   小小高  阅读(2054)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示