datagrid带查询带分页

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>