Easyui Combotree問題及其相關

Easyui的setValue方法無效

今天在開發項目的時候，遇到第一個很奇怪的問題：EasyUI的setValue方法無效。

$('#department_parent').combotree('setValue', row.id);

 AjaxForProvince();
 $('#province').combobox('setValue', row.province_id);
 AjaxForCity(row.province_id);
 $('#city').combobox('setValue', row.city_id);
 AjaxForZone(row.city_id);
 $('#zone').combobox('setValue', row.zone_id);
 AjaxForDepartment(row.zone_id);
 $('#department_parent').combotree('setValue', row.id);

　　

上面的邏輯很簡單，就是想在頁面上加載完省份，加載市縣級，加載完市縣級加載區域級，加載完區域級，加載部門。

但是問題是，當我點擊的時候，省份，市縣級，區域級都能正常加載，但是加載到combotree的時候，總是閃一下正確的值后，框就變空了。

當時也不知道什么問題，網上搜索也沒看到別人遇到過這種情況。即便是嘗試將row.id改成普通的數字，仍然不行。

既然沒有前車之鑒，那只能自己分析了。

既然在加載的時候，combotree會正確加載下拉列表，說明AjaxForDepartment這個方法是調用成功的。

但是加載到setValue的時候，會閃一下沒了。就說明問題出在這里。並且極有可能和加載順序或者說加載時長有關。

為什么呢?

由於js執行是單線程，但是在combotree內部我們無法得知其執行順序，所以極有可能是

$('#department_parent').combotree('setValue', row.id);

先行執行，而AjaxForDepartment(row.zone_id);后續執行，這樣就會造成上述問題。

抱着試試看的心態，更改代碼如下：

AjaxForProvince();
 $('#province').combobox('setValue', row.province_id);
 AjaxForCity(row.province_id);
 $('#city').combobox('setValue', row.city_id);
 AjaxForZone(row.city_id);
 $('#zone').combobox('setValue', row.zone_id);
 AjaxForDepartment(row.zone_id);
 setTimeout(function () { setTreeValue(row) }, 300);
 
  var setTreeValue = function (row) {
         $('#department_parent').combotree('setValue', row.id);
     }

然后運行，一切正常。

Combotree下拉綁定，顯示undefined 

第二個問題，是ComboTree綁定的時候，顯示下拉項為undefined的問題。

我是利用combotree的推薦的綁定方式進行加載的：

$('#province').combotree({
url: '../handler/PermissionService.ashx?method=GetProvince',
method: 'post',
valueField: 'id',
textField: 'title',
onSelect: function (node) {
AjaxForCity(node.id);
}
});

這看上去似乎並沒有什么問題，但是在我的機器上無論如何都無法顯示出准確的數據出來。

最后被迫使用了另外一種方法：

var AjaxForDepartment = function (zoneID) {
ajax('../handler/PermissionService.ashx?method=GetDepartments&zoneID=' + zoneID, function (res) {
$("#department_parent").combotree({
data: eval(res)
});
}, function (a, b, c) { });
}

才將問題解決。雖然沒有找到原因，但是我想這可能和中文編碼字符集有一定的關系。

聊以此文，拋磚迎玉，希望能為你的開發帶來參考。