EasyUI DataGrid中动态改变Combobox值

EasyUI DataGrid中动态改变Combobox值

EasyUI帮助文档如何查询

下面以DataGrid文档为例，说明文档的使用方法。

该文档的链接为：EasyUI DataGrid中文文档。对于DataGrid数据网格文档，该页分为以下几个部分：

1. 数据网格(DataGrid)属性
2. 列(Column)属性
3. 编辑器(Editor)
4. 数据网格视图(DataGrid View)
5. 事件
6. 方法

我们知道，一个DataGrid是由Column、Editor、DataGrid View组成的，其中Editor的使用不常见。

1中的属性就是整个网格整体的属性，比如网格样式、分页、数据加载源等。

2中的属性定义了和网格中每一列相关的属性，比如列标题、宽度、跨度、排序规则等。

当我们希望DataGird中能包含其他控件，比如Text、Combobox、Datebox等，就需要为指定单元格添加3也就是Editor。

4为数据显示窗体。默认情况下，该窗体处于不可编辑状态，所以无法修改窗体中的值。如果希望编辑内容，需要调用6中的方法。单元格内容可编辑的前提是该Column设置了Editor，Editor是什么类型的，4处于可编辑状态时就会显示对应类型的控件。

5为DataGrid所有支持的事件，不管是编辑Editor产生的还是Column产生的事件，都归到5中。5中的事件定义会通过事件参数描述该事件的发生源。

6为DataGrid所有支持的方法，不管是操作Editor的方法还是加载数据的方法，都归到6中。

对DataGrid的都有操作都通过下面的方法调用：

$('#dg').datagrid('load', {
    code: '01',
    name: 'name01'
});

上述代码中，$('#dg')为DataGrid的id选择器，load为6中的方法，code name为6中load方法的参数。所以想知道能对DataGrid做哪些操作，查看6中的方法再用上述代码调用即可。

需要监听DataGrid的相关事件可对5中的事件进行JS方法绑定。比如想实现双击某行开始单元格的编辑，即可通过如下代码实现：

var $dgv=$("#datagrid");

onDbClickRow = function onDblClick(index, row) {
    $dgv.datagrid('selectRow', index);
    $dgv.datagrid('beginEdit', index);
    $dgv.datagrid('unselectAll', index);

    var url = "recvHeaderController.do?getUnits&skuId=" + row.skuId;
    var ed = $dgv.datagrid("getEditor", {index: index, field: "goodsUnit"});
    if (ed) {
      $.ajax({
        async: true,
        cache: false,
        type: 'POST',
        url: url,// 请求的action路径
        error: function () {// 请求失败处理函数
        },
        success: function (data) {
          var d = $.parseJSON(data);
          if (d.success) {
            $(ed.target).combobox('loadData', d.obj);
          }
        }
      });
    }
  }

上述代码的作用双击DataGrid行时调用onDblClick方法。该方法的作用是：

1. 调用6中的beginEdit方法使单元格处于可编辑状态
2. 从后台返回数据，填充至combobox类型的Editor中

为DataGrid添加Combobox

通过上述方法查询文档可知，要想在DataGrid中添加Combobox，首先得在当前列添加一个combobox类型的Editor，如下所示：

$('#recvDetail').datagrid({
    //......
    columns: [[{
        field: 'goodsUnit',
        title: '收货单位',
        width: 80,
        editor: {
            type: 'combobox',
            options: {
                panelHeight: 'auto',
                valueField: 'skuId',
                textField: 'goodsUnit'
            }
        }
    }]]
})

当前列如果添加了editor:{}中的内容，那么该列在可编辑状态下就会显示成相关类型的控件，这里为combobox类型。options为该控件的配置信息，其中valueField对应着候选列表的value值，如果绑定了skuId，那么后台返回的JSON对象中，skuId值便会赋值给每一条记录的valueField。同理goodsUnit会赋值给textField，其表示在界面上显示的值。

从后台获取Combobox数据

从后台获取数据并加载到combobox控件分为以下步骤：

1. 通过jQuery选择器获取相应的Editor
2. 指定后台的url
3. 通过AJAX查询数据并加载至combobox
   • 通过reload方法向后台查询
   • 通过loadData方法加载后台查询到的数据

通过以上步骤可知，从后台查询数据后再加载有两种方法，reload方法的调用格式为：

$(ed.target).combobox('reload', url);

需要注意的是，后台返回的数据类型为JSON字符串！后台代码如下所示：

//RecvController.java
@RequestMapping(params = "getUnit")
@ResponseBody
public List<RecvEntity> getUnit(String skuId) {
    return recvService.findAll(skuId);
}

//RecvEntity.java
class RecvEntity {
    private String skuId;
    private String goodsUnit;
    //getter and setter
}

主要注意，RecvEntity中的字段名需要和valueField和textField一一对应。

loadData方法的调用格式为：

var url = "recvHeaderController.do?getUnits&skuId=" + row.skuId;
    var ed = $dgv.datagrid("getEditor", {index: index, field: "goodsUnit"});
    if (ed) {
      $.ajax({
        async: true,
        cache: false,
        type: 'POST',
        url: url,// 请求的action路径
        error: function () {// 请求失败处理函数
        },
        success: function (data) {
          var d = $.parseJSON(data);
          if (d.success) {
            $(ed.target).combobox('loadData', d.obj);
          }
        }
      });
    }

该种调用方式需要先用$.ajax方法发送查询请求，再把JSON对象填充到combobox。对应的后台方法如下：

//RecvController.java
@RequestMapping(params = "getUnits")
@ResponseBody
public AjaxJson getUnits(String skuId) {
    AjaxJson ajax = new AjaxJson();
    ajax.setSuccess(true);
    List<RecvEntity> details = recvService.findAll(skuId);
    ajax.setObj(details);
    return ajax;
}

//RecvEntity.java
class RecvEntity {
    private String skuId;
    private String goodsUnit;
    //getter and setter
}

小结

综上可知，DataGrid的Combobox动态填值本身的代码并不多，技术也并不复杂，只需要注意到上述提到的几个关键技术点。最重要的是要学会看文档，这样以后遇到新的问题才能更快地独立解决。