JSTree树的使用总结
第一:jstree.js 插件的的引用
页面:(加载tree的页面)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/javascript" src="/Content/javascript/jsTree/jquery.cookie.js"></script>
2 <script type="text/javascript" src="/Content/javascript/jsTree/jquery.tree.js"></script>
3 <script type="text/javascript" src="/Content/javascript/jsTree/plugins/jquery.tree.contextmenu.js"></script>
4 <script type="text/javascript" src="/Content/javascript/jsTree/plugins/jquery.tree.cookie.js"></script>
5 <script type="text/javascript" src="/Content/javascript/jsTree/aqFloater.js"></script>
第二:
如果是tree是开窗显示的话,在父页面存放一个隐藏字段PID(向DB存储的),一个显示名称。如果是左右显示,即:在tree在一个页面,显示在另一页面,在同在一个iframe里面。
此时需要使用 PID==$!Request.ID 获取,加载页面时的条件查询。
第三:
在显示tree的页面加载时,调用相应controller的方法,即:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <table class="autoshow_div">
2 <colgroup>
3 <col width="300px" valign="top" />
4 <col width="90%" />
5 </colgroup>
6 <tr>
7 <td valign="top">
8 <div id="MuLuHtml">
9 </div>
10 </td>
11 </tr>
12 </table>
13 <script type="text/javascript">
14 $(function ()
15 {
16 $("#MuLuHtml").tree({
17
18 data:
19 {
20 async: false, //是否异步,打开一个节点的时候,数据还是否加载完成
21 cache: false,//缓存读取
22 opts: {
23 url: "GetMenuTree.aspx"//加载controller,注意,此controller没有也页面,(即:cancelview),作用:将调用jstree的参数传递过去
24 }
25 },
26
27 ............(还有很多代码,只是暂时我没使用,我的功能只需要实现获取文本值和ID即可)..........
28 ondblclk: function (NODE, TREE_OBJ)
29 {
30
31 TREE_OBJ.toggle_branch.call(TREE_OBJ, NODE);
32 TREE_OBJ.select_branch.call(TREE_OBJ, NODE);
33 //在父页面的隐藏字段,实际存储数据库的值
34 parent.jQuery("#FatherMenuId").val($(NODE).attr("zhujian"));
35 //将节点是的显示的文本值传到父页面$(NODE).find("a").eq(0).text()
36 parent.jQuery("#PmenuName").val($(NODE).find("a").eq(0).text());
37 parent.jQuery.fn.colorbox.close();
38 },
39
40 </script>
在controller中
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 public void GetMenuTree(int jiBie, int shangJiMuLuID, string rel, int flag)//这些参数js里面传递过来的,具体不用改动。(我的js又省略)
2 {
3 CancelView();
4 try
5 {
6 TreeHelper tree = new TreeHelper();//生成树的方法放到一个类里面
7 Response.Write(tree.GetJsTree("生成树的相应参数"));
8 }
9 catch
10 {
11 }
12
13 }
在treehelp 里面GetJsTree()方法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 #region
2
3 public string GetJsTree(表,主键,父ID, where条件,显示名称,跳转页面(可空""),父ID条件 (可空null),是否点选(选中1))
4 {
5 StringBuilder sbMuLu = new StringBuilder("");
6
7 foreach(获取数据遍历)
8 {
9
10 if(判断是否存在子节点)
11 {
12 判断一下是否是可以点选(根据传递过来的参数)
13 递归调用本身方法(GetTreeDetail(方法一样))
14 输出
15 }
16 else
17 {
18 输出
19 }
20
21
22 }
23
24 return sbMuLu.ToString();
25 }
总结:
1.JsTree非常强大,个人只是使用获取tree上的值。
2.递归思想:递归包含很多相同的步骤(或解决方法、途径),理解本质原理有点困难。与循环相似,但又包括无限不确定循环,这是循环无法体现的优势。