一、引入bootstrap viewtree相關js css
<link rel="stylesheet" href="../css/common/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="../css/common/bootstrap-treeview.css" rel="stylesheet" /> <script type="text/javascript" src="../js/common/vue.js" ></script> <script type="text/javascript" src="../js/common/jquery-1.9.0.min.js?d=<%=ZZDJ_BUFF_VERSION %>"></script> <script type="text/javascript" src="../js/common/bootstrap.min.js" ></script> <script type="text/javascript" src="../js/common/bootstrap-select.js" ></script> <script type="text/javascript" src="../js/common/bootstrap-treeview.js" ></script>
二、子組件 只需要接收父組件傳過來的查詢字典的接口
1. 頁面（本人用的jsp）
<!--樹形菜單模態框 -->
<script type="text/x-template" id="y-treeview">
<y-panel width="1020px" height="800px" :buttons="buttons">
<div id="BELONG_TRADE_SX" style="width:1000px;border-radius:4px;">
<div style="padding-bottom: 20px; margin-left: 30px;" class="y-row-base">
<y-input-label :value="belongTradeQueryText" placeholder="輸入關鍵字進行查詢" @f-change="hander" class="gut" width="84%"> </y-input-label>
<y-btn @f-click="initBelongTradeTree" class="query_btn">查 詢</y-btn>
</div>
<div style="width:945px; height: 600px;margin-bottom:20px;background-color: white;overflow:hidden;margin-left:30px;float:left;">
<div id="belongTradeTree" class="" style="border: 0;width:100%;height: 95%;background-color: white;margin:0 auto;overflow:auto;"></div>
</div>
</div>
</y-panel>
</script>
2.子組件的js
Vue.component('y-treeview',{
template:"#y-treeview",
mixins : [ y_mixin ],
props:{
dictUrl:String,
dictLazyLoadUrl:String,
},
data:function(){
return {
belongTradeQueryText:String,
buttons:[{
name:"保存",
fun:function(){
this.saveData();
}
},{
name:"關閉",
fun:function(){
this.destroy();
}
}]
}
},
mounted:function(){
this.initBelongTradeTree();
this.belongTradeQueryText = "";
},
watch:{
},
methods:{
hander:function(obj){
this.belongTradeQueryText = obj.value;
},
saveData:function(){
var belongTradeArray = $('#belongTradeTree').treeview(true).getSelected();
if(belongTradeArray.length == 0){
this.jAlert("請選擇至少選擇一項！")
return false;
}
//子組件向父組件傳值調用父組件的方法
this.$emit('f-saveDict',belongTradeArray[0].text,belongTradeArray[0].id);
this.$emit('f-closeModal');
},
destroy:function(){
this.$emit('f-closeModal');
},
getTreeData:function(data){
$('#belongTradeTree').treeview({
// bootstrap2 : false,
// showTags : true,
levels : 1,
// showCheckbox : true, //是否多選
// showIcon: false, //是否顯示節點圖標
// nodeIcon: "glyphicon glyphicon-folder-close", //所有節點的默認圖標
// checkedIcon: "glyphicon glyphicon-check", //節點被選中時顯示的圖標 String
// collapseIcon: "glyphicon glyphicon-folder-close", //節點被折疊時顯示的圖標 String
// expandIcon: "glyphicon glyphicon-folder-open", //節點展開時顯示的圖標 String
// emptyIcon: "glyphicon", //當節點沒有子節點的時候顯示的圖標 String
// highlightSearchResults: true, //是否高亮顯示被選中的節點 Boolean
multiSelect: false, //是否可以同時選擇多個節點 Boolean
// selectedIcon: "glyphicon glyphicon-stop", //節點被選中時顯示的圖標
// checkedIcon:"glyphicon glyphicon-ok",
// loadingIcon:"",//懶加載過程中顯示的沙漏字符圖標
data: data,
lazyLoad:this.loaddataForBelongTrade
});
},
initBelongTradeTree:function(){
var _this = this;
var url = _this.dictUrl;
jQuery.ajax({
url :url,
type : 'POST',
data : {
NAME : _this.belongTradeQueryText
},
dataType : 'json',
success : function(data) {
if(data != null){
this.getTreeData(data);
}
}.bind(this),
});
},
loaddataForBelongTrade:function(node,func){
var _this = this;
var url = _this.dictLazyLoadUrl;
$.ajax({
type:"POST",
url: url,
data: {pId:node.id},
dataType : 'json',
success:function(data,status){
func(data);
}
});
}
}
})
三、父組件調用
1.頁面
<script type="text/x-template" id="y-name-message">
<y-tab>
<y-title title="名稱信息"></y-title>
<div class="flex-between gut">
<y-label need label="所屬行業"></y-label>
</div>
<div class="flex-between" style="width:539px">
<y-input style="width:500px" column="BELONG_TRADE" table="T_ZZDJ_CORP" :p-value = "belongTradeName" disabled></y-input>
<input type="button" value="" v-on:click="openBelongTradeModel" class="btn_search" />
</div>
<y-treeview v-show="ifShowTree" @f-closeModal="closeBelongTradeModel" @f-saveDict="saveBelongTrade" :dict-url="dictUrl" :dict-lazy-load-url = "dictLazyLoadUrl"></y-treeview>
</y-tab>
</script>
2.父組件js
Vue.component("y-name-message", {
template : "#y-name-message",
mixins : [ y_mixin ],
props : {
corp : Object,
corpOther : Object,
},
data : function() {
return {
belongOrgName:"",
belongTradeName:"",
ifShowTree:false,
dictUrl:this.getPath()+'/CommonDictController/findIndustryScopeForBootstrap.do',
dictLazyLoadUrl:this.getPath()+'/CommonDictController/findIndustryScopeLazyLoad.do',
}
},
watch:{
belongTradeId:function(newVal,oldVal){
this.belongTradeId=newVal;
}
},
computed : {
belongTradeId:function(){
this.corp["BELONG_TRADE"];
var _this = this;
$.ajax({
url:_this.getPath()+"/CommonDictController/findBelongTradeName.do",
type:"POST",
async:false,
data:{
belongTrade:_this.corp["BELONG_TRADE"]
},
success:function(data){
if(null != data) {
if(data.rows.length>0){
_this.belongTradeName = data.rows[0].BELONG_TRADE_NAME;
}
}
},error:function(){
_this.jAlert("信息查詢失敗，請稍后再試");
}
})
}
},
mounted:function(){
var _this = this;
$.ajax({
url:_this.getPath()+"/CommonSelfController/findDjjg.do",
type:"POST",
async:false,
data:{
govcode:_this.govCode
},
success:function(data){
if(null != data) {
if(data.rows.length>0){
_this.belongOrgName = data.rows[0].NAME;
var belongOrg = data.rows[0].ORG_ID;
_this.corp.BELONG_ORG = belongOrg;
}
}
},error:function(){
_this.jAlert("信息查詢失敗，請稍后再試");
}
})
},
methods : {
handlerData:function(obj){
this.log(obj)
this.commit(obj);
},
openBelongTradeModel:function(){
this.$root.mask=true;
this.ifShowTree=true;
},
closeBelongTradeModel:function(){
this.$root.mask=false;
this.ifShowTree=false;
},
saveBelongTrade:function(text,id){
this.corp.BELONG_TRADE = id;
this.belongTradeName = text;
}
}
})
四、接口返回數據格式（數據已做刪減）
[{ "id": "6001", "pId": "", "text": "農、林、牧、漁業", "selectable": false, "checkable": false, "lazyLoad": true, "levelName": "1", "leaf": true, "choose": "0" }, { "id": "6100", "pId": "", "text": "采礦業", "selectable": false, "checkable": false, "lazyLoad": true, "levelName": "1", "leaf": true, "choose": "0" }, { "id": "6919", "pId": "", "text": "電力、熱力、燃氣及水生產和供應業", "selectable": false, "checkable": false, "lazyLoad": true, "levelName": "1", "leaf": true, "choose": "0" } ]
五、展示效果
