Ztree如何实现点击左边 + 号图标号后从数据库动态获取子节点数据，显示出来

最简单的办法，其实就是拼写字符串，你怎么拼出来 web页面的html内容的？？ 那么只需要按照 json格式拼出全部字符串即可。

可以参考 异步加载 Demo 中得到的数据（请利用 chrome 的调试工具进行跟踪调试）

如果对象比较复杂，那么可以在谷歌上搜索一下：“java json 输出” 会有很多教程和 lib 推荐

查出来排个序，显示的时候做个判断，是子节点的就加个缩进，出来就是个树。

再不你就狠一点，找个树的js，比如ztree，然后按照他需要的数据格式组织好数据，出来的也是个树，而且很漂亮

1首先在页面上有<ul/>标签

<ul id="tree" class="ztree"></ul>

2定义ztree的配置参数

var setting = {

//check属性放在data属性之后，复选框不起作用

check: {

enable: true

},

data: {

simpleData: {

enable: true

},

}

};

3获得ztree所要绑定的数据,可以使用静态数据也可以使用ajax获取的数据

a)Ztree的数据有两种格式,标准格式如下:

标准的 JSON 数据需要嵌套表示节点的父子包含关系

例如：

var nodes = [

{

name: "父节点1",

open:true,

children: [

{name: "子节点1"},

{name: "子节点2"}

]

}

];

b)简单数据格式如下(推荐使用):

简单模式的 JSON 数据需要使用 id/pId表示节点的父子包含关系，如使用其他属性设置父子关联关系请参考settingdatasimple内各项说明

例如：

var nodes = [

{id:1, pId:0, name: "父节点1"},

{id:11, pId:1, name: "子节点1"},

{id:12, pId:1, name: "子节点2"}

];

简单数据的id,pId,name,title都可以在setting的data中进行配置,指定相应的字段。

在setting的data中配置simpleData为enable:true即表示使用简单数据格式,不配置或配置为false则为标准数据格式

var setting = {

data: {

simpleData: {

enable: true

}

}

};

4初始化ztree生成树

$fnzTreeinit($("#tree"), setting, nodes);

第一个参数是<ul/>id选择的jquery对象,第二个参数是配置的setting,第三个参数是获取到的数据

aspnet mvc3 动态菜单实现方法如下：

1、查看代码

@{

ViewBagTitle = "Elixir ERP V10 Beta";

Layout = "~/Views/Shared/_LayoutUsercshtml";

}

<div class="main-container">

<div class="main-wrapper">

<div class="scroll-top">

<a href="#" class="tip-top" title="Go Top"><i

class="icon-arrow-up"></i></a>

</div>

<div class="left-bar merge-left">

<!-- SEARCH BAR -->

<!-- LEFT NAV -->

@section leftnav{

}

</div>

</div>

<div class="container">

</div>

</div>

2、菜单模型

using System;

using SystemCollectionsGeneric;

using SystemLinq;

using SystemWeb;

namespace ElixirModels

{

public class Menu

{

public Menu()

{

MenuItems = new List<MenuItem>();

}

public int Id { get; set; }

public string Name { get; set; }

public List<MenuItem> MenuItems { get; set; }

}

}

3、菜单项

using System;

using SystemCollectionsGeneric;

using SystemLinq;

using SystemWeb;

namespace ElixirModels

{

public class MenuItem

{

public int Id { get; set; }

public int UserName { get; set; }

public string Name { get; set; }

public string ActionName { get; set; }

public string ControllerName { get; set; }

public string Url { get; set; }

public Menu ParentMenu { get; set; }

}

}

4、导航模型结构

<div class="left-nav">

<ul class="side-navigation accordion"

id="nav-accordion">

<li><a href="#"><i

class="icon-home"></i>Home</a></li>

<li><a href="#"><i class="icon-list-alt"></i>User

Management</a>

<ul><li><a href="#"><i

class="icon-double-angle-right"></i>Create New User</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>Manage Users</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>View Users</a></li>

</ul>

</li>

<li><a href="#"><i

class="icon-table-2"></i>Employee Management</a>

<ul>

<li><a href="#"><i

class="icon-double-angle-right"></i>Employee Registration</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>Manage Employees</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>View Employees</a></li>

</ul>

</li>

<li><a href="#"><i class="icon-columns"></i>DMIT

Management</a>

<ul>

<li><a href="#"><i

class="icon-double-angle-right"></i>Scan Management</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>Report Generation</a></li>

</ul>

</li>

<li><a href="#"><i

class="icon-laptop"></i>Franchise Management </a>

<ul>

<li><a href="#"><i

class="icon-double-angle-right"></i>Franchise Registration</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>Franchise Fee Management</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>Franchise Account

Management</a></li>

</ul>

</li>

<li><a href="#"><i class="icon-font"></i>Customer

Management </a>

<ul>

<li><a href="#"><i

class="icon-double-angle-right"></i>Customer Registration</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>Manage Customer</a></li>

</ul>

</li>

<li><a href="#"><i

class="icon-cord"></i>Counseling Management</a>

<ul>

<li><a href="#"><i

class="icon-double-angle-right"></i>Add Counseling Session</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>Manage Counseling

Sessions</a></li>

</ul>

</li>

<li><a href="#"><i

class="icon-tools"></i>Accounts</a>

<ul>

<li><a href="#"><i

class="icon-double-angle-right"></i>Manage Income</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>Manage Expense</a></li>

</ul>

</li>

<li><a href="#"><i

class="icon-files"></i>Reports</a>

<ul>

<li><a href="#"><i

class="icon-double-angle-right"></i>Elxir Monthly Reports</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>Elixir Yearly Reports</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>Franchise Monthly

Reports</a></li>

<li><a href="#"><i

class="icon-double-angle-right"></i>Franchise yearly Reports</a></li>

</ul>

</li>

</ul>

</div>

对于zTree树控件，节点的默认提示信息title是节点的name，也就是默认显示节点的名称。你认真了解zTree,不难发现主要是key值在作祟：\x0d\\x0d\view sourceprint\x0d\1var setting = {\x0d\2data: {\x0d\3key: {\x0d\4title: "s"//这里的s表示节点内的s属性\x0d\5},\x0d\\x0d\这里的key内的title默认指向的就是name属性，或者为空，为空的时候也会默认为name属性。\x0d\针对这位朋友的问题，其实方法很多：\x0d\1、在后台构造属性\x0d\在ajax页面内从数据库拿到数据list过后通过new的形式给最终返回的json对象构造一个属性t出来。然后修改setting内key的title指向属性值为t即可。\x0d\返回的json对象数据为：\x0d\\x0d\view sourceprint\x0d\1var zNodes =[\x0d\2{ id:1, pId:0, name:"节点搜索演示 1", t:"节点提示信息1", open:true},\x0d\3{ id:11, pId:1, name:"关键字可以是名字", t:"节点提示信息2"},\x0d\4{ id:12, pId:1, name:"关键字可以是level", t:"节点提示信息3"}\x0d\5];\x0d\\x0d\修改setting内对应的key值\x0d\\x0d\view sourceprint\x0d\1var setting = {\x0d\2data: {\x0d\3key: {\x0d\4title: "t"//这里的s表示节点内的s属性\x0d\5},\x0d\\x0d\2、动态修改树节点的属性\x0d\当前台给zTree树对象赋值结束后获取所有树节点，然后逐个更新树节点的属性值，示例代码如下所示：\x0d\\x0d\view sourceprint\x0d\01$(document)ready(function () {\x0d\02$fnzTreeinit($("#treeDemo"), setting, zNodes);\x0d\03//获取树对象\x0d\04var treeObj = $fnzTreegetZTreeObj("treeDemo");\x0d\05//拿到所有树节点\x0d\06var nodes = treeObjgetNodes();\x0d\07//for循环逐个修改树节点属性\x0d\08for(var i = 0;i回答于 2022-12-11

使用java连接MySQL数据库与其他的数据库连接核心是一样的，如果说区别，那就是所需的驱动不一样。

工具/原料

MySQL、JDK

方法/步骤

1、首先需要安装好JDK（配置环境变量）,如图所示：

2、其次要安装好MySQL数据库，可以使用可视化Navicar For MySQL，如图所示：

3、最后通过代码进行连接。

（1）确定连接路径URL：

String url="jdbc:mysql://localhost(可以是本机IP地址):3306(端口号)/mysqltest(数据库名称)？"+"user=用户账号&password=用户密码&useUnicode=字符编码";

（2）加载驱动：

ClassforName("commysqljdbcDriver");

（3）连接，获取Connection对象

Connection conn=DriverManagergetConnection(url)

（4）可以通过conn对象检验连接与否。

以上就是关于Ztree如何实现点击左边 + 号图标号后从数据库动态获取子节点数据，显示出来全部的内容，包括:Ztree如何实现点击左边 + 号图标号后从数据库动态获取子节点数据，显示出来、读取数据库的数据 在页面生成树形结构（jsp）、Ztree中simpleData是怎么转换成标准ztree数组对象的等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！