在選課平臺中，管理員設定選課的時候用到了easyUI的datagrid，在頁面載入的時候需要先隱藏datagrid中的內容，當流程走到設定課程的時候再顯示datagrid。

    1.對於一個頁面中應用了datagrid時,如在頁面開啟時為隱藏,在頁面的再再次動態顯示的時候, table資料則會隱藏不可見,table的標題,工具欄,分頁欄則會壓縮在一起,而需要顯示的資料卻未能正常顯示出來.(這種情況用的是方法hide()和show()).

    $(function () {
        $("#step1").show();
        $("#step2").hide();
    });

    function nextstep() {
        $("#step1").hide();
        $('#step2').panel('open');
    }

    function previousstep() {
        $("#step1").show();
        $('#step2').panel('close');
    }
 

    2.這時候對需要隱藏的datagrid及相關內容由一個div包含，並且為該div附加class="easyui-panel",使得所有的div內的容存放在一個panel窗器內.這時可為該div再附加closed='true'或是在$(function({$('#divID').panel('close');});設定,使得在頁面初始載入時,該部分內容不可顯示,然後在js指令碼中用$('#divID').panel('open');來顯示該內容.

    $(function () {
        $("#step1").show();
        $('#step2').panel('close');
    });

    function nextstep() {
        $("#step1").hide();
        $('#step2').panel('open');
    }

    function previousstep() {
        $("#step1").show();
        $('#step2').panel('close');
    }
 

    總之，動態的顯示和隱藏datagrid的時候需要在datagrid的外面包含easyui-panel,通過控制easyui-panel的close和open來動態的顯示和隱藏datagrid。

提取碼：b4cm