省市县三级联动

这是一个自己编写,在自己项目中使用的代替树形结构的三级联动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,异步加载的形式填充数据,请在服务器上打开,如果本地打开的话请用火狐浏览器。

点击下载哦,请狂点

如果感兴趣,或者有好建议请留言。如果使用不成功,也请留言,帮您搞定


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章