artDialog、Ztree初体验

近期正在接触OA系统，并且有使用了几个插件，今天就简单介绍下我在项目中如何使用这两个插件。

artDialog：弹窗插件（官网）    Ztree：树形插件（官网）

先上个图的两个插件的结合应用：

一个很后台系统很常见的操作，选择用户，这里的操作方法为在弹出框中选择完用户之后，返回用户ID和用户姓名给父页面。项目中使用的是MVC2.0，一般的后台系统都用到了iframe，这个OA也不例外。在iframe的最外层引用artDialog所需的文件。那么在iframe的子页面中，则采用top就可以调用这个插件了，不需要每个页面都不引用，很方便的。
上图所弹出的页面其实是以iframe的形式弹出一个页面而已，所以我们把Ztree的功能在一个页面上构造好。下面先讲解下Ztree的使用：
第一步：引用相关文件。
<script type="text/javascript" src="/Scripts/jquery.ztree.core-3.1.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ztree.excheck-3.1.min.js"></script>
<link rel="stylesheet" href="/Content/zTreeStyle/zTreeStyle.css" type="text/css" />
第一个文件是Ztree的核心文件，这个是必须要的；第二个文件是一个拓展文件，主要用户单选框和复选框的功能，因为要用到，所以也必须引用进来；第三个文件是CSS文件。
第二步：相关配置（具体详细配置，请参考官网API）。
 
var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            check: {
                enable: true
            },
            async: {//异步加载节点数据
                enable: true,
                url: "/DepartMent/GetJson/"
            },
            callback: {//绑定回调函数
                onAsyncSuccess: zTreeOnAsyncSuccess//在异步加载完成时调用
            }
        };
        $(function () {
            $.fn.zTree.init($("#treeDemo"), setting);