zTree + iFrame优化查询体验
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异步提交的代码