jqgrid 實現表格隨select框內容改變而刷新

要實現的功能如下：當選擇框選擇數據源由原始數據切換到組合后數據時，界面左側jqgrid表格隨之改變。效果如下：

實現代碼：

界面頂部select選擇框：要點是用localStory將選擇框的選擇信息記錄在緩存中，選擇完成后重新加載頁面，將選擇框的選中項設置為記錄到緩存中的值。

<section class="content-header">
    <div class="row">
        <H5 for="SelectBatchID" class="col-sm-1">選擇批次</H5>

        <div class="col-md-3">
            <select class="form-control" name="SelectBatchID" id="SelectBatchID" onchange="selet_curent_batch()">
            </select>
        </div>

        <H5 for="SelectData" class="col-sm-1">選擇數據源</H5>

        <div class="col-md-3">
            <select class="form-control" name="SelectData" id="SelectData" onchange="selet_data()">
                <option value="original">原始數據</option>
                <option value="combination">組合后數據</option>
            </select>
        </div>
    </div>

    <Script>
        if(localStorage.getItem("selected")=="original"){
            $("#SelectData").val("original")
        }
        if(localStorage.getItem("selected")=="combination") {
            $("#SelectData").val("combination");
        }
        var list = document.getElementById("SelectBatchID");
        var post = function (url, form, callback) {
            // XMLHttpRequest 對象
            var xhr = new XMLHttpRequest();
            xhr.open("post", url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    var res =  eval ("(" + xhr.responseText + ")");
                    callback(res);
                }
            };
            xhr.send(form);
        };
        var form = new FormData();
        post("/editor/getbatches", form, function (res) {
            for(var v in res.batches) {
                list.options.add(new Option(res.batches[v], v))
            }
            for (var i=0; i<list.options.length; i++) {
                if (list.options[i].value == res.selected) {
                    list.options[i].selected = true;
                }
            }
        });
        var selet_curent_batch = function () {
            var cur_batch = list.options[list.selectedIndex].value;
            var form = new FormData();
            form.append('cur_batch',cur_batch);
            post("/batch/current", form, function (res) {
                document.location.reload();
            });
        };
        var selet_data =function () {
            //選擇數據源后刷新table
            var data = $('#SelectData').val();
            localStorage.setItem("selected",data.toString());
            location.reload();
        }
    </Script>
</section>

生成表格的js：

<script>
    //table
    $(function(){
        //頁面加載完成之后執行
        pageInit();
    });
    function pageInit(){
        //創建jqGrid組件
        var url;
        if ($("#SelectData").val()=="original"){
            url = "/getOriginalData"
        }
        if ($("#SelectData").val()=="combination") {
            url = "/getCombinationData"
        }
        jQuery("#list2").jqGrid(
                {
                    loadonce:true,
                    url : url,//組件創建完成之后請求數據的url
                    datatype : "json",//請求數據返回的類型。可選json,xml,txt
                    colNames : ['鑽孔名稱'],//jqGrid的列顯示名字
                    colModel : [ //jqGrid每一列的配置信息。包括名字，索引，寬度,對齊方式.....
                        // {name : '_id',index : 'id', hidden:true},
                        {name : 'no',index : 'no',width : 180},
                    ],
                    rowNum : -1,//一頁顯示多少條
                    // rowList : [ 10, 20, 50 ],//可供用戶選擇一頁顯示多少條
                    // pager : '#pager2',//表格頁腳的占位符(一般是div)的id
                    sortname : 'id',//初始化的時候排序的字段
                    sortorder : "desc",//排序方式,可選desc,asc
                    mtype : "post",//向后台請求數據的ajax的類型。可選post,get
                    viewrecords : true,
                    caption : "鑽孔列表",//表格的標題名字
                    multiselect: true,//復選框
                    // pagerpos: 'left',
                    recordtext: "",
                    height:225,
                });
        /*創建jqGrid的操作按鈕容器*/
        /*可以控制界面上增刪改查的按鈕是否顯示*/
        // jQuery("#list2").jqGrid('navGrid', '#pager2', {edit : false,add : false,del : false});
    }
</script>

這樣調整過后就可以實現我們想要的功能了！