(1), JeasyUI datagrid Combobox display textField value problem

(1), JeasyUI datagrid Combobox display textField value problem

 

Whether the field in the official datagrid Demo Row Editing in DataGrid is defined as follows, but many brothers and sisters of this Demo do not understand, and do not understand the difference between Combobox in Form and Combobox in datagrid.

 

1.      <th data-options="field:'productid',width:100,

2.                              formatter:function(value,row){

3.                                  returnrow.productname;

4.                              },

5.                              editor:{

6.                                  type:'combobox',

7.                                  options:{

8.                                      valueField:'productid',

9.                                      textField:'productname',

10.                                  method:'get',

11.                                  url:'products.json',

12.                                  required:true

13.                              }

14.                          }">Product</th>

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

 

1. Method One

According to the official Demo, the SQL database field productid definition is consistent with the official definition. The formatter of combobox specifies the anonymous function. The hidden field row.productname is the textField field. In this case, how to design SQL tables and views in the entity table?

According to the SQL paradigm, productname can be stored in a table to reduce the redundancy of the products table.

--产品类型
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', the server returns the view v_products json data to the front end, productname is hidden, the above is a method of SQL entity table, this method, you can also use virtual fields without entity productType.

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

 

2. Method 2:

If there are not many product types, the productType table is not needed. There are many similar application scenarios. Combobox is a small number of drop-down lists, and a large amount of data is more troublesome to use.

 

When we are using Form, Combobox is directly used and defined as:

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

It's OK, but in the datagrid, you can't use it like this, because the editor is free (disappeared) after the datagrid is finished editing, and the value of the valueField is still displayed in the current Cell table, but when you click the Cell again The editor came back when the table was displayed, so it was displayed correctly.

Haha, the first time you use jeasyui, you will feel this is weird. In fact, this is a normal phenomenon, that is, the Combobox displays OK when editing in the form, and the editing is ended. The editor's Combobox is free, but the Combobox in the Form will not be free. The display is correct.

 

If you know the reason, you can solve it. You can specify the display value of the related field in the Grid.afterEdit event, or specify the formatter to display its value in the Field.data-options.

However, the formatter has to write different codes for each field. In a large number of applications, the code is quite redundant.

 

Is there a way to make the formatter universal? We can output console.info(this) when calling the formatter function by tracking the formatter function; view this is actually pointing to the definition of the field, which contains the data structure we defined, then we can follow the formatter parameters (value, row, rowindex) do as follows to define a general comboboxFormatter: select the correct textField value according to the value.

 

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 ){

              //Return V value

              return values[i]['v'];

          }

// For float type fields, convert to integers and then compare

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

             return values[i]['v'];

          }

      }

  }

}

}

 

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