EasyUI是用ul和li标签来达成树形结构的重组的,3个ul可正是父节点,li作为树形结构的子节点,而li标签里面嵌套的ul标签又足以视作父节点,不断的双重从而抵达完毕复杂树形结构的功能。

写在眼下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 必须引用的css文件 -->
<link rel="stylesheet" href="/static/js/easyui/themes/default.css"/>
<link rel="stylesheet" href="/static/css/module.css"/>

<!-- 引入公用js文件 -->
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/easyui/jquery.easyui.min.js"></script> 
<title>easyui tree的使用</title>
</head>
<body>
    <ul class="easyui-tree">
        <li>红楼梦
            <ul>
                <li>第1回  甄士隐梦幻识通灵   贾雨村风尘怀闺秀</li>
                <li>第2回  贾夫人仙逝扬州城   冷子兴演说荣国府</li>
                <li>第3回  托内兄如海荐西宾   接外孙贾母惜孤女</li>
                <li>第4回  薄命女偏逢薄命郎   葫芦僧判断葫芦案</li>
                <li>第5回  贾宝玉神游太虚境   警幻仙曲演红楼梦</li>
            </ul>
        </li>
        <li>水浒传</li>
        <li>三国演义
            <ul>
                <li>第001回  宴桃园豪杰三结义 斩黄巾英雄首立功</li>
                <li>第002回 张翼德怒鞭督邮 何国舅谋诛宦竖</li>
                <li>第003回 议温明董卓叱丁原 馈金珠李肃说吕布</li>
                <li>第004回 废汉帝陈留践位 谋董贼孟德献刀</li>
                <li>第005回 发矫诏诸镇应曹公 破关兵三英战吕布</li>
            </ul>
        </li>
        <li>西游记</li>
    </ul>
</body>
</html>

jQuery多级列表树插件基于Bootstrap,以轻松和高雅的点子来展示一些承继树结构,如视图树、列表树等。

永利开户送38元体验金 1
这是1个最简便的树形结构图,你能够随心所欲的改动嵌套的ul,li。下边包车型客车案例将展现假使从远程加载树形结构的节点。

实用Bootstrap树形菜单特效插件Bootstrap Tree
View,非常不利的Bootstrap插件,未来游人如织Bootstrap制作的页面都需求此成效,此插件须求Bootstrap三版本以及jQuery
2.0极以上版本援救,支持广大参数自定义功效,颜色、背景观、Logo、链接等,依旧很科学的。

<body>
    <ul class="easyui-tree" id="tree" url="tree_data.json">
    </ul>
</body>

切实职能请暂且移步:

此处本身省略掉了head标签底部的内容,因为那在那之中的剧情和前多个案举例出一辙的,本案例并未额外的加多css,js文件和附加的js代码。你只要求增加你的url地址就行了,你的json数据定义应类似于:

好了,话不多说,开整。

[
    {
        "id":"1",
        "text":"北京",
        "children":[
            {
                "id":"2",
                "text":"朝阳"
            },{
                "id":"6",
                "text":"东城",
                "children":[
                    {
                        "id":"8",
                        "text":"王府井"
                    },{
                        "id":"9",
                        "text":"西单"
                    }
                ]
            },{
                "id":"7",
                "text":"西城"
            }
        ]
    },{
        "id":"3",
        "text":"天津"
    },{
        "id":"4",
        "text":"上海" 
    },{
        "id":"5",
        "text":"深圳"
    }
]

需要用户能够急速查询到省市区的区域名称信息(给用户参谋,用于标准书写导入模板),并且以树形结构展示。

永利开户送38元体验金 2
笔者们第贰把要呈现的树形结构数据1遍性计划好,在壹对大括号[]内部包裹着大家想要浮现的数据,节点用花括号{}以键值对的款型提交,id即为各种节点的id,text则为各样节点展现的文字。当然了,笔者精通这种贰次性载入数据的措施是满意不断平日的劳作的,那么接下去我们看那一个案例是假设动态想节点增添子节点的。

最终效果浮现:

<body>
    <div style="margin-bottom: 10px;">
        <a href="javascript:void(0);" onclick="appendnodes()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加节点</a>
    </div>
    <div style="width:200px;height:auto;border:1px solid #ccc;">
        <ul id="tt" class="easyui-tree" url="fruit_data.json"></ul>
    </div>
</body>
<script type="text/javascript">
    function appendnodes() {
        var node = $("#tt").tree("getSelected");
        if(node) {
            var nodes = [{
                "id":"1",
                "text":"pear"
            },{
                "id":"2",
                "text":"grape"
            }];         
            $('#tt').tree('append', {
                parent:node.target,
                data:nodes
            });         
        }
    }
</script>

永利开户送38元体验金 3 

本条案例显示的是水果项目标树形图,加载的json字符串如下:

壹、 数据表结构 数据源为省市区地域消息表,该表为自关系结构。如图:

[{
    "id":0,
    "text":"Foods",
    "children":[{
        "id":1,
        "text":"Fruits",
        "children":[{
            "id":11,
            "text":"apple"
        },{
            "id":12,
            "text":"orange"
        }]
    },{
        "id":2,
        "text":"Vegetables",
        "state":"closed",
        "children":[{
            "id":21,
            "text":"tomato"
        },{
            "id":22,
            "text":"carrot"
        },{
            "id":23,
            "text":"cabbage"
        },{
            "id":24,
            "text":"potato"
        },{
            "id":25,
            "text":"lettuce"
        }]
    }]
}]

永利开户送38元体验金 4 

当您单击”增添节点”按键,会触发appendnodes函数,该函数首先判定你是否选中了某1节点,借使没选中则不坐管理。若选中某1节点,则向该节点追加子节点。关键的代码语句是:

2、前台页面

$('#tt').tree('append', {
    parent:node.target,
    data:nodes
}); 

永利开户送38元体验金,一.页面引进

永利开户送38元体验金 5
本条案例即便能够动态的扩张节点,不过本人清楚也许满意不断你的经常工作的,你想要与后台交互。上边包车型大巴是以Java为后台与EasyUi交互的事例。

<link rel="stylesheet" href="项目静态资源路径/bootstrap-treeview/css/bootstrap.css" rel="external nofollow" >
 <script type="text/javascript" src="项目静态资源路径/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
 <script type="text/javascript" src="项目静态资源路径/bootstrap/bootstrap.js"></script>
 <script type="text/javascript" src="项目静态资源路径/bootstrap-treeview/js/jquery.js"></script>
 <script type="text/javascript" src="项目静态资源路径/bootstrap-treeview/js/bootstrap-treeview.js"> </script>
<body>
    <div style="margin-bottom: 10px;">
        <a href="javascript:void(0);" onclick="appendnodes()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加节点</a>
    </div>
    <div style="width:300px;height:auto;border:1px solid #ccc;">
        <ul id="tt" class="easyui-tree" url="company_data.json"></ul>
    </div>
</body>
<script type="text/javascript">
    function appendnodes() {
        var node = $("#tt").tree("getSelected");
        if(node) {
            $.get("/drill/demo/wellInfo/tree","key="+node.text,function(data,status,xhr){
                $("#tt").tree('append',{
                    parent:node.target,
                    data:data.rows
                });
            },"json");
        }
    }
</script>

    @RequestMapping(value="/tree", method={RequestMethod.GET})
    public PageInfo tree(HttpServletRequest request) {
        String key = request.getParameter("key");
        PageInfo pageInfo = new PageInfo();
        List<Map<String, String>> rows = new LinkedList<Map<String, String>>();

        Map<String, String> e = new HashMap<String, String>();
        e.put("id",  "1");
        e.put("text", key+"子公司1");
        rows.add(e);
        Map<String, String> e1 = new HashMap<String, String>();
        e1.put("id", "2");
        e1.put("text", key+"子公司2");
        rows.add(e1);       

        pageInfo.setRows(rows);
        pageInfo.setTotal(rows.size());

        return pageInfo;
    }

二.页面展现区

本例子的html代码与上二个例证的无可比拟区别就是多了1个$.get(url,data,callback,dataType)以ajax交互的代码而已,在ajax请求成功调用回显函数的时候再追加子节点到父节点上。当然,小编的后台是透过Java的Spring
MVC框架传递回来的,小编那边并从未写@ResponseBody是因为在本人的Controller类已经写了@RestCotroller申明了,假如你的Controller类没有该申明请在您的措施上增添@ResponseBody注脚,那样Spring
MVC会自动将您的回来的多少转换为json格式,而不是跳转到视图。
关于自个儿封装的特别分页类,你也得以参照借鉴一下,终归那不是最注重的。

<!-- 省市区地域查询展示 -->
 <div class="container">
  <div class="row">
  <div class="col-sm-4">
   <h4>快捷搜索</h4>
   <!-- <form> -->
   <div class="form-group">
    <label for="input-search" class="sr-only">快捷搜索:</label>
    <input type="input" class="form-control" id="input-search" placeholder="请输入要查询的省市区名称信息..." value="">
   </div>
   **_ <!-- 该部分为复选框,用于丰富搜索体验,本文忽略
<div class="checkbox">
    <label>
    <input type="checkbox" class="checkbox" id="chk-ignore-case" value="false"/>
     忽略大小写
    </label>
   </div>
   <div class="checkbox">
    <label>
    <input type="checkbox" class="checkbox" id="chk-exact-match" value="false">
     准确匹配
    </label>
   </div>
   <div class="checkbox">
    <label>
    <input type="checkbox" class="checkbox" id="chk-reveal-results" value="false">
     显示结果
    </label>
   </div> -->_**
   <button type="button" class="btn btn-success" id="btn-search">搜索</button>
   <button type="button" class="btn btn-default" id="btn-clear-search">清除</button>
   <!-- </form> -->
  </div>
  <div class="col-sm-4">
   <h4>省市区名称层级树</h4>
   <div id="treeview-searchable" class=""></div>
  </div>
  <div class="col-sm-4">
   <h4>查询结果展示</h4>
   <div id="search-output"></div>
  </div>
  </div>
  </div>
public class PageInfo<T> {

    private int pageNum;

    private int pageSize;

    private List<T> rows;

    private Page<T> page;

    public PageInfo() {
        super();
    }

    public PageInfo(int pageNum, int pageSize) {
        super();
        this.pageNum = pageNum;
        this.pageSize = pageSize;
    }

    public void startPage() {
        page = PageHelper.startPage(pageNum, pageSize);
    }

    public long getTotal() {
        return page.getTotal();
    }

    public void setTotal(long total) {
        if(page == null) {
            page = new Page<T>();
        }
        page.setTotal(total);
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

    @JsonIgnore
    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    @JsonIgnore
    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

}

3.js 脚本

永利开户送38元体验金 6

$(function () {
  var defaultData;
   $.ajax({
    type: "post",
    url: "项目请求路径方法.json",
    dataType: "json",
    success: function (result) { 
    defaultData=result;
     var initSearchableTree = function() {
     return $('#treeview-searchable').treeview({
      data: defaultData,
      nodeIcon: 'glyphicon glyphicon-globe',
      emptyIcon: '', //没有子节点的节点图标
      //collapsed: true,
     });
     };
     var $searchableTree = initSearchableTree();
     $('#treeview-searchable').treeview('collapseAll', { 
     silent : false//设置初始化节点关闭
    });
     var findSearchableNodes = function() {
     return $searchableTree.treeview('search', [ $.trim($('#input-search').val()), { ignoreCase: false, exactMatch: false } ]);
     };
     var searchableNodes = findSearchableNodes();
     // Select/unselect/toggle nodes
     $('#input-search').on('keyup', function (e) {
     var str = $('#input-search').val(); 
     if($.trim(str).length>0){
      searchableNodes = findSearchableNodes();
     } else {
     $('#treeview-searchable').treeview('collapseAll', { 
      silent : false //设置初始化节点关闭
     });
     }
     //$('.select-node').prop('disabled', !(searchableNodes.length >= 1));
     });
    var search = function(e) {
      var pattern = $.trim($('#input-search').val());
      var options = {
      ignoreCase: $('#chk-ignore-case').is(':checked'),
      exactMatch: $('#chk-exact-match').is(':checked'),
      revealResults: $('#chk-reveal-results').is(':checked')
      };
      var results = $searchableTree.treeview('search', [ pattern, options ]);
      var output = '<p>' + results.length + ' 匹配的搜索结果</p>';
      $.each(results, function (index, result) {
      output += '<p>- ' + result.text + '</p>';
      });
      $('#search-output').html(output);
     }
     $('#btn-search').on('click', search);
     $('#input-search').on('keyup', search);
     $('#btn-clear-search').on('click', function (e) {
      $searchableTree.treeview('clearSearch');
      $('#input-search').val('');
      $('#search-output').html('');
      $('#treeview-searchable').treeview('collapseAll', {
      silent : false//设置初始化节点关闭
     });
     });

    },
    error: function () {
     alert("省市区地域信息加载失败!")
    }
   });
  });

三、后台首要代码 后台选用SpringMVC+Spring+Mybatis框架,
以下为Controller层代码

@ResponseBody
@RequestMapping(value = "/queryAreaInfo", method = { RequestMethod.POST }, produces = MediaType.APPLICATION_JSON_VALUE)
 public List<Object> queryAreaInfo() {
 List<AreaVO> areaInfo=new ArrayList<>();
 try {
 //获取缓存中的省市区信息(本项目直接从缓存中获取,也可以单独写方法到Service、Dao层查询)
 EcncSysConfig sysConfig = new EcncSysConfig();
 areaInfo = sysConfig.INIT_SYS_ECNC_AREAVO;
 } catch (Throwable e) {
 e.printStackTrace();
 }
 //盛放省份
 List<Object> result=new ArrayList<>();
 for (AreaVO areaVO : areaInfo) {
 Map<String, Object> map= new HashMap<>();
 if("2".equals(areaVO.getGrade())){
 map.put("text", areaVO.getName());
 //盛放地市
 List<Object> cList=new ArrayList<>();
 for (AreaVO cVO : areaInfo) {
  Map<String, Object> cMap=new HashMap<>();
  if (cVO.getParentId() != null && cVO.getParentId().equals(areaVO.getId())) {
  cMap.put("text", cVO.getName());
  //盛放区县
  List<Object> rList=new ArrayList<>();
  for (AreaVO rVO : areaInfo) {
  Map<String, Object> rMap=new HashMap<>();
  if (cVO.getId().equals(rVO.getParentId())) {
  rMap.put("text", rVO.getName());
  rList.add(rMap);
  }
  }
  cMap.put("nodes", rList);
  cList.add(cMap);
  }
 }
 map.put("nodes", cList);
 result.add(map);
 }
 }
 return result;
 }

总结

以上所述是小编给咱们介绍的Bootstrap
treeview达成动态加载数据并累加火速搜索功效,希望对大家具备帮助,倘若大家有别的疑问招待给小编留言!

你恐怕感兴趣的文章:

  • bootstrap插件treeview完成全选父节点下全数子节点和反选作用
  • JS树形菜单组件Bootstrap
    TreeView使用办法详解
  • Bootstrap树形菜单插件TreeView.js使用形式详解
  • 依据MVC伍和Bootstrap的jQuery
    TreeView树形控件(一)之数据协理json字符串、list集结
  • bootstrap-treeview自定义双击事件达成方式

相关文章