(1)、JEasyUI 之 Datagrid的Combobox 显示 textField 值的问题
来源:互联网 发布:计算机编程天才 编辑:程序博客网 时间:2024/06/10 07:11
(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值的问题
- (1)、JEasyUI 之 Datagrid的Combobox 显示 textField 值的问题
- datagrid combobox的显示值的问题
- 解决:easyui中的datagrid详情展开,combobox的级联操作,以及修复combobox总是显示value值的问题
- jeasyui的datagrid初始查询条件
- jeasyui插件扩展datagrid-filter的改善
- Easyui-datagrid的column的type是combobox时,对valueField,textField,及formatter函数return值的理解
- 关于easyui的datagrid与combobox结合使用的问题
- jeasyui的树递归
- 带有ComboBox细胞的DataGrid
- Ext.form.ComboBox显示错误的问题
- struts标签之<s:textfield>的取值问题
- ExtJs中的TextField显示另外的值
- Yii textField显示session里面的值
- 翻页的combogrid 调用setValues,不显示textField的问题
- TextField的输入问题
- ComboBox的ToolTip显示
- ComboBox的ToolTip显示
- Win7 BitLocker加密须了解的五件事
- Android消息循环机制
- 并发操作子线程
- spaarkr 的使用
- Bayesian Network
- (1)、JEasyUI 之 Datagrid的Combobox 显示 textField 值的问题
- [日推荐] 『好奇心日报』满足你所有的好奇心
- Robotframework(2):创建RF第一条可执行的用例
- 8-23 DAIRY
- 连通性问题(connectivity)
- java之static关键字总结
- 马拉车算法
- 类加载与 Java主类加载机制解析
- 关系型数据库与非关系型数据库的区别