zTree + iFrame优化查询体验

Posted 2022-06-04 bochao

         1. 当我们的查询只有文本框和下拉框并且可查询内容过多时，难以找到能最大化查询效率的分类，并且UI相对简单朴素。这时候我们可以用一张树表，清晰明了地展示数据的分类，并在iframe的页面中摆出查到的内容。效果如下， 当我们选中家具类时，表格中只会显示二级分类属于家具类的数据

         

         

 

         2. 那该怎么实现呢？首先页面分成两部分，左边是我们的主页，右边是iframe加载的另一个页面。主页中呢我们用到了zTree，所以我们要在第一行的libs里导入‘zTree‘这个库。首先我们要有数据，数据来源可以是数据库，也可以是js导入。比如这里我们用js:

 1 var zNodes =[
 2     id:1, pId:0, name:"办公用品", open:true, // 默认打开
 3     id:101, pId:1, name:"家具类",
 4     id:102, pId:1, name:"办公设备",
 5     id:103, pId:1, name:"家电类",
 6     id:10101, pId:101, name:"文件柜",
 7     id:10102, pId:101, name:"办公桌",            
 8     id:10103, pId:101, name:"办公椅",
 9     id:10104, pId:101, name:"沙发",
10     id:10105, pId:101, name:"会议桌",
11 ];    

 

         然后我们在页面的div标签中，给zTree分配一块区域：

         

 

         然后在<script>标签中，用js加载这棵树

1 $(document).ready(function()
2     var t = $("#tree");
3     t = $.fn.zTree.init(t, setting, zNodes);
4 );

 

         现在呢，你就能看到一棵树，当然这还远远不够

 

         3. 现在我们需要iframe里加载一个html页面于是我们再用一个div：

         

 

          src是已经具有基本查找功能的页面，即在输入框或者下拉框中输入后，已经能从数据库中获得条目并在表格中显示的网页。此时我们需要知道，当我们点击树表中的树时，我们所能捕获并利用的变量是啥，答案就是我们刚才自己写的json。我们看到在加载树的时候我们可以设置setting，所以我们在setting中得设置回调一个点击事件，把树节点的id赋值到iframe页面中查找的输入框内，代码如下：

 1 // 主页框架
 2 var win = $("#mainFrame")[0].contentWindow;
 3 // 树结构初始化加载
 4 var setting = view:selectedMulti:false,data:key:title:"title",simpleData:enable:true,
 5     callback:onClick:function(event, treeId, treeNode)
 6         tree.expandNode(treeNode);
 7         win.$(‘button[type=reset]‘).click();
 8         if (treeNode.id.length == 1) 
 9             win.$(‘#classId‘).val(treeNode.id);
10          else if (treeNode.id.length == 3) 
11             win.$(‘#sortId‘).val(treeNode.id);
12          else if (treeNode.id.length == 5) 
13             win.$(‘#categoryId‘).val(treeNode.id);
14         
15         win.page();
16     
17 

         这里#后面是我的三级分类，根据id的长度来判断父子节点。在iframe中我把这三个框给隐藏了，不然显得很冗余

 

         4. 最后这里我再贴上我自己从数据库抓取树表，然后ajax异步提交的代码