
这是树行结构的一个表视图 主要表达省份 市 以及区,这样做的目的呢,就是更加鲜明的表达出结构的用意 用来凸显实用化 简洁化 完美化 的这一部分。
- <div id="test12" class="demo-tree-more">div>
-
- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
- <legend>常规用法legend>
- fieldset>
- ,data1 = [{
- title: '江西'
- ,id: 1
- ,children: [{
- title: '南昌'
- ,id: 1000
- ,children: [{
- title: '青山湖区'
- ,id: 10001
- },{
- title: '高新区'
- ,id: 10002
- }]
- },{
- title: '九江'
- ,id: 1001
- },{
- title: '赣州'
- ,id: 1002
- }]
- },{
- title: '广西'
- ,id: 2
- ,children: [{
- title: '南宁'
- ,id: 2000
- },{
- title: '桂林'
- ,id: 2001
- }]
- },{
- title: '陕西'
- ,id: 3
- ,children: [{
- title: '西安'
- ,id: 3000
- },{
- title: '延安'
- ,id: 3001
- }]
- }]
这些呢,就是表明树行结构的代码,主用data 来表示其中的用意,title表示的就是省份 当然 在里面也可以包含chidren 再次声明一个title来表明其中的一个市级城市 也可以一直套用chidren 来套用这个,可以无线连接下去,表明其中的实用关系。
此图也是树行结构的图形 但是使用方法与前一种是完全不相同的结构 ,但是大致的意思是完全的相同,所以说二者选一的抉择,所谓换汤不换药的这种方式去表达同一种意思!
-
- <div id="test2" class="demo-tree">div>
- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
- <legend>手风琴模式legend>
- fieldset>
- tree.render({
- elem: '#test4'
- ,data: [{
- title: '优秀'
- ,children: [{
- title: '80 ~ 90'
- },{
- title: '90 ~ 100'
- }]
- },{
- title: '良好'
- ,children: [{
- title: '70 ~ 80'
- },{
- title: '60 ~ 70'
- }]
- },{
- title: '要努力奥'
- ,children: [{
- title: '0 ~ 60'
- }]
- }]
- ,accordion: true
- });