效果:
数据库设计:
使用的数据:
- 其中的字段,是跟据要生成的树节点的属性定义的。
- text:代表要显示的字段名称。
- state:是否是目录节点。
- iconCls:节点的图标是什么。
- url:跳转的链接。
生成的数据:
html代码:
<ul id ="tree"></ul>
JS代码:
<script type="text/javascript"> $(function () { $(‘#tree‘).tree({ url: ‘../Json/treejson.ashx‘, lines: true, /* // * 作用:加载所有数据 * onLoadSuccess: function (node, data) { //如果data有值 if (data) { //遍历data中的值 $(data).each(function (index, value) { //判断当前值得state是否为closed. //如果是则代表下面依然有值,然后根据此次的id值,进行加载数据 if (this.state == "closed") { $(‘#tree‘).tree(‘expandAll‘); } }); } },*/ //鼠标单击事件 onClick: function (node) { //获取是否有下一级目录,true为没有,false为有 var flag = $(‘#tab‘).tree(‘isLeaf‘,node.target); if (flag) { alert(node.url); } }, }); }) </script>
后台使用的/treejson.ashx代码:
using EasyUI.Tools; using System; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Web; namespace EasyUI.Json { /// <summary> /// treejson 的摘要说明 /// </summary> public class treejson : IHttpHandler { public void ProcessRequest(HttpContext context) { int id = 0; if (context.Request["id"] != "") { id = Convert.ToInt32(context.Request["id"]); } #region SQLHelper运行有问题,待改进,此时使用手动数据连接代码。 //SQLHelper运行有问题,待改进,此时使用手动数据连接代码。 DataTable dt = new DataTable(); string connectstring = ConfigurationManager.ConnectionStrings["ConString"].ToString() ; SqlConnection con = new SqlConnection(connectstring); con.Open(); SqlDataAdapter adp = new SqlDataAdapter("select id, text, state from Tb_category where pid = " + id + " ", con); adp.Fill(dt); con.Close(); #endregion string json = DatatableToJson.ToJson(dt);//将DataTable数据生成Json数据。 context.Response.Write(json); } public bool IsReusable { get { return false; } } } }
时间: 2024-10-21 19:22:06