这是一个自己编写,在自己项目中使用的代替树形结构的三级联动demo,可用于地域,行政区划,部门人员等联动的结构的展示。
demo功能:
- 多级节点选取
- 父级选取后,子级禁用
- 优雅的样式
- 良好的交互体验
- 两用请求方式随您选用
先上效果图:
父级选中后,子级禁用
使用方法:
调用方法有两种,方法稍有不同:
1、静态展示,可用过对cities.json的数据的操作而控制展示的内容。
dataTaken.getData('cities.json')
.success(function (response) {
angular.forEach(response[$scope.tabs[0].pid[index]], function (value) {
$scope.tabs[1].content[value.text] = '';
$scope.tabs[1].pid[value.text] = value.id;
})
})
2、让后台的小伙伴帮你写接口,异步请求调用,返回数据填入其中。
dataTaken.getData(90)
.success(function (response) {
angular.forEach(response, function (value) {
$scope.tabs[0].content[value.text] = '';
$scope.tabs[0].pid[value.text] = value.id;
})
})
只要$scope.tabs填充正确的数据,demo就能正确显示
ATTENTIONS:
因为demo用的angular,异步加载的形式填充数据,请在服务器上打开,如果本地打开的话请用火狐浏览器。
如果感兴趣,或者有好建议请留言。如果使用不成功,也请留言,帮您搞定