@{
    ViewBag.Title = "区间用水量查询";
    Layout = "~/Views/Shared/_LayoutIndex.cshtml";
}
<script>
    var checkedIds = [];
    $(document).ready(function () {
        initialPage();
        GetGrid();
        GetTree();
        //表格表头居中显示
        $(".ui-th-column").css("text-align", "center");
    });

    function GetTree() {
        var item = {
            height: $(window).height() - 52,
            url: "/NBManage/NBAreas/GetAreaTreeJson",            
            isexpand: true,
            onnodeclick: function (item) {
                //ReloadData();
            }
        };
        //初始化
        $("#itemTree").treeview(item);
    }
    
    function getNodes() {
        checkedIds = [];
        var nodes = $("#itemTree").getTSNs(true);//获取所有勾选节点包括半勾选

        $.each(nodes, function (i, value) {
            var id = value.id;
            console.log(id);
            //如果是测点ID 则加入
            if (id.indexOf("level1_") != -1) {
                checkedIds.push(id.substring(7));
            }
        });
    }
    //重设(表格)宽高
    function initialPage() {
        //layout布局
        $('#layout').layout({
            applyDemoStyles: true,
            onresize: function () {
                $(window).resize();
            }
        });
        //resize重设(表格、树形)宽高
        $(window).resize(function (e) {
            window.setTimeout(function () {
                $('#gridTable').setGridWidth(($('.gridPanel').width()));
                $("#gridTable").setGridHeight($(window).height() - 108.5);
            }, 200);
            e.stopPropagation();
        });
    }
    //加载表格
    function GetGrid() {
        var selectedRowIndex = 0;
        var $gridTable = $('#gridTable');
        $gridTable.jqGrid({
            url: "/NBManage/NBAreaInfo/GetRecordJson",
            datatype: "json",
            height: $(window).height() - 138.8,
            autowidth: true,
            mtype:"post",
            colModel: [
                { label: '主键', name: 'OrganizeId', hidden: true },
                { label: "区域名称", name: "AreaName", width: 300, align: "left", sortable: false },
                { label: "起数(m³)", name: "StartReading", width: 200, align: "right", sortable: false, formatter: 'number', formatoptions: { decimalPlaces: 2, defaulValue: "", thousandsSeparator: "," } },
                { label: "止数(m³)", name: "EndReading", width: 200, align: "right", sortable: false, formatter: 'number', formatoptions: { decimalPlaces: 2, defaulValue: "", thousandsSeparator: "," } },
                { label: "用量(m³)", name: "WaterUsed", width: 200, align: "right", sortable: false, formatter: 'number', formatoptions: { decimalPlaces: 2, defaulValue: "", thousandsSeparator: "," } }
            ],
            viewrecords: true,
            rowNum: 30,
            rowList: [30, 50, 100],
            pager: "#gridPager",
            rownumbers: true,
            shrinkToFit: false,
            gridview: true,
            gridComplete: function () {
                $("#" + this.id).setSelection(selectedRowIndex, false);
            }
        });
        //$gridTable.authorizeColModel();
        //查询条件设置
    }

    function btn_Search() {       
        getNodes();
        var thisDate = $('#ThisDate').val();
        var lastDate = $('#LastDate').val();

        if (checkedIds.length < -1)
        {
            dialogMsg("请选择小区", -1);
            return;
        }

        if (isNotNull(thisDate)) {
            dialogMsg("开始日期不能为空", -1);
            return;
        }
        if (isNotNull(lastDate)) {
            dialogMsg("结束日期不能为空", -1);
            return;
        }

        $("#gridTable").jqGrid('setGridParam', {
            postData: {               
                thisDate: thisDate,
                lastDate: lastDate,
                devIds:checkedIds.toString()
            }
        }).trigger('reloadGrid');
    }

    function isNotNull(obj) {
        obj = $.trim(obj);
        if (obj.length == 0 || obj == null || obj == undefined) {
            return true;
        }
        else
            return false;
    }


    //导出
    function btn_export() {
        var datavalue = $("#gridTable").jqGrid('getRowData');   //获取全部数据
        dialogOpen({
            id: "ExcelIExportDialog",
            title: '导出',
            url: '/Utility/ExcelExportForm?gridId=gridTable&filename=区用水量明细',
            width: "500px",
            height: "380px",
            callBack: function (iframeId) {
                top.frames[iframeId].AcceptClick();
            }, btn: ['导出Excel', '关闭']
        });
    }
</script>
<div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
    <div class="ui-layout-west">
        <div class="west-Panel">
            <div class="panel-Title">区域信息</div>
            <div id="itemTree"></div>
        </div>

    </div>
    <div class="ui-layout-center">
        <div class="center-Panel">
            <div class="titlePanel">
                <div class="title-search">
                    <table>
                        <tr>                            
                            <td>开始日期</td>
                            <td>
                                <input id="ThisDate" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker()" value="@LeaRun.Util.Time.GetDate(-30)" />
                            </td>
                            <td>结束日期</td>
                            <td>
                                <input id="LastDate" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker()" value="@LeaRun.Util.Time.GetDate(0)" />
                            </td>
                            <td style="padding-left: 5px;">
                                <a id="btn_Search" class="btn btn-primary" onclick="btn_Search()"><i class="fa fa-search"></i>&nbsp;查询</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="toolbar">
                    <div class="btn-group">
                        <a id="lr-replace" class="btn btn-default" onclick="reload();"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
                        <a id="lr-edit" class="btn btn-default" onclick="btn_export()"><i class="fa  fa-file-excel-o"></i>&nbsp;导出</a>
                    </div>
                </div>
            </div>
            <div class="gridPanel">
                <table id="gridTable"></table>
                <div id="gridPager"></div>
            </div>

        </div>
    </div>
</div>