• JSTree树的使用总结


    第一:jstree.js 插件的的引用

    页面:(加载tree的页面)

    js Code
    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的方法,即:

    加载js Code
     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中

    controller Code
     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()方法

    Code
     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.递归思想:递归包含很多相同的步骤(或解决方法、途径),理解本质原理有点困难。与循环相似,但又包括无限不确定循环,这是循环无法体现的优势。

  • 相关阅读:
    MapInfo 文件解析
    XML 序列化与反序列化
    GPS定位RTK解决方案
    JS遍历OCX方法
    Oracle 11g的日志路径
    临时表空间
    Oracle Stream 同步数据
    通过merge语句完成表数据同步
    处理机调度
    特征选取方法PCA与LDA
  • 原文地址:https://www.cnblogs.com/lei2007/p/2129628.html
Copyright © 2020-2023  润新知