easyUI——控制datagrid的显示与隐藏

本文主要是介绍easyUI——控制datagrid的显示与隐藏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

    在做java-ITOO的选课系统时，学生选课界面要显示：可选课程，已选课程和历史选课。

   在这一个界面上，信息量是非常大的，怎么样让用户快速，简洁的了解自己要的信息呢？

    故，我们决定把已选课程和历史选课先隐藏起来，做了两个按钮，让用户点击的时候再出现，再点击一下隐藏。

    实现起来是非常简单的，首先，我们在界面加载时隐藏“历史选课”“已选课程”这两个datagrid：

$(function() {document.getElementById("yixuan").style.display="none";document.getElementById("lishi").style.display="none";})

然后定义已选课程、历史选课按钮的onclick事件，直接调用就可以了

//点击”已选选课“按钮执行事件function ShowYX(){/* $("#yixuan").show();$("#t").datagrid('reload'); */var o=document.getElementById("yixuan").style.display;if(o=="none"){document.getElementById("yixuan").style.display="";$("#t").datagrid('reload');}if(o==""){document.getElementById("yixuan").style.display="none";}
} //点击”已选选课“按钮执行事件
function ShowLS(){/* $("#yixuan").show();$("#t").datagrid('reload'); */var o=document.getElementById("lishi").style.display;if(o=="none"){document.getElementById("lishi").style.display="";$("#dg").datagrid('reload');}if(o==""){document.getElementById("lishi").style.display="none";}
}

这样，我们想要的效果就实现啦。

其实也可以，用div把datagrid包起来，直接控制div的显示与隐藏也可以，那样就简单了，直接hide，show就可以了。

 

这篇关于easyUI——控制datagrid的显示与隐藏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---