(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 , ....."