MzTreeView(梅花雪)完全攻略

最近因公司需求，奉命在公司网站的后台加个权限控制的模块。因为早前有用过MzTreeView，觉得相当不错，可也不知道是哪门子出了鬼，当时我就是死 活想不起来关于此控件的任何信息，因此也无法在网络上搜索。没办法，只好硬着头皮在谷歌、百度上乱搜一通，倒不是没有成果，搜索引擎帮我找到一个命名为 “dtree”的控件，使用方法简单得让我惊诧不已，顿时将寻找梅花雪的初衷忘得一干二净了……正当我得意忘形之时，问题出现了，dtree极大程度的给 我泼了一盆冷水。因为树节点过多，造成假死的状况，大部分本该“穿戴”在节点身上的衣裳活脱脱的就变成裸体了，而且加载速度也没有达到我预期的期望值。意 识到性能问题，立刻搜索关于这个问题的解决方案，然而结果就是我找到了ｄｔｒｅｅ的致命递归(http://tech.ddvip.com/2009-03/1237891234112143.html )。

 

还是算了吧，看来dtree不是我的菜。还得再搜寻……

最后在糊里糊涂间找到了MzTreeView，来不及欢喜，便着手动工了……

（以上均属题外话，别着急，希望下面的文章能够帮到你。）

为了方便了解，我们姑且分几个步骤来说明。

首先，自然是在后台读取所有树节点。

/// <summary> /// 加载权限树 /// </summary> /// <returns></returns> public String LoadTree() { String sSql = "Select FuncID,isnull(SuperFuncID,0) as SuperFuncID,FuncName From CTL_Func_TBL"; DataTable table = ClsCommon.ExcuteDataTable(sSql); string nodes = ""; nodes = "var data = {};data['-1_0']='text:独辫子网站后台';"; foreach (DataRow dr in table.Rows) { nodes += "data[/'" + dr["SuperFuncID"].ToString() + "_" + dr["FuncID"].ToString() + "/'] = /'text:" + dr["FuncName"].ToString() + ";/';/r/n"; } nodes += "Using(/"System.Web.UI.WebControls.MzTreeView/");"; nodes += "var tree = new MzTreeView();"; nodes += "tree.dataSource = data;"; nodes += "tree.setJsDataPath(/"MzTreeView10/csdn/community/treedata//");"; nodes += "tree.setXmlDataPath(/"MzTreeView10/csdn/community/treedata//");"; //a.rootId="1"; nodes += "tree.autoSort=false;"; nodes += "tree.useCheckbox=true;"; nodes += "tree.canOperate = true;"; nodes += "document.write(tree.render());"; nodes += "tree.expandLevel(1);"; //展开所有节点 nodes += "tree.expandAll(0);"; return nodes; }

完了，将这个方法安放在Page_Load中去执行：

protected void Page_Load(object sender, EventArgs e) { if (Session["LoginName"] == null) { Response.Redirect("Admin_Login.aspx"); } if (Request.QueryString["ID"] != null) {//Edit//获得角色ID sID = Request.QueryString["ID"].ToString(); } if (!IsPostBack) { str = LoadTree(); // if (!String.IsNullOrEmpty(sID)) {//Edit//获取该角色所有权限（权限ID用逗号隔开） DataTable table = FuncManager.GetFuncsByRoleId(sID); String sChecked = ""; foreach (DataRow datarow in table.Rows) { sChecked += datarow["FuncID"].ToString() + ","; } //将所有值赋给隐藏控件hfChecked hfChecked.Value = sChecked; } } }

第二，在客户端编写相应的方法

<mce:script language="javascript" type="text/javascript"><!-- //SetCheckItems用来设置选中节点，即从数据库读取权限后，勾选相应的节点 function SetCheckItems(items) { var nodes = tree.nodes; // var IDs=items.split(","); for(i=0;i<IDs.length;i++) { //alert(IDs[i].toString()); for(var j in nodes) { if(nodes[j].id==IDs[i]) { nodes[j].check(true); } } } } //PushCheckItems用来获取当前需要保存的（已勾选）的所有节点集，惟逗号隔开 //此方法将在提交按钮的OnClientClick事件中执行 function PushCheckItems() { var IDs=""; var nodes = tree.nodes; for(var i in nodes) { if(nodes[i].checked){ text = nodes[i].text; IDs +=nodes[i].id + ","; } } // var hf=document.getElementById("hfChecked"); hf.value = IDs; } // --></mce:script>

第三，前后我们已经后台获取到节点及该角色所包含的权限集，最后我们将在客户端给予显示。

<!--注意：以下这段代码可以放在body标签内的任何一个地方，你希望树在何处展示就放何处--> <mce:script language="JavaScript" type="text/javascript"><!-- <%=str%> //这里的str是在后台定义的一个 string,他包含了从数据库取出来的所有节点信息,只能够写这里 setTimeout("SetCheckItems(document.getElementById('hfChecked').value)",1000); // --></mce:script>

至此，目的达到了。当然，以上所有的一切均需要在MzTreeView控件的基础上实现。

<mce:script type="text/javascript" language="javascript" src="MzTreeView10/jsframework.js" mce_src="MzTreeView10/jsframework.js"></mce:script>

 

转自：http://www.cnblogs.com/xvqm00/archive/2010/04/26/1721173.html