Datagrid嵌入combotree控件后,在编辑时候,能正常显示combo的text,但完成编辑后,却显示combo的value了,很不爽。
如何做到显示实际的text呢?
查了相关资料,有很多方法,如:可以从combotree的选择事件后修改,或者从行编辑完成后修改,最后总结出,通过单元格的formatter事件修改最简单,方法就是先将combotree的所有数据后台输出到前台作为一个json数组,对于数据量大的应用此方法不推荐,不过作为表格中combotree的需求,一般都是诸如部门,权限等有限对象,基本属于轻量级应用,所以此方法可行。
先贴上前台代码:
<script type="text/javascript">
//初始化部门列表,此处的$departlistJson是后台处理好的JSON数据通过模板替换
var $departList = <{$departlistJson}>;
//通过传入一个ID获取对应name
function getDeptText(unitID){
var unitName = null;
$.each($departList, function(id, item){
if(unitID == item["id"]){
unitName = item["name"];
}
})
return unitName;
}
//因为数据库保存的多个ID是用,分开的,所以此处需要先解析成数组便于处理
function getDeptName(ids){
var idArray = ids.split(',');
var strnName = '';
//遍历
for(var i=0; i<idArray.length; i++){
strnName += getDeptText(idArray[i]);
if( i<(idArray.length-1) ){
strnName += ',';
}
}
return strnName;
}
// 单元格的formatter 函数
function formatDepartname(val, row, index){
var res;
res = getDeptName(val);
return res;
}
</script>
通过这样处理,无论编辑,还是显示,都可以正常显示字段内容,见下图改造后的效果:
后台输出JSON就比较简单了:
//$deptlist 是数据库查询的部门列表,编码成JSON
$deptlistJson = json_encode($deptlist);
//替换模板页的对应变量
$this->assign('departlistJson', $deptlistJson);