easyui-treegrid中做下拉框加载后台数据

需要是在treegrid树结构中, 每一行的某一列做成可编辑的下拉框, 选择了则直接更新该行数据的对应字段.

效果如:

这种就需要借助 formatter 来格式化这一列.

function myFormatter(value, row, index) {
    if(row){
        return '<input style="width:190px" class="easyui-combobox" '
        + 'name="testName" data-option="valueField:\'id\',textField:\'unitName\',url:\'test/getComboboxData.do\'"/>'
    }
    return '';
}

但是这样会发现无法让该列做成下拉框. 因为在 treegrid 和 datagrid中, 是不能在formatter中定义easyui组件的.需要在外面进行定义.

我们可以对 formatter的 <input>标签中增加一个样式 class. 然后获取该样式,在外面进行定义combobox

注意, 这个操作应该在 treegrid 加载完成后做,而不是在 $(function(){}) 页面加载完成后做. 故应在 treegrid 的 onLoadSuccess 事件中进行.

var treegridParams = {
  url: 'test/loadTreegrid.do?' 
  , idField: 'id'
  , treeField: 'name'
  , method: 'get'
  , toolbar :
        [
	 {text: '添加', iconCls: 'icon-add', handler:addFunction,id:'addProjectCost'}
    , {text: '修改', iconCls: 'icon-edit', handler: modCostNode}
    , {text: '删除', iconCls: 'icons-folder_delete', handler: delCostNode}
  ]
 
  , columns: [
    [
      {title: '列A', field: 'id', align: 'center', width: 180}
      , {title: '列B', field: 'name', align: 'center', width: 150}
      , {title: '列C', field: 'age', align: 'center', width: 200}  
    ]
  ]
    ,onLoadSuccess:function(row,data){
        //combobox初始化
        var selects = $(".testClass");
        $.each(selects ,function (index, ele) {
            var idVal = $(ele).attr("rowId"); //自定义绑定在该元素上的属性
            $(ele).combobox({
                url:'test/getComboboxData',
                valueField:'id',
                textField:'name',
                onChange:function (newValue,oldValue) {
                            //回显时也触发onChange,此处避免无必要的请求
                        var updateUrl = 'test/testUpdate.do?id=' + idVal+ '&value=' +newValue;
                        $.post(updateUrl, function(result) {
                            top.$.messager.show({
                                title:'提示'
                                ,msg:result.msg
                                ,timeout:2000
                                ,showType:'slide'
                            });
                        }, 'json');
                    }
            });
        });
    }
};

这样一来, 就在加载完树结构后, 发送请求把下拉框的数据也加载出来了.

对于在onchange中需要获取当前行的一些数据作为参数发送请求的话, 可以在 formatter 中,把 row 的一些参数作为 input 元素的一个属性, 这样就可以获取到对应的属性了.

function myFormatter(value, row, index) {
    if(row){
        var rowId = row.id;    //把row的一些字段绑定到该元素的自定义属性,方便使用
        return '<input style="width:190px" class="easyui-combobox" '
        + 'name="testName" rowId = '+ row.id+' />'
    }
    return '';
}

另外再提一个, 在该业务场景中, 该下拉框的数据是一样的,故没有必要加载每一个combobox都发送请求去获取. 可以在文档加载完后发送异步请求,用一个变量把数据存放起来,在定义combobox时使用data加载json数据

//施工单位
var selectDatas;

$(function() {
	//请求加载施工单位下拉列表
    $.post('test/getComboboxData.do', function(result) {
        selectDatas= result.data;
    }, 'json');
});

 $(#myCombobox).combobox({
                data:selectDatas , //直接加载json数据
                valueField:'id',
                textField:'name',
                onChange:function (newValue,oldValue) {
                     //省略....
                }, 'json');
                   
            });

本文到此结束