为表格添加下拉框的例子官网上就有,但如果下拉框的数据是从数据库请求的。需要有一些注意的地方。

首先希望实现的效果如下图所示:

表格初始数据为空,点击查询后获得表格表格数据,但下拉框的数据是在对应的formatter函数中单独向服务器中请求的。

大概的步骤如下:

1.初始化表格

                    gridLayout =[{
defaultCell: { type: cells._Widget, styles: 'text-align: center;' },
cells: [
{ name: "WBS", field: "wbsCode", width: "40px"},
{ name:"配置名称",field:"configName",width:"80px"},
{ name:"设备名称", field: "equipName", width: "80px" },
{ name:"维修项目号", field: "mopNo", width: "60px" },
{ name:"维修项目名称", field: "mopName", width: "60px" },
{ name:"周期", field: "mlpCode", width: "40px" },
{ name:"负责人", field: "personName", width: "80px", formatter: formatterPersonCombobox},
{ name:"计划时间", field: "planDate", width: "80px" },
{ name:"备件/工具紧缺报警", field: "planDate", width: "80px" }
]
}]; storeGrid=new Memory();
dataStoreGrid=new ObjectStore({objectStore : storeGrid});
grid = new EnhancedGrid({
structure: gridLayout,
store: dataStoreGrid,
"class": "grid",
escapeHTMLInData: false,
noDataMessage: "没有维修项目数据" ,
plugins: {indirectSelection: {headerSelector:true, field: "isChecked",width:"40px", styles:"text-align: center;"}}
}, "gridDiv"
);
grid.startup();

2.填写下拉框对应的formatter函数

                    //创建表格中负责人对应的下拉框的函数
function formatterPersonCombobox() {
var personId="";
var selectPerson=new ComboBox({
label: "Combo",
style: "width: 80px;",
placeHolder: "请选择...",
searchAttr: "name" //这个属性不能少
});
request.get("utilSelectGetJsonAction.action?mode=comboBox&utilSelect.selectName=personSelect",{handleAs : "json"})
.then(function(data){
//返回的数据在data中,为数组对象形式
var storePerson = new Memory({data : data });
selectPerson.store=storePerson;//不能是Object类型的Store,好奇怪
selectPerson.startup();
});
selectPerson._destroyOnRemove = true;
return selectPerson;
}

这里需要说明的是request函数请求获得data后,在其对应的then方法里的代码实际上是最后执行的,即selectPerson.startup();是在return selectPerson;后执行的。

这就导致了不能将Combobox的初始化工作放在then里面写,即不能写成这样的代码

            function formatterPersonCombobox() {
var personId="";
request.get("utilSelectGetJsonAction.action?mode=comboBox&utilSelect.selectName=personSelect",{handleAs : "json"})
.then(function(data){
//返回的数据在data中,为数组对象形式
var storePerson = new Memory({data : data });
var selectPerson=new ComboBox({
label: "Combo",
style: "width: 80px;",
placeHolder: "请选择...",
store:storePerson,
searchAttr: "name" //这个属性不能少 });
});
selectPerson._destroyOnRemove = true;
return selectPerson;
}

上面的代码会导致在Combobox被初始化之前就实际返回了selectPerson,从而发生错误。

现在还有一个问题就是所有的Combobox实际上请求的是同一数据源,如果是多条记录,则向服务器发出了多个没必要的get请求,这有待解决。

解决的办法是这样的,因为表格的数据是通过点击查询按钮才获得的。

所以可以在页面第一次加载时就请求下拉框对应的数据源

       //初始化负责人下拉框对应的数据源,即先服务器发出请求,存储在storePerson中,在随后的formatter中直接调用
var storePerson=new Memory({});
request.get("utilSelectGetJsonAction.action?mode=comboBox&utilSelect.selectName=personSelect",{handleAs : "json"})
.then(function(data){
storePerson = new Memory({data : data });
});

随后在formatter函数中直接调用即可,因为formatter函数需要点击查询按钮才会执行,所以它会在storePerson = new Memory({data : data });  之后才执行:

                    //创建表格中负责人对应的下拉框的函数
function formatterPersonCombobox() {
var personId="";
var selectPerson=new ComboBox({
label: "Combo",
style: "width: 80px;",
placeHolder: "请选择...",
store:storePerson,
searchAttr: "name" //这个属性不能少
});
selectPerson._destroyOnRemove = true;
return selectPerson;
}

dojo:如何为表格添加从数据库获得存储的下拉框的更多相关文章

  1. Selenium处理页面---弹窗、表格、鼠标悬停、frame、下拉框、上传文件

    一.Selenium测试-常用页面处理 1.概述 UI自动化测试(GUI界面层):UI层是用户使用产品的入口,所有功能通过这一层提供给用户,测试工作大多集中在这一层,常见的测试工具有UFT.Robot ...

  2. 实现antd下拉框动态添加内容(与数据库交互)

    antd下拉控件的动态内容添加(与数据库交互) antd这个框架给开发带来了极大的方便,但同时,我认为还有一些不方便的地方:常用的逻辑在文档中没有体现.需要前端开发经验的人才能快速上手,而我刚刚接触这 ...

  3. javascript 可多选的下拉框 multiselect 动态删除option值,动态添加option值,动态生成表格

    首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ...

  4. Web 1三级联动 下拉框 2添加修改删除 弹框

    Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  5. jqgrid 表格中筛选条件的多选下拉,树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件[自主开发]

    /** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author Bear.Ti ...

  6. POI 生成带联动下拉框的excel表格

    参考:https://www.cnblogs.com/cjbbk/p/7527276.html 解决POI3.17 与其它版本的不同的坑:https://blog.csdn.net/Weirdo_zh ...

  7. Java使用poi生成Excel,生成两种表格下拉框

    想要使用POI操作以xsl结尾的Excel,首先要下载poi相关的jar包,用到的jar有: poi-3.9.jar poi-ooxml-3.9.jar poi-ooxml-schemas-3.9.j ...

  8. 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

    jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...

  9. 【WPF学习笔记】之如何设置下拉框读取SqlServer数据库的值:动画系列之(一)

    先前条件:设置好数据库,需要三个文件CommandInfo.cs.DbHelperSQL.cs.myHelper.cs,需要修改命名空间,参照之前随笔http://www.cnblogs.com/Ow ...

随机推荐

  1. 五、LCD屏填充纯色

    废话不说,直接上代码: lcd.c #include "lcd.h" static int PEN_COLOR = LCD_RED; /* 定义画笔(前景)颜色 */ static ...

  2. puppet替换文件中的string

    文件 <VirtualHost :80> RewriteEngine On RewriteCond %{HTTPS} off RewriteRule (.) https://%{SERVE ...

  3. JAVA_工具类01_ResourceBundle

    在java.util.ResourceBundle包下,是java提供的工具类 ResourceBundle只能读取properties文件中的内容,可以使用ResourceBundle的静态方法来创 ...

  4. linux下开启oracle服务和开启监听

    su - oracle  切换到oracle用户模式下 sqlplus /nolog  //登录sqlplus SQL> connect /as sysdba  //连接oracle SQL&g ...

  5. Dubbo浅谈

    一.高并发的解决 1.高并发:很多人同时访问. 2.高并发产生的性能瓶颈: tomcat支持的controller,解决办法:多个tomcat共同支撑.(tomcat集群) 只有一个service被调 ...

  6. WSDL 文档-一个简单的 XML 文档

    WSDL 文档是利用这些主要的元素来描述某个 web service 的: <portType>-web service 执行的操作 <message>-web service ...

  7. C和C++内存模型

    以下内容,大部分整理自网络 C分为四个区:堆,栈,静态全局变量区,常量区 C++内存分为5个区域(堆栈全常代 ): 堆 heap : 由new分配的内存块,其释放编译器不去管,由我们程序自己控制(一个 ...

  8. 2.10 select下拉框

    2.10 select下拉框 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select    1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就 ...

  9. 2017-2018-2 20165228 实验四《Android程序设计》实验报告

    一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:苏祚堃 学号:20165228 指导教师:娄嘉鹏 实验日期:2018年5月14日 实验时间:13:45 - 3:25 实验序号:实验四 ...

  10. Caution: request is not finished yet

    /********************************************************************** * Caution: request is not fi ...