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: {
易做图Data: {
enable: true
}
},
check: {
enable: true
},
async: {//异步加载节点数据
enable: true,
url: "/DepartMent/GetJson/"
},
callback: {//绑定回调函数
onAsyncSuccess: zTreeOnAsyncSuccess//在异步加载完成时调用
}
};
$(function () {
$.fn.zTree.init($("#treeDemo"), setting);
});
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
if (art.dialog.data('User')) {//这里有用到artDialog插件
var ID = top.art.dialog.data('User');// 获取由主页面传递过来的数据
var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo")
var zTree = zTreeObj.getCheckedNodes(false);
for (var i = 0; i < zTree.length; i++) {
if (ID.indexOf("," + zTree[i].id + ",") != -1) {
zTreeObj.checkNode(zTree[i], true);
}
}
};
};
这里应用的场景为已经选择了这些用户，然后关掉了弹出框，然后又需要重新选择用户时，则第一次选择的用户需要在初始化的时候进行赋值。
我们看下父窗体中怎么配置的（弹窗插件的使用方法）：
引用相关文件：
<script type="text/javascript" src="/Scripts/artDialog/artDialog.source.js?skin=blue"></script>
<script type="text/javascript" src="/Scripts/artDialog/iframeTools.source.js"></script>
第一个文件是弹窗插件的核心JS，后面skin=blue表示选择那个皮肤（具体参考官网）。
第二个文件是需要在iframe中使用时所引用的，需要使用第二个文件中的open函数。
function OpenFrame_Radio() {
art.dialog.data('User', $('#UUpUserID').val());//获取需要传到子窗体的值
art.dialog.open('/DepartMent/SetUser_Radio/', { height: '80%', width: '20%', title: "选择直属上级", lock: true }, false);//打开子窗体
}
这样调用这个函数的时候就会以弹出框的形式打开“/DepartMent/SetUser_Radio/”这个页面了，我们再看看子窗体中如何接受父窗体传过来的值，其实上面有说到的：
var ID = top.art.dialog.data('User');//如果页面不引用artDialog的文件则使用TOP来调用最外层的iframe所引用的文件，效果相同。这里注意date里面的值需要跟父窗体中的命名一致。
接着上面子窗体中的Ztree操作讲：当打开子窗体时，Ztree已经配置为异步加载了，当加载完节点数据的时候（Tree已经生成），就会调用配置的回调函数，然后进行初始化赋值处理。
第三步：返回值。
当我们已经选择好用户之后，需要关闭弹出框，并且返回数据给父窗体。
点击“确认保存”时，则调用一个函数
function GetValue() {
var delidID = ",";//用户ID，用户保存数据库
var delidName = "";//用户姓名，用户给客户看 www.zzzyk.com
var zTree = $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes(true);//获取所有选中状态的节点
for (var i = 0; i < zTree.length; i++) {
delidID += zTree[i].id + ",";
delidName += zTree[i].name + "，";
}var Origins = artDialog.open.origin;//这里表示父窗体
Origins.document.getElementById('RUserID').value =delidID;//赋值父窗体“RUserID”为父窗体对象
Origins.document.getElementByI
补充：Web开发 , ASP.Net ,
