JqG​​rid重新排序searchBox中的元素?

时间:2012-11-21 05:33:43

标签: javascript jquery jqgrid

我是jqGrid的新手,想知道一种方法来重新排序searchBox中dropDown中的各种元素。

我观察到,默认情况下,在搜索框中,我们根据网格colModel中的显示顺序获取columnNames。但我想在searchBox对话框中将特定列放在顶部。例如,在我的jqGrid中有3列

ID | EMPLOYEENAME | EMPID

在上述情况下假设所有三个字段都是可搜索的,我得到填充了

的searchBox
ID
EMPLOYENAME
EMPID

以相同的顺序。 但我希望EMPID在searchBox中排在首位。

请告知

1 个答案:

答案 0 :(得分:0)

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/free-jqgrid/4.12.1/css/ui.jqgrid.min.css" />
    <script src="https://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript">

    function setCookie(cname, cvalue, exdays)
    {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    function getCookie(cname)
    {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++)
        {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1);
            if (c.indexOf(name) == 0)
            {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
    var delete_cookie = function (name)
    {
        document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    };

</script>
    <script type="text/javascript">

        $(document).ready(function () {
            DisplayGrid();  
        });

        function DisplayGrid()
        {
            $.ajax({
                type: "POSt",
                url: "Demo_12.aspx/Display",
                data: "{}",
                datatype: "json",
                contentType: "application/json; charset=utf-8",
                success: function OnSuccess(data) {
                    debugger
                    var dadads = data.d;
                    $("#grid").jqGrid({

                        colModel: [
                            { name: "C_Code", hidden: true },
                            { name: "C_Name", index: 'C_Name', width: 122 },
                            { name: "C_S_Name", index: 'C_S_Name', width: 122 },
                            { name: "C_RapNet", index: 'C_RapNet', width: 100 },
                            { name: "FancyCol", index: 'FancyCol', width: 100 },
                            { name: "FancyColInten", index: 'FancyColInten', width: 120 },
                            { name: "FancyColOverTone", index: 'FancyColOverTone', width: 120 },
                            { name: "ARGCol", index: 'ARGCol', width: 150 },
                            { name: "ARGColInten", index: 'ARGColInten', width: 120 },
                            { name: "C_GIA_Name", index: 'C_GIA_Name', width: 90 },
                            { name: "Ord", index: 'Ord', width: 90 },
                            {
                                name: "Action", width: 115, formatter: function (cellvalue, options, rowObject) {
                                    return '<a href="javascript:void(0)" class="" id="editbtn" ><i class="entypo-pencil"></i></a>';
                                }
                            },
                        ],
                        onSelectAll: function (aRowids, isSelected) {
                            var myGrid = $('#grid');
                            var coockiVal = getCookie("selectedcode_color");
                            var coockiVal_count = getCookie("selectedcount_color_color");
                            var noofcount = 0;

                            if (coockiVal == null || coockiVal == '') {
                                coockiVal = ',';
                            }

                            if (coockiVal_count == null || coockiVal_count == '') {
                                coockiVal_count = '0';
                            }

                            var noofcount = parseInt(coockiVal_count);

                            for (i = 0, count = aRowids.length; i < count; i++) {
                                var celValue = myGrid.jqGrid('getCell', aRowids[i], 'C_Code');
                                if (isSelected == true) {
                                    var n = coockiVal.indexOf(',' + celValue + ',');
                                    if (n == -1) {
                                        coockiVal = coockiVal + ',' + celValue + ',';
                                        noofcount = parseInt(noofcount) + 1;
                                    }
                                }
                                else {
                                    var n = coockiVal.indexOf(',' + celValue + ',');
                                    if (n != -1) {
                                        coockiVal = coockiVal.split(',' + celValue + ',').join("");
                                        noofcount = parseInt(noofcount) - 1;
                                    }
                                }
                            }

                            setCookie("selectedcode_color", coockiVal, 30);
                            setCookie("selectedcount_color", noofcount, 30);
                            var elems = document.getElementById('noofCount');
                            elems.value = noofcount;

                        },
                        serializeGridData: function (postData) {
                            postData.filters = JSON.stringify({

                            });
                            return JSON.stringify(postData);
                        },
                        jsonReader: { root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
                        onInitGrid: function () {
                            $("<div style='display:none;' id='no-record'>No Record(s) Found</div>").insertAfter($(this).parent());
                        },

                        beforeSelectRow: function (rowid, e) {
                            debugger
                            //return $(e.target).is('input[type=checkbox]');
                            var $self = $(this),
                                iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
                                cm = $self.jqGrid("getGridParam", "colModel"),
                                localData = $self.jqGrid("getLocalRow", rowid);
                            if (cm[iCol].name === "cb" && e.target.tagName.toUpperCase() === "INPUT") {
                                var coockiVal = getCookie("selectedcode_color");
                                var coockiVal_count = getCookie("selectedcount_color");

                                if (coockiVal == null || coockiVal == '') {
                                    coockiVal = ',';
                                }

                                if (coockiVal_count == null || coockiVal_count == '') {
                                    coockiVal_count = '0';
                                }

                                debugger
                                var myGrid = $('#grid');
                                var result1 = $(e.target).is(":checked");
                                if (result1 == true) {
                                    var celValue = myGrid.jqGrid('getCell', rowid, 'C_Code');

                                    coockiVal = coockiVal + ',' + celValue + ',';
                                    coockiVal_count = parseInt(coockiVal_count) + 1;
                                    setCookie("selectedcode_color", coockiVal, 30);
                                    setCookie("selectedcount_color", coockiVal_count, 30);

                                }
                                else {
                                    var celValue = myGrid.jqGrid('getCell', rowid, 'C_Code');
                                    coockiVal = coockiVal.split(',' + celValue + ',').join("");
                                    coockiVal_count = parseInt(coockiVal_count) - 1;

                                    setCookie("selectedcode_color", coockiVal, 30);
                                    setCookie("selectedcount_color", coockiVal_count, 30);
                                }

                                var elems = document.getElementById('noofCount');
                                elems.value = coockiVal_count;

                            }
                            return $(e.target).is('input[type=checkbox]');
                            return true; // allow selection
                        },
                        recordpos: 'left', cmTemplate: { sortable: false, title: false },
                        data: dadads,
                        ignoreCase: true,
                        rowNum: 10,
                        rowList: [10, 50, 100, 150],
                        pager: $('#pagingGrid'),
                        viewrecords: true,
                        height: "auto",
                        shrinkToFit: false,
                        autowidth: false,
                        fixed: true,
                        multiselect: true,
                        sortname: "invdate",
                        sortorder: "desc",
                        rowNum: 10,

                    }).jqGrid("filterToolbar");

                },
                Error: function OnError(data) {

                }
            });
        }





    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <table id="grid"></table>
            <div id="pagingGrid"></div><br />
    </div>
    </form>
</body>
</html>