EasyUI DataGrid中动态改变Combobox值

开发笔记 专栏收录该内容
12 篇文章 0 订阅

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中的字段名需要和valueFieldtextField一一对应。

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动态填值本身的代码并不多,技术也并不复杂,只需要注意到上述提到的几个关键技术点。最重要的是要学会看文档,这样以后遇到新的问题才能更快地独立解决。

  • 0
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值