artDialog、Ztree初體驗

　　近期正在接觸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}]
   
    這裡就完成了整個操作了诶文筆不好組織語言自然就不怎麼樣了大家見諒

From:http://tw.wingwit.com/Article/program/net/201311/13860.html