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) { }); }
才将问题解决。虽然没有找到原因,但是我想这可能和中文编码字符集有一定的关系。
聊以此文,抛砖迎玉,希望能为你的开发带来参考。