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);
        });

　　　　 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 = "";//用戶姓名，用戶給客戶看
            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.getElementById('RUserIDs').value = delidName;
            art.dialog.close();//關閉彈出框
        }

這里還可以進行單選的操作：

我把配置貼下吧，其實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:1, pId:0, name:"手機", ename:"Mobile", open:true},
     { id:11, pId:1, name:"諾基亞", ename:"Nokia"},
     { id:111, pId:11, name:"C6(音樂版)", ename:"C6(Music)"},
     { id:112, pId:11, name:"X6(導航版)", ename:"X6(GPS)"},
     { id:113, pId:11, name:"5230(世博版)", ename:"5230(SB)"},
     { id:114, pId:11, name:"N97mini", ename:"N97mini"},
     { id:12, pId:1, name:"三星", ename:"Samsung"},
     { id:121, pId:12, name:"I9000(聯通版)", ename:"I9000(Unicom)"},
     { id:122, pId:12, name:"I9000(移動版)", ename:"I9000(China Mobile)"},
     { id:123, pId:12, name:"Galaxy Naos", ename:"Galaxy Naos"},
     { id:124, pId:12, name:"Fascinate", ename:"Fascinate"},
     { id:13, pId:1, name:"索愛", ename:"Sony Ericsson"},
     { id:131, pId:13, name:"U1i(Satio)", ename:"U1i(Satio)"},
     { id:132, pId:13, name:"U5i(Vivaz)", ename:"U5i(Vivaz)"},
     { id:133, pId:13, name:"X10i", ename:"X10i"}]

這里就完成了整個操作了，誒，文筆不好，組織語言自然就不怎么樣了，大家見諒。