|
近期正在接触OA系统并且有使用了几个插件今天就简单介绍下我在项目中如何使用这两个插件 artDialog:弹窗插件（官网） Ztree:树形插件（官网） 先上个图的两个插件的结合应用 一个很后台系统很常见的操作选择用户这里的操作方法为在弹出框中选择完用户之后返回用户ID和用户姓名给父页面项目中使用的是MVC一般的后台系统都用到了iframe这个OA也不例外在iframe的最外层引用artDialog所需的文件那么在iframe的子页面中则采用top就可以调用这个插件了不需要每个页面都不引用很方便的 上图所弹出的页面其实是以iframe的形式弹出一个页面而已所以我们把Ztree的功能在一个页面上构造好下面先讲解下Ztree的使用 第一步引用相关文件 <script type=text/javascript src=/Scripts/reminjs></script> <script type=text/javascript src=/Scripts/jqueryztreeexcheckminjs></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 （） { $fnzTreeinit（$（#treeDemo） setting） }） function zTreeOnAsyncSuccess（event treeId treeNode msg） { if （artdialogdata（User）） {//这里有用到artDialog插件 var ID = topartdialogdata（User）// 获取由主页面传递过来的数据 var zTreeObj = $fnzTreegetZTreeObj（treeDemo） var zTree = zTreeObjgetCheckedNodes（false） for （var i = ; i < zTreelength; i++） { if （IDindexOf（ + zTree[i]id + ） != ） { zTreeObjcheckNode（zTree[i] true） } } }; }; 这里应用的场景为已经选择了这些用户然后关掉了弹出框然后又需要重新选择用户时则第一次选择的用户需要在初始化的时候进行赋值 我们看下父窗体中怎么配置的（弹窗插件的使用方法） 引用相关文件 <script type=text/javascript src=/Scripts/artDialog/artDialogsourcejs?skin=blue></script> <script type=text/javascript src=/Scripts/artDialog/iframeToolssourcejs></script> 第一个文件是弹窗插件的核心JS后面skin=blue表示选择那个皮肤（具体参考官网） 第二个文件是需要在iframe中使用时所引用的需要使用第二个文件中的open函数 function OpenFrame_Radio（） { artdialogdata（User $（#UUpUserID）val（））//获取需要传到子窗体的值 artdialogopen（/DepartMent/SetUser_Radio/ { height: % width: % title: 选择直属上级 lock: true } false）//打开子窗体 } 这样调用这个函数的时候就会以弹出框的形式打开/DepartMent/SetUser_Radio/这个页面了我们再看看子窗体中如何接受父窗体传过来的值其实上面有说到的 var ID = topartdialogdata（User）//如果页面不引用artDialog的文件则使用TOP来调用最外层的iframe所引用的文件效果相同这里注意date里面的值需要跟父窗体中的命名一致 接着上面子窗体中的Ztree操作讲当打开子窗体时Ztree已经配置为异步加载了当加载完节点数据的时候（Tree已经生成）就会调用配置的回调函数然后进行初始化赋值处理 第三步返回值 当我们已经选择好用户之后需要关闭弹出框并且返回数据给父窗体 点击确认保存时则调用一个函数 function GetValue（） { var delidID = ;//用户ID用户保存数据库 var delidName = ;//用户姓名用户给客户看 var zTree = $fnzTreegetZTreeObj（treeDemo）getCheckedNodes（true）//获取所有选中状态的节点 for （var i = ; i < zTreelength; i++） { delidID += zTree[i]id + ; delidName += zTree[i]name + ; }var Origins = artDialogopenorigin;//这里表示父窗体 OriginsdocumentgetElementById（RUserID）value =delidID;//赋值父窗体RUserID为父窗体对象 OriginsdocumentgetElementById（RUserIDs）value = delidName; artdialogclose（）//关闭弹出框 } 这里还可以进行单选的操作 我把配置贴下吧其实API中都有的 var setting = { data: { simpleData: { enable: true } } check: { enable: true chkStyle: radio//修改了这里 radioType: all//还有这里ALL标识整个Tree只准选中一个节点 } async: { enable: true url: /DepartMent/GetJson/ } callback: { onAsyncSuccess: zTreeOnAsyncSuccess } }; 最后还有就是节点数据因为是放到控制器中生成的我把生成的格式给大家看下如果文章看不懂的童鞋可以去官网上看都有DEMO的 [{ id: pId: name:手机 ename:Mobile open:true} { id: pId: name:诺基亚 ename:Nokia} { id: pId: name:C（音乐版） ename:C（Music）} { id: pId: name:X（导航版） ename:X（GPS）} { id: pId: name:（世博版） ename:（SB）} { id: pId: name:Nmini ename:Nmini} { id: pId: name:三星 ename:Samsung} { id: pId: name:I（联通版） ename:I（Unicom）} { id: pId: name:I（移动版） ename:I（China Mobile）} { id: pId: name:Galaxy Naos ename:Galaxy Naos} { id: pId: name:Fascinate ename:Fascinate} { id: pId: name:索爱 ename:Sony Ericsson} { id: pId: name:Ui（Satio） ename:Ui（Satio）} { id: pId: name:Ui（Vivaz） ename:Ui（Vivaz）} { id: pId: name:Xi ename:Xi}] 这里就完成了整个操作了诶文笔不好组织语言自然就不怎么样了大家见谅 |
