(1)、JEasyUI 之 Datagrid的Combobox 显示 textField 值的问题

(1)、JEasyUI 之datagrid的Combobox显示textField值的问题

官方的datagrid Demo Row Editing in DataGrid 中field 是否如下定义，但是这样的Demo很多兄弟姐妹看不太懂，并没有理解Form中的Combobox与datagrid中Combobox的区别。

<th data-options="field:'productid',width:100,
formatter:function(value,row){
return row.productname;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'productname',
method:'get',
url:'products.json',
required:true
}
}">Product</th>

---------------------------------------------------------------------------

1.方法一

按照官方Demo转换成SQL数据库字段productid定义与官方一致，combobox 的 formatter 指定了匿名function 里面隐藏字段row.productname就是textField字段，这样的话在实体表中如何设计SQL表与视图呢？

根据SQL范式，productname可以创建一个表来存储，以减少products表的冗余。

--产品类型 create table productType ( productid varchar(10) primary key, productname varchar(40) )

GO --产品表 create table products( itemid varchar(10) PRIMARY KEY, productid varchar(10) not null, listprice float, unitcost float, attr1 varchar(30), --外键 CONSTRAINT [FK_products_productType] FOREIGN KEY ( [productid] ) REFERENCES [productType] ( [productid] ), )

GO create view v_products as --产品表视图 select itemid, p.productid, t.productname, listprice, unitcost,attr1 FROM products p inner join productType t on(p.productid = t.productid)

url:'xxx/q=xxx',服务端返回视图v_products json数据到前端，productname是隐藏的，以上是SQL实体表的一个种方法，此种方法，还可以使用虚拟字段不要实体productType。

--------------------------------------------------------------------------------------------------------------------------------------------------

2、方法二：

如果产品类型少量不多的话，就可以不需要productType 表，类似应用场景也很多，用Combobox也就是少量的下拉列表，大量的数据用起来也比较麻烦。

我们在使用Form中，Combobox直接使用定义成:

data-options="valueField: 'k',textField: 'v',data: [{k:'1',v:'xxx类型'},{k:'2',v:'xxxxx类型'}]"，

就OK,但是在datagrid中，就不能这样使用了，是因为datagrid在结束编辑状态后，editor也就free(消失了)，当前Cell表格里面还是显示为valueField的值，但当你再次点击此Cell表格时editor又回来了所以显示正确。

哈哈，初次使用jeasyui就会觉得这很奇葩，其实这是正常现象，也就是Combobox在表格中编辑时显示OK，结束编辑，editor 的Combobox free了，而Form中的Combobox是不会free的，它显示也正确。

原因知道了，就可以解决它，可以在Grid.afterEdit事件指定相关字段的显示值，或是在Field.data-options指定formatter显示其值。

但是formatter又得每个字段写不同的代码，在大量应用的时候，代码挺多的又很冗余。

有没有一种方法让formatter通用，我们可以通过跟踪formatter function，在调用时输出 console.info(this); 查看this其实就是指向field的定义，里面有我们定义的数据结构，那么就可以根据formatter的参数(value,row,rowindex)做如下定义一个通用的comboboxFormatter：根据value来选择正确的textField值。

function comboboxFormatter (value, row, rowIndex){

if (!value){

return value;

}

var e = this.editor;

if(e && e.options && e.options.data){

var values = e.options.data;

for (var i = values.length - 1; i >= 0; i--) {

//0 {k: "1", v: "test"}

var k = values[i]['k'];

if (value == k ){

//返回V值

return values[i]['v'];

}

// 对于float类型字段，转换成数取整，再比较

else if (!isNaN(k) && !isNaN(value) && Math.floor(parseFloat(k))===Math.floor(parseFloat(value)) ) {

return values[i]['v'];

}

使用时， data-options="field:'productid', formatter: comboboxFormatter , ....."。

Ok，如有不懂，请联系QQ: 348677065。

(1)、JEasyUI 之 Datagrid的Combobox 显示 textField 值的问题