zoukankan      html  css  js  c++  java
  • (1)、JEasyUI 之 Datagrid的Combobox 显示 textField 值的问题

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

     

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

     

    1. <th data-options="field:'productid',100,
    2.                         formatter:function(value,row){
    3.                             return row.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.方法一

    按照官方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 , ....."

  • 相关阅读:
    人工智能第二次作业
    人工智能第一次作业
    第二次作业
    文芳梅(130702010015)第二次作业
    文芳梅(130702010015)第一次作业
    计算机辅助教育第一次作业
    AI实验报告
    第二次作业 第二章课后
    第一次AI作业解答
    骆光玉136201010490第二次作业
  • 原文地址:https://www.cnblogs.com/jfyes/p/7411860.html
Copyright © 2011-2022 走看看