模拟select样式，自定义下拉列表为树结构

效果图如下：

首先，需要用到的库jQuery，zTree（官网API：http://www.treejs.cn/v3/api.php）

注意：因为zTree是基于jQuery的，所以应该先引入jQuery的文件，然后再引入zTree的文件（包括js和css文件还有图片）

向下的小三角图片，也可以使用自己的图片，这个图片就是下文css代码中的tir.png

具体代码如下：

HTML：

 <div class="select-wrapper">

          <div class="select-box" onclick="showTree()">

                  <div class="select-content" ></div>

                   <div class="select-icon "></div>

          </div>

          <div class="select-options">

                 <div id="selectTree" class="ztree"></div>

           </div>

 </div>

CSS：

.select-wrapper{

    position:relative;

}

.select-box{

    width:200px;

    height:30px;

    border:1px solid #999;

    background-color: #fff;

}

.select-box:hover{

    border-color:#777;

}

.select-content{

    float: left;

    height: 28px;

    line-height: 28px;

    padding:0  5px;

    white-space:nowrap;

    text-overflow:ellipsis;

}

.select-icon{

    float: right;

    width:30px;

    height:30px;

    background: url('../../../../images/tir.png') no-repeat center right;

}

.select-options{

    display: none;

    min-width:200px;

    border:1px solid #999;

    background-color: #fff;

    position:absolute;

    padding:5px;

    top:30px;

    left:;

}

JS：

 1         var isShow = false;  //标识树结构的弹出框是否是显示的

 2         var zNodes = [];

 3         var treeObj = null;  //存储树结构的所有数据，是在初始化树后，对树的数据进行获取得到的

 4         var setting = {

 5             view: {

 6                 dblClickExpand: false,

 7                 selectedMulti: false, //设置是否能够同时选中多个节点,此处设置为 否

 8                 showIcon: true,  //设置是否显示节点图标

 9                 showLine: false,  //设置是否显示节点与节点之间的连线

10                 showTitle: true  //设置是否显示节点的title提示信息

11             },

12             data: {

13                 simpleData: {

14                     enable: true, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）

15                     idKey: "id",  //设置启用简单数据格式时id对应的属性名称

16                     pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构

17                 }

18             },

19             edit:{

20                 drag:{

21                     autoExpandTrigger: false,

22                     isCopy : false,

23                     isMove : false, //拖拽节点按下 Ctrl 或 Cmd 键表示 copy; 否则为 move

24                     prev: false,

25                     next: false,

26                     inner: false

27

28                 },

29                 enable: true,

30                 renameTitle:'Rename',

31                 removeTitle:'Remove',

32                 showRemoveBtn:false,  //是否显示移除按钮，默认为true ，即显示

33                 showRenameBtn:false   //是否显示重命名按钮，默认为true ，即显示

34

35             },

36             check: {

37                 enable : false

38             },

39             callback: {

40                 onClick:onClick,   //定义节点单击事件回调函数

41             }

42         };

43 //点击树结构的某个节点

44         function onClick(e,treeId,treeNode){

45             $('.select-content').css('width','auto');

46             $('.select-content').text(treeNode.name);

47             var width = parseFloat($('.select-content').css('width'));

48             width + 30 > 200 ? (width = width + 30) : width = 200;

49             $('.select-box').css("outline","none").css('width',width + 'px');

50             $('.select-content').css('width','calc(100% - 30px)');

51             $('.select-options').css("display","none");

52         }

53 //获取树结构的数据，在点击选择框时执行

54         function getTreeData(){

55             $.ajax({

56                 type:"get",

57                 url:"statics/test/selectTree.json",

58                 success:function(data){

59                     zNodes = data.data;

60                     $.fn.zTree.init($("#selectTree"), setting, zNodes);

61                     treeObj = $.fn.zTree.getZTreeObj("selectTree");

62                     console.log(data.info);

63                 },

64                 error:function(data){

65                     alert('get data error');

66                 }

67             });

68         }

69 //点击选择框时触发

70         function showTree(){

71             isShow = !isShow;  //点一下选择框，弹出树，再点一下选择框，弹出树隐藏

72             if(isShow){

73                 $('.select-box').css("outline","#acacac solid 1px");//设置选择框的描边样式，模拟select框获取焦点时的效果，不需要的可以删掉

74                 $('.select-options').css("display","block");

75                 zNodes.length == 0 && (getTreeData());//如果没有获取过树结构的数据，就获取树结构的数据；如果已经获取过树结构的数据，就不执行获取树结构数据的函数

76                 $(document).off().on('click',function(e){  //绑定click事件，当弹出框已经弹出时，点击除弹出框以外的区域，弹出框消失

77                     var parent = $(".select-wrapper");   // 设置目标区域

78                     if(!parent.is(e.target) && (parent.has(e.target).length == 0)){//如果当前点击区域不是目标区域或者点击区域不是目标区域的子代元素，就将弹出框隐藏

79                         $('.select-box').css("outline","none");

80                        $('.select-options').css("display","none");

81                         isShow = false;

82                     }

83                 });

84            }else{

85                 $('.select-box').css("outline","none");

86                $('.select-options').css("display","none");

87             }

88        }

自己模拟的树的json数据：（zTree有两种数据结构，这是其中一种）

 {

   "status": "200","info": "success",

   "data": [

     {"id":1,"pId":0,"name":"总流程总流程总流程总流程总流程总流程总流程总流程总流程总流程","open":true},

     {"id":11,"pId":1,"name":"流程1总流程总流程总流程总流程总流程总流程总流程总流程总流程总流程","_id":1},

     {"id":111,"pId":11,"name":"流程2"},

     {"id":1111,"pId":111,"name":"流程5"},

     {"id":11111,"pId":1111,"name":"流程12"},

     {"id":11111,"pId":1111,"name":"流程13"},

     {"id":1112,"pId":111,"name":"流程6"},

     {"id":11121,"pId":1112,"name":"流程14"},

     {"id":11122,"pId":1112,"name":"流程15"},

     {"id":11123,"pId":1112,"name":"流程16"},

     {"id":1113,"pId":111,"name":"流程7"},

     {"id":112,"pId":11,"name":"流程3"},

     {"id":1121,"pId":112,"name":"流程8"},

     {"id":1122,"pId":112,"name":"流程9"},

     {"id":113,"pId":11,"name":"流程4"},

     {"id":1131,"pId":113,"name":"流程10"},

     {"id":1132,"pId":113,"name":"流程11"}

   ]

 }

巴特西

模拟select样式，自定义下拉列表为树结构

最新文章

热门文章