您的位置：首页 > 产品设计 > UI/UE

使用vue框架实现部门大区二级联动

2017-11-02 09:30 411 查看
最近项目用到vue.js，研究了半天，用vue写了一个部门大区的二级联动，发现工具真是好用，比以前少了很多代码，记录下来也方便自己以后查阅，下面是代码
<script type="text/javascript">
$(function(){
loadfirst(0);
});

function sub(id){
loadfirst(id);
}

function loadfirst(pid){
$.ajax({
type:"post",
url:"testurl.action?pid="+pid,
dataType:"json",
success:function(data){
//id为0时为父类
               if(pid==0){
vm.mcs=data;
}else{
vm2.mcs=data;
}
}
});
}
</script>
</head>
<body>
<div id="sel"  v-cloak>
//部门，第一个select框
 <select id="dqsel" >
<option>-请选择-</option>
<option v-for="mc in mcs" v-bind:value="mc.id" @click="sub(mc.id)">{{mc.name}}</option>
</select>
//大区，第二个select框
<select id="bmsel">
<option>-请选择-</option>
<option v-for="mc in mcs" v-bind:value="mc.id">{{mc.name}}</option>
</select>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#dqsel',
data:{
mcs : [],
}
});

var vm2 = new Vue({
el:'#bmsel',
data:{
mcs : [],
}
});
</script>
//测试类
public class test {
private int id;			//主键

private String name;	//名称
private int pid;		//父id,当为0时是顶级父类

public int getId() {
return id;
}
public String getName() {
return name;
}
public int getPid() {
return pid;
}
public void setId(int id) {
this.id = id;
}
public void setName(String name) {
this.name = name;
}
public void setPid(int pid) {
this.pid = pid;
}
}




testurl查询的是pid为从页面传过去的值的集合，第一次是0，查询的是所有顶级父类，第二次会根据第一次select框选中的id到后台查询数据库中pid为该id的集合，三级联动以此类推PS：发现空格和Tap缩进区别好大，习惯用tap缩进，复制到编辑器直接乱。以后要注意
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                Vue.js
                                                二级联动
                                                java
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航