随笔 - 394 文章 - 0 评论 - 946 阅读 - 143万

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内部我们无法得知其执行顺序，所以极有可能是

1	`$('#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) { });
}