EasyUI DataGrid中动态改变Combobox值
EasyUI DataGrid中动态改变Combobox值
EasyUI帮助文档如何查询
下面以DataGrid文档为例,说明文档的使用方法。
该文档的链接为:EasyUI DataGrid中文文档。对于DataGrid数据网格
文档,该页分为以下几个部分:
- 数据网格(DataGrid)属性
- 列(Column)属性
- 编辑器(Editor)
- 数据网格视图(DataGrid View)
- 事件
- 方法
我们知道,一个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
方法。该方法的作用是:
- 调用6中的
beginEdit
方法使单元格处于可编辑状态 - 从后台返回数据,填充至
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控件分为以下步骤:
- 通过jQuery选择器获取相应的Editor
- 指定后台的url
- 通过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动态填值本身的代码并不多,技术也并不复杂,只需要注意到上述提到的几个关键技术点。最重要的是要学会看文档,这样以后遇到新的问题才能更快地独立解决。