@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<script>
    $(function () {
        gridList();
    })
    function gridList() {
        var $gridList = $("#gridList");
        $gridList.dataGrid({
            url: "/ProductManage/PreSell/GetGridJson",
            height: $(window).height() - 96,
            colModel: [
                { label: "主键", name: "F_Id", hidden: true, key: true },
                { label: 'Product No', name: 'ProductSN', width: 80, align: 'left' },
                { label: 'Measurement', name: 'Measurement', width: 90, align: 'left' },//尺寸
                { label: 'Sort', name: 'Other', width: 60, align: 'left' },//其他
                { label: 'Location', name: 'Location', width: 100, align: 'left' },//位置
                { label: 'Price', name: 'Price', width: 60, align: 'left' },//价格
                { label: 'Quentity', name: 'InvQty', width: 60, align: 'left' },//库存量
                //{ label: 'Weight', name: 'Weight', width: 60, align: 'left' },//重量
                {
                    label: 'FinishedWeight', name: 'Weight', width: 100, align: 'left',
                    formatter: "number", formatoptions: { thousandsSeparator: ',', defaulValue: '', decimalPlaces: 3 }
                },
                {
                    label: 'RoughWeight', name: 'GrossWeight', width: 90, align: 'left',
                    formatter: "number", formatoptions: { thousandsSeparator: ',', defaulValue: '', decimalPlaces: 3 }
                },
                { label: 'Shape', name: 'Shape', width: 60, align: 'left' },//形状
                {
                    label: 'WH', name: 'WhCode', width: 60, align: 'left',
                    formatter: function (cellvalue) {
                        if (cellvalue == "10") {
                            return "成品仓";
                        } else if (cellvalue == "12") {
                            return "评估仓";
                        }
                        else {
                            return "";}
                    }
                },
                { label: 'Certificate No', name: 'CertificateNo', width: 100, align: 'left' },//证书号码
                { label: 'Color', name: 'Color', width: 50, align: 'left' },//色度
                { label: 'Clarity', name: 'Clarity', width: 50, align: 'left' },//净度
                { label: 'Polish', name: 'Polish', width: 50, align: 'left' },//抛光
                { label: 'Symmetry', name: 'Symmetry', width: 70, align: 'left' },//对称性
                { label: 'Cut', name: 'Cut', width: 50, align: 'left' },//切
            ],
            pager: "#gridPager",
            sortname: 'ProductSN asc,Weight desc,F_CreatorTime desc',
            //recordpos: 'left',
            viewrecords: true,
            multiselect: true,
            editurl: "JqGridHandler.ashx?sign=singleEdit"
        });
        $("#divWeight a.btn-default").click(function () {
            $("#divWeight a.btn-default").removeClass("active");
            $(this).addClass("active");
            $('#btn_search').trigger("click");
        });
        $("#divShape a.btn-default").click(function () {
            $("#divShape a.btn-default").removeClass("active");
            $(this).addClass("active");
            $('#btn_search').trigger("click");
        });
        $("#divColor a.btn-default").click(function () {
            $("#divColor a.btn-default").removeClass("active");
            $(this).addClass("active");
            $('#btn_search').trigger("click");
        });
        $("#divClaritr a.btn-default").click(function () {
            $("#divClaritr a.btn-default").removeClass("active");
            $(this).addClass("active");
            $('#btn_search').trigger("click");
        });
        $("#divLab a.btn-default").click(function () {
            $("#divLab a.btn-default").removeClass("active");
            $(this).addClass("active");
            $('#btn_search').trigger("click");
        });
        $("#divPolish a.btn-default").click(function () {
            $("#divPolish a.btn-default").removeClass("active");
            $(this).addClass("active");
            $('#btn_search').trigger("click");
        });
        $("#divSymmerty a.btn-default").click(function () {
            $("#divSymmerty a.btn-default").removeClass("active");
            $(this).addClass("active");
            $('#btn_search').trigger("click");
        });
        $("#divCut a.btn-default").click(function () {
            $("#divCut a.btn-default").removeClass("active");
            $(this).addClass("active");
            $('#btn_search').trigger("click");
        });
        $("#divLoaction a.btn-default").click(function () {
            $("#divLoaction a.btn-default").removeClass("active");
            $(this).addClass("active");
            $('#btn_search').trigger("click");
        });
        $("#divSort a.btn-default").click(function () {
            $("#divSort a.btn-default").removeClass("active");
            $(this).addClass("active");
            $('#btn_search').trigger("click");
        });
        $("#btn_search").click(function () {
            var Weight = $("#divWeight a.active").attr('data-value');
            var Shape = $("#divShape a.active").attr('data-value');
            var Color = $("#divColor a.active").attr('data-value');
            var Clarity = $("#divClarity a.active").attr('data-value');
            var Lab = $("#divLab a.active").attr('data-value');
            var Polish = $("#divPolish a.active").attr('data-value');
            var Symmerty = $("#divSymmerty a.active").attr('data-value');
            var Cut = $("#divCut a.active").attr('data-value');
            var Location = $("#divLoaction a.active").attr('data-value');
            var Sort = $("#divSort a.active").attr('data-value');

            var queryJson = {
                weight: Weight,
                shape: Shape,
                color: Color,
                clarity: Clarity,
                lab: Lab,
                polish: Polish,
                symmerty: Symmerty,
                cut: Cut,
                location: Location,
                sort: Sort,
            }
            $gridList.jqGrid('setGridParam', {
                postData: { queryJson: JSON.stringify(queryJson) },
            }).trigger('reloadGrid');
        });
    }

    function btn_details(cellvalue) {
        //var keyValue = $("#gridList").jqGridRowValue().F_Id;
        var keyValues = $("#gridList").jqGrid('getGridParam', 'selrow');
        $.modalOpen({
            id: "Details",
            title: "Look",
            url: "/ProductManage/PreSell/Details?keyValue=" + keyValues,
            width: "550px",
            height: "380px",
            btn: null,
        });
    }

    function btn_order() {
        var ids = $('#gridList').jqGrid('getGridParam', 'selarrrow');
        var keyValues = "";
        for (var i = 0; i < ids.length; i++) {
            if (i == 0)
                keyValues += ids[i];
            else
                keyValues += "," + ids[i];
        }
        $.modalOpen({
            id: "Orders",
            title: "Order selection",
            url: "/ProductManage/PreSell/Orders?keyValues=" + keyValues,
            width: "330px",
            height: "360px",
            callBack: function (iframeId) {
                top.frames[iframeId].submitForm();
            }
        });
    }

    function download(options) {
        var defaults = {
            method: "GET",
            url: "",
            param: []
        };
        var options = $.extend(defaults, options);
        if (options.url && options.param) {
            var $form = $('<form action="' + options.url + '" method="' + (options.method || 'post') + '"></form>');
            for (var key in options.param) {
                var $input = $('<input type="hidden" data-back="backdw" />').attr('name', key).val(options.param[key]);
                $form.append($input);
            }
            $form.appendTo('body').submit().remove();
        };
    }

    function btn_export() {
        var keyValue = $("#gridList").getDataIDs();
        if (keyValue == null || keyValue == "") {
            alert("没有可导出的数据.");
            return false;
        }
        download({
            method: "POST",
            url: '/ProductManage/PreSell/Export',
            param: {
                keyValue: keyValue
            }
        });
    }
</script>

<div class="topPanel" style="height:200px;">
    <div class="toolbar">
        <div class="btn-group">
            <a class="btn btn-primary" onclick="$.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
            <a id="NF-Export" authorize="yes" style="margin-left:3px;" class="btn btn-primary" onclick="btn_export()"><i class="fa fa-search-plus"></i>Export</a>
            <a id="NF-Details" authorize="yes" style="margin-left:3px;" class="btn btn-primary" onclick="btn_details()"><i class="fa fa-search-plus"></i>Look</a>
            <a id="NF-Order" authorize="yes" style="margin-left:3px;" class="btn btn-primary" onclick="btn_order()"><i class="fa fa-plus"></i>Order</a>
        </div>
        <script>$('.toolbar').authorizeButton()</script>
    </div>
    <div class="search">
        <table>
            <tr>
                <td>
                    <div class="input-group">
                        <input id="txt_Weight" type="text" class="form-control txttotxt" value="Weight" style="width:55px;border:0;padding:1px 3px;font-size:14px;" />：
                        <div id="divWeight" class="btn-group">
                            <a class="btn btn-default btn2 active" style="min-width:35px;" data-value="0">All</a>
                            <a class="btn btn-default btn2" data-value="1">&lt;&nbsp;0.5ct</a>
                            <a class="btn btn-default btn2" data-value="2">0.5-0.69ct</a>
                            <a class="btn btn-default btn2" data-value="3">0.7-0.89ct</a>
                            <a class="btn btn-default btn2" data-value="4">0.9-0.99ct</a>
                            <a class="btn btn-default btn2" data-value="5">1.0-1.49ct</a>
                            <a class="btn btn-default btn2" data-value="6">1.5-1.99ct</a>
                            <a class="btn btn-default btn2" data-value="7">2.0-2.99ct</a>
                            <a class="btn btn-default btn2" data-value="8">3.0-3.99ct</a>
                            <a class="btn btn-default btn2" data-value="9">4.0-4.99ct</a>
                            <a class="btn btn-default btn2" data-value="10">5.0-5.99ct</a>
                        </div>
                    </div>
                    <div class="input-group">
                        <input id="txt_Shape" type="text" class="form-control txttotxt" value="Shape" style="width:55px;border:0;padding:1px 3px;font-size:14px;" />：
                        <div id="divShape" class="btn-group">
                            <a class="btn btn-default btn2 active" style="min-width:35px;" data-value="0">All</a>
                            <a class="btn btn-default btn2" data-value="1">Round</a>
                            <a class="btn btn-default btn2" data-value="2">Pear</a>
                            <a class="btn btn-default btn2" data-value="3">Oval</a>
                            <a class="btn btn-default btn2" data-value="4">Heart</a>
                            <a class="btn btn-default btn2" data-value="5">Emerald</a>
                            <a class="btn btn-default btn2" data-value="6">Radiant</a>
                            <a class="btn btn-default btn2" data-value="7">Asscher</a>
                            <a class="btn btn-default btn2" data-value="8">Princess</a>
                            <a class="btn btn-default btn2" data-value="9">Cushion</a>
                        </div>
                    </div>
                    @*<div class="input-group">
                            <input id="txt_Size" type="text" class="form-control txttotxt" value="Size:" style="width:50px;border:0;padding:1px 3px;font-size:14px;" />：
                            <div id="divSize" class="btn-group">
                                <input id="txt_From" type="text" class="form-control txttotxt" value="From" style="width:40px;border:0;padding:1px 3px;font-size:14px;" />
                                <input id="txt_keyword" type="text" class="form-control" placeholder="Min Size" style="width: 100px;">
                                <input id="txt_TO" type="text" class="form-control txttotxt" value="TO" style="width:28px;border:0;padding:1px 3px;font-size:14px;" />
                                <input id="txt_keyword2" type="text" class="form-control" placeholder="Max Size" style="width: 100px;">
                            </div>
                        </div>*@
                    <div class="input-group">
                        <input id="txt_Color" type="text" class="form-control txttotxt" value="Color" style="width:55px;border:0;padding:1px 3px;font-size:14px;" />：
                        <div id="divColor" class="btn-group">
                            <a class="btn btn-default btn3 active" data-value="0">All</a>
                            <a class="btn btn-default btn3" data-value="1">D</a>
                            <a class="btn btn-default btn3" data-value="2">E</a>
                            <a class="btn btn-default btn3" data-value="3">F</a>
                            <a class="btn btn-default btn3" data-value="4">G</a>
                            <a class="btn btn-default btn3" data-value="5">H</a>
                            <a class="btn btn-default btn3" data-value="6">I</a>
                            <a class="btn btn-default btn3" data-value="7">J</a>
                            <a class="btn btn-default btn3" data-value="8">K</a>
                            <a class="btn btn-default btn3" data-value="9">L</a>
                            <a class="btn btn-default btn3" data-value="10">M</a>
                            <a class="btn btn-default btn3" data-value="11">N</a>
                        </div>
                        @*--------------------------------------------------------------------------------*@
                        <input id="empty1" type="text" value="" style="border:0;width:21px;" />Lab：
                        <div id="divLab" class="btn-group">
                            <a class="btn btn-default btn3 active" data-value="0">All</a>
                            <a class="btn btn-default btn3" data-value="1">IGI</a>
                            <a class="btn btn-default btn3" style="min-width:40px;" data-value="2">Other</a>
                            <button id="btn_search" type="button" class="btn  btn-primary" style="display:none;"><i class="fa fa-search"></i></button>
                        </div>
                    </div>
                    <div class="input-group">
                        <input id="txt_Clarity" type="text" class="form-control txttotxt" value="Clarity" style="width:55px;border:0;padding:1px 3px;font-size:14px;" />：
                        <div id="divClarity" class="btn-group">
                            <a class="btn btn-default btn3 active" data-value="0">All</a>
                            <a class="btn btn-default btn3" data-value="1">IF</a>
                            <a class="btn btn-default btn3" data-value="2">VVS1</a>
                            <a class="btn btn-default btn3" data-value="3">VVS2</a>
                            <a class="btn btn-default btn3" data-value="4">VS1</a>
                            <a class="btn btn-default btn3" data-value="5">VS2</a>
                            <a class="btn btn-default btn3" data-value="6">SI1</a>
                            <a class="btn btn-default btn3" data-value="7">SI2</a>
                            <a class="btn btn-default btn3" data-value="8">SI3</a>
                            <a class="btn btn-default btn3" data-value="9">I1</a>
                            <a class="btn btn-default btn3" data-value="10">I2</a>
                            <a class="btn btn-default btn3" data-value="11">I3</a>
                        </div>
                        @*--------------------------------------------------------------------------------*@
                        <input id="empty3" type="text" value="" style="border:0;width:20px;" />Cut：
                        <div id="divCut" class="btn-group">
                            <a class="btn btn-default btn3 active" data-value="0" style="width:30px">All</a>
                            <a class="btn btn-default btn3" data-value="1">EX</a>
                            <a class="btn btn-default btn3" data-value="2">VG</a>
                            <a class="btn btn-default btn3" data-value="3">G</a>
                            <a class="btn btn-default btn3" data-value="4">F</a>
                            <a class="btn btn-default btn3" data-value="5">P</a>
                            <a class="btn btn-default btn3" data-value="6">N/A</a>
                        </div>
                    </div>
                    <div class="input-group">
                        <input id="txt_Polish" type="text" class="form-control txttotxt" value="Polish" style="width:55px;border:0;padding:1px 3px;font-size:14px;" />：
                        <div id="divPolish" class="btn-group">
                            <a class="btn btn-default btn3 active" data-value="0">All</a>
                            <a class="btn btn-default btn3" data-value="1">EX</a>
                            <a class="btn btn-default btn3" data-value="2">VG</a>
                            <a class="btn btn-default btn3" data-value="3">G</a>
                            <a class="btn btn-default btn3" data-value="4">F</a>
                            <a class="btn btn-default btn3" data-value="5">P</a>
                            <a class="btn btn-default btn3" data-value="6">N/A</a>
                        </div>
                        @*--------------------------------------------------------------------------------*@
                        <input id="txt_Symmerty" type="text" value="" style="border:0;width:20px;" />Symmerty：
                        <div id="divSymmerty" class="btn-group">
                            <a class="btn btn-default btn3 active" data-value="0">All</a>
                            <a class="btn btn-default btn3" data-value="1">EX</a>
                            <a class="btn btn-default btn3" data-value="2">VG</a>
                            <a class="btn btn-default btn3" data-value="3">G</a>
                            <a class="btn btn-default btn3" data-value="4">F</a>
                            <a class="btn btn-default btn3" data-value="5">P</a>
                            <a class="btn btn-default btn3" data-value="6">N/A</a>
                        </div>
                    </div>
                    <div class="input-group">
                        <input id="txt_Loaction" type="text" class="form-control txttotxt" value="Location" style="width:55px;border:0;padding:1px 3px;font-size:14px;" />：
                        <div id="divLoaction" class="btn-group">
                            <a class="btn btn-default btn2 active" style="min-width:35px;" data-value="0">All</a>
                            <a class="btn btn-default btn2" style="min-width:150px;" data-value="1">ShangHai Warehouse</a>
                            <a class="btn btn-default btn2" style="min-width:150px;" data-value="2">HongKong Warehouse</a>
                            <a class="btn btn-default btn2" style="min-width:150px;" data-value="3">U.S.A Warehouse</a>
                        </div>
                        @*--------------------------------------------------------------------------------*@
                        <input id="txt_Sort" type="text" value="" style="border:0;width:20px;" />Sort：
                        <div id="divSort" class="btn-group">
                            <a class="btn btn-default btn3 active" data-value="0">All</a>
                            <a class="btn btn-default btn3" style="min-width:78px;" data-value="1">Rough</a>
                            <a class="btn btn-default btn3" style="min-width:78px;" data-value="2">Polished</a>
                        </div>
                    </div>
                </td>
            </tr>

        </table>
    </div>
</div>
<div class="gridPanel">
    <table id="gridList"></table>
    <div id="gridPager"></div>
</div>