知识大全 artDialog、Ztree初体验

Posted 2022-07-17 文件

篇首语：山高有攀头，路远有奔头。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 artDialog、Ztree初体验相关的知识，希望对你有一定的参考价值。

artDialog、Ztree初体验 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　近期正在接触OA系统并且有使用了几个插件今天就简单介绍下我在项目中如何使用这两个插件 artDialog:弹窗插件（官网） Ztree:树形插件（官网）先上个图的两个插件的结合应用

一个很后台系统很常见的操作选择用户这里的操作方法为在弹出框中选择完用户之后返回用户ID和用户姓名给父页面项目中使用的是MVC 一般的后台系统都用到了iframe 这个OA也不例外在iframe的最外层引用artDialog所需的文件那么在iframe的子页面中则采用top就可以调用这个插件了不需要每个页面都不引用很方便的上图所弹出的页面其实是以iframe的形式弹出一个页面而已所以我们把Ztree的功能在一个页面上构造好下面先讲解下Ztree的使用第一步引用相关文件 <script type= text/javascript src= /Scripts/re min js ></script> <script type= text/javascript src= /Scripts/jquery ztree excheck min js ></script> <link rel= stylesheet 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）） 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 = ; i < zTree length; i++） if （ID indexOf（ + zTree[i] id + ） != ） 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: % width: % 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 = ;//用户姓名用户给客户看 var zTree = $ fn zTree getZTreeObj（ treeDemo ） getCheckedNodes（true） //获取所有选中状态的节点 for （var i = ; 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 getElementById（ RUserIDs ） value = delidName; art dialog close（） //关闭弹出框这里还可以进行单选的操作 cha138/Article/program/net/201311/13860