当前位置: 首页 > 工具软件 > MzTreeView > 使用案例 >

MzTreeView 控件使用

金皓君
2023-12-01

1.首先导入js文件

<script language="JavaScript" src="js/MzTreeView10.js"></script>

2.action中查询出树的相关内容

   需要在action中在数据库中查询出当前节点的名称和id,以及父节点的id,拼凑成下面的格式传给jsp。

3.jsp页面进行显示

jsp中只需要在body中写一个js块

<body>

    <script language="JavaScript">

        var tree = new MzTreeView("tree");       //定义一个树(注意,这里的参数tree和后面的tree.nodes必须相同,否则显示不出)

        tree.setIconPath("/images/");                 //定义树的图片的目录

         tree.nodes['-1_1'] = "text:检验信息管理; ";
         tree.nodes['1_2'] = "text:外购产品检验组; ";
         tree.nodes['1_3'] = "text:最终产品检验; ";
         tree.nodes['1_4'] = "text:复检情况; ";
         tree.nodes['1_5'] = "text:办公辅助; ";
         tree.nodes['1_6'] = "text:基础信息管理; ";
         tree.nodes['1_7'] = "text:部门意见与建议; ";
         tree.nodes['1_8'] = "text:系统意见与建议; ";
         tree.nodes['2_11'] = "text:子文件夹测试一; ";
         tree.nodes['2_12'] = "text:子文件夹测试二; ";

        <!--示例如上,给树添加内容,-1为根节点,_后面的是子节点,依次显示-->

         document.write(tree.toString());

    <script>

</body>

 

4.查看了网上一些文章

发现tree.nodes['-1_1'] = "text:检验信息管理; "; 这个地方还可以定义很多内容

比如url,例如tree.nodes['-1_1'] = "text:检验信息管理; url:/action.do"; 这样点击这个节点的时候会进行跳转到action.do

比如method,例如tree.nodes['-1_1'] = "text:检验信息管理; method:check()";这样点击这个节点的时候会触发check()方法。

5.顺便提一下也可以在MzTreeView10.js这个js文件中实现各种方法。

 

 

 类似资料: