当前位置:编程问答 > asp >

一步一步asp.net_ajax类别Tree生成

 关于类别树的多级是一个刚接触ajax和多级类别很头痛的问题,针对那种商品种类繁多,级别层次多更是麻烦的问题,去年刚学asp.net,实验室的同学曾经这样做过,递归sql,现在看了惊心动魄.........呃...........

虽然实现了类别多级的问题这样带来的后果确实无穷无尽的.............
递归查询,和双循环嵌套的执行sql语句没什么区别了......
这样带来的是严重的性能问题..
现在重新做这些东西,我想到了2个方案,第一个:
 

针对数据比较少的多级菜单,我们可以通过数据库一次查询出来所有记录,然后通过程序进行递归算法,进行数据的转化.

第二种:

就是数据库设计的时候,设计成多级别的菜单,每次加载通过ajax,一点一点展开(每一次展开都ajax请求下一级的数据),这样避免的递归带来的性能损失,而且实现简单方便,非常适合大数据量的时候,但是,一次只能显示一级,每次都要ajax请求下一级.

  由于后台管理,第一次就按照第一种方案来设计:
首先,要设计好数据库,方便以后两种方式扩展,

这样设计,主要是考虑方便前台后台的扩展,FId字段是一个为了方便前台查询而设计的,这样设计的好处就是如果查询比如顶级菜单下的所有产品,只需要根据模糊查询前缀匹配,就能把所有的产品都查询出来,设计的字段还是有点小,IsLeaf是为了判断是否是叶子节点,BelongSid父级id,

前台代码:
 
 

1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  
   3:  <html xmlns="http://www.w3.org/1999/xhtml">
   4:  <head>
   5:      <title>产品类别管理</title>
   6:      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   7:      <link href="../css/demo.css" rel="stylesheet" type="text/css" />
   8:  
   9:      <script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
  10:      <script src="../scripts/miniui/miniui.js" type="text/javascript"></script><link href="../scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
  11:      <link href="../scripts/miniui/themes/icons.css" rel="stylesheet" type="text/css" />   
  12:  
  13:  </head>
  14:  <body>
  15:  
  16:  <div class="mini-toolbar">
  17:      <h1>产品类别管理</h1>
  18:     
  19:  <div class="mini-panel" title="产品类别管理" iconCls="icon-add" style="width:100%;height:500px;"
  20:      showToolbar="true" showCollapseButton="true" showFooter="true"
  21:  >
  22:      <!--toolbar-->
  23:      <div property="toolbar">
  24:      </div>
  25:      <!--footer-->
  26:      <div property="footer">
  27:     
  28:      </div>
  29:      <!--body-->
  30:       
  31:            <ul id="tree1" class="mini-tree" url="Data/GetProductInfo.ashx?method=GetProductType" style="width:100%;height:100%;padding:5px;"
  32:          showTreeIcon="true" textField="text" idField="id"   contextMenu="#treeMenu"
  33:         
  34:          >       
  35:      </ul> 
  36:        <ul id="treeMenu" class="mini-menu" style="display:none;" onbeforeopen="onBeforeOpen">
  37:         
  38:        <!--  <li name="move" iconCls="icon-move" onclick="onMoveNode">移动节点</li>-->
  39:          <li class="separator"></li>
  40:  
  41:        
  42:                  <li name="addNode" onclick="onAddNode" iconCls="icon-add">插入节点</li>        
  43:         
  44:          <li name="edit" iconCls="icon-edit" onclick="onEditNode">编辑节点</li>
  45:          <li name="remove" iconCls="icon-remove" onclick="onRemoveNode">删除节点</li>       
  46:          <li name="cancel" iconCls="icon-cancel" onclick="onCancel">取消</li>
  47:    <li class="separator"></li>
  48:      </ul>
  49:  
  50:  
  51:  </div>
  52:  
  53:  <br /><br />
  54:     
  55:  </div>
  56:     
  57:  
  58:      <script type="text/javascript">
  59:          mini.parse();
  60:          var AddTpye="add";
  61:  
  62:          function onCancel(e){
  63:          var tree=mini.get("tree1");
  64:          var node=tree.getSelectedNode();
  65:           tree.isExpandedNode (node);
  66:        
  67:          }
  68:          function onAddBefore(e) {
  69:            AddType="before";
  70:          AddItem(e);
  71:   &nbs

补充:Web开发 , ASP.Net ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,