EasyUI ComboTree 異步加載 ( .net 版 )

轉 http://www.cnblogs.com/mbailing/archive/2013/06/07/Combotree.html 

最近在做推廣資源管理系統中，進行了大量的數據分析、計算。本以為可以安心不理，奈何部門的下拉列表總覺得不盡如人意。下圖是我們湊合的結果：上菜

 

 

     看了是不是很糾結，如果所在公司部門少還好，一旦多起來，使用者必瘋。大家可能會問，為什么要這樣做(一個字，懶！三個字，眾人懶)。大家懶到能用就成的地步。無奈之下我來解決。

 

     把百度都快搜爛了，發現 EasyUI Combotree能當此重任，隨下軍令狀。

 

     EasyUI Combotree 走你。

 

一、Combotree的數據加載方式有如下兩種：

 

　　(1)、本地數據源加載

 

<input class="easyui-combotree" method='get' data-options="url:'../combotree/tree_data1.json',required:true" style="width:200px;">  

　　注意: 大家可以看到，input控件中我加了一個 method 屬性，值為get 。 如果不加的話，請求文件的方式會被默認置為 'Post' ，但服務器對於站內的 json，js后綴文件發起請求被視為不安全。（這是我自己的理解），所以將值設為get。

　　這也是很多同學們在配置好了本地數據文件后，combotree依然無法顯示內容的原因。

　 順便加上 Post 和 Get 的區別

　　1. get是從服務器上獲取數據，post是向服務器傳送數據。

　　2. get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內各個字段　　與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。

　　3. 對於get方式，服務器端用Request.QueryString獲取變量的值，對於post方式，服務器端用Request.Form獲取提交的數據。

　　4. get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，一般被默認為不受限制。但理論上，IIS4中最大量為80KB，IIS5中為100KB。

　　5. get安全性非常低，post安全性較高。但是執行效率卻比Post方法好。
　　建議： 　　1、get方式的安全性較Post方式要差些，包含機密信息的話，建議用Post數據提交方式；

　　2、在做數據查詢時，建議用Get方式；而在做數據添加、修改或刪除時，建議用Post方式；

　　(2)、異步加載

 

　　在介紹本地數據加載的時候，我們沒有談到數據源的數據格式，現在我說明一下。格式為json，屬性有id,test,children。當然，id和test的屬性你可以自定義。下面是異步加載的js代碼。

 

 

$(function () {
        $('#selDepartmentFrom').combotree
            ({ url: '../Views/DownLoad.aspx?ExportType=getDepartment',
                valueField: 'id',
                textField: 'text',
                required: true,
                editable: false,
                onClick: function (node) { 
                     JJ.Prm.GetDepartmentUser(node.id, 'selUserFrom');
                }, //全部折疊
                onLoadSuccess: function (node, data) {
                    $('#selDepartmentFrom').combotree('tree').tree("collapseAll"); 
                }
        });

  });

 

　　(3)、后台代碼

 

/// <summary>
        /// 獲取部門
        /// </summary>
        private void GetDepartment()
        {
            string result = string.Empty;
            //949表示領導級別的查看權限  不是領導的只能查看本部門信息
            var loginUserInfo = AuthCommon.GetUserOUInfo();
            if (AuthCheck.CheckOperator(949, "EffectPage") == DicCheckOperator.Invalid)
                result= AuthCommon.GetOUJsonByOUID(loginUserInfo.OUID);
            else
                result = AuthCommon.GetOUJson();

            Response.ContentType = "text/json;charset=UTF-8;";
            Response.Write(result);
        }

　　以json的格式返回，GetOUJson() 這個是我獲取部門的方法 ，由於 是調用別人的webservice，所以，代碼就不寫了。但數據格式是 id,text,children

　　children中的屬性值依然是id,text,children。

 

　　至於 如何將List<T>轉成json，大家可以在百度下。

 

　　(4)、combotree實現部門下拉列表的效果如下：

 

　　

 

　　關於 combotree 在.net中的異步加載，網上資料不大好找，希望這篇博客對大家有用。歡迎轉載。我是jerry 百靈。

　　記得頁面中別忘記引用  jquery.js 和  jquery.easyui.min.js  ，對了，還有easyui.css。