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

View Code

 

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

View Code

　　以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。