IT工程師數位筆記本

//只需要提供包含數據的select標簽即可，該select默認隱藏，chosen依據該數據構建新的html結構<select name="dept" style="width:150px;" id="dept" class="dept_select" multiple="multiple"> <option value="部門1">部門1</option><option value="部門2">部門2</option><option value="部門3">部門3</option></select>//chosen初始化$(function(){$('.dept_select').chosen({no_results_text:'沒有結果',allow_single_deselect:true});});

//基于vue解析的html結構<select data-placeholder="選擇發件人" class="chosen-select form-control" tabindex="-1" multiple="multiple"><template v-for='key in zmailTree'><option v-for='item in key.userList' value='{{item.id}}'>{{item.name}}</option></template></select>//vue實例var zmailForm=new Vue({el:'#zmail-form',ready:function(){var that=this;var getToken=$.cookie('dcValidate');$.ajax({ type:'get',async:false,url:'后臺數據接口地址',dataType: "json", success: function(msg){that.$set('zmailTree', msg);}});},data:{zmailTree:[]}});//通過vue獲取后臺數據，將json數據賦值給zmailTree這個數組，它是含有層級結構的，我們不需要輸出層級結構，只需要輸出里面的人員就行了，但是實踐中發現一個人問題，數據解析了，鼠標點擊輸入框出現的下拉菜單中并沒有出現我們剛才解析出來的數據，我們需要VUE的這個方法Vue.nextTick，延遲回調chosen初始化代碼：//延遲初始化chosenVue.nextTick(function () {$('#zmail-select').chosen({no_results_text: '沒有找到該結果',// 當檢索時沒有找到匹配項時顯示的提示文本search_contains: true //從任意位置開始檢索});});

$('select.chosen-select').on('change', function(){// 用戶改變了選擇，快快處理});

//延遲初始化chosenVue.nextTick(function () {$('#zmail-select').chosen({no_results_text: '沒有找到該結果',// 當檢索時沒有找到匹配項時顯示的提示文本search_contains: true //從任意位置開始檢索});$('#zmail-select').on('change', function(){//用戶改變了值之后作如下處理var treeObj = $.fn.zTree.getZTreeObj("zmail-tree");treeObj.expandAll(true);//展開所有樹節點treeObj.checkAllNodes(false);//清空所有樹節點$("#zmail-select option:selected").each(function(i,obj){var node = treeObj.getNodeByParam("id", obj.value, null);treeObj.checkNode(node, true, true);});});});//輸入框的值只要發生了改變我們就獲取樹的目標id，展開所有子節點，并且清空樹的所有選中狀態，因為輸入框中的值不止一個因此我們要做一個循環，使用ztree的方法getNodeByParam（根據給定的參數查找節點）和checkNode（控制對應節點的選中或者非選中操作）

//樹的html結構,不要忘記寫ztree這個class，否則不顯示數據<ul class="ztree" id="zmail-tree"></ul>//樹初始化代碼js//人員樹基本設置var zmailTreeSet={view:{dblClickExpand:false},async:{enable:true,type:'get',url:'服務器數據地址',},data:{simpleData:{enable:true,idKey:'id',pIdKey:'parentId'},key:{children:'userList'}},check:{enable:true,chkboxType:{'Y':'s','N':'s'}},callback:{onCheck:zmailCheck}};function zmailCheck(){//這里處理輸入框的數據}//初始化人員樹$.fn.zTree.init($('#zmail-tree'),zmailTreeSet);

var zmaObj = $.fn.zTree.getZTreeObj(treeId);//getZTreeObj插件方法，獲取目標IDvar zmaNodes = zmaObj.getCheckedNodes(true);//getCheckedNodes獲取選中的所有節點，此處為集合

$("#zmail-select option").each(function(j,obj){obj.selected='';});

for(var i = 0;i < zmaNodes.length; i++){if(typeof(zmaNodes[i].userList) == 'undefined'){//如果該節點的userList屬性為空說明不是父節點，存取它的值，如果不為空則跳過//不寫判斷，直接使用勾選的樹的數據的ID來進行選擇，使其屬性select改為selected$("#zmail-select option[value="+zmaNodes[i].id+"]")[0].selected='selected';}}

//循環外更新select列表$("#zmail-select").trigger('chosen:updated');