dojo:如何为表格添加从数据库获得存储的下拉框
为表格添加下拉框的例子官网上就有,但如果下拉框的数据是从数据库请求的。需要有一些注意的地方。
首先希望实现的效果如下图所示:
表格初始数据为空,点击查询后获得表格表格数据,但下拉框的数据是在对应的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:如何为表格添加从数据库获得存储的下拉框的更多相关文章
- Selenium处理页面---弹窗、表格、鼠标悬停、frame、下拉框、上传文件
一.Selenium测试-常用页面处理 1.概述 UI自动化测试(GUI界面层):UI层是用户使用产品的入口,所有功能通过这一层提供给用户,测试工作大多集中在这一层,常见的测试工具有UFT.Robot ...
- 实现antd下拉框动态添加内容(与数据库交互)
antd下拉控件的动态内容添加(与数据库交互) antd这个框架给开发带来了极大的方便,但同时,我认为还有一些不方便的地方:常用的逻辑在文档中没有体现.需要前端开发经验的人才能快速上手,而我刚刚接触这 ...
- javascript 可多选的下拉框 multiselect 动态删除option值,动态添加option值,动态生成表格
首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ...
- Web 1三级联动 下拉框 2添加修改删除 弹框
Web 三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...
- jqgrid 表格中筛选条件的多选下拉,树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件[自主开发]
/** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author Bear.Ti ...
- POI 生成带联动下拉框的excel表格
参考:https://www.cnblogs.com/cjbbk/p/7527276.html 解决POI3.17 与其它版本的不同的坑:https://blog.csdn.net/Weirdo_zh ...
- Java使用poi生成Excel,生成两种表格下拉框
想要使用POI操作以xsl结尾的Excel,首先要下载poi相关的jar包,用到的jar有: poi-3.9.jar poi-ooxml-3.9.jar poi-ooxml-schemas-3.9.j ...
- 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件
jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...
- 【WPF学习笔记】之如何设置下拉框读取SqlServer数据库的值:动画系列之(一)
先前条件:设置好数据库,需要三个文件CommandInfo.cs.DbHelperSQL.cs.myHelper.cs,需要修改命名空间,参照之前随笔http://www.cnblogs.com/Ow ...
随机推荐
- 五、LCD屏填充纯色
废话不说,直接上代码: lcd.c #include "lcd.h" static int PEN_COLOR = LCD_RED; /* 定义画笔(前景)颜色 */ static ...
- puppet替换文件中的string
文件 <VirtualHost :80> RewriteEngine On RewriteCond %{HTTPS} off RewriteRule (.) https://%{SERVE ...
- JAVA_工具类01_ResourceBundle
在java.util.ResourceBundle包下,是java提供的工具类 ResourceBundle只能读取properties文件中的内容,可以使用ResourceBundle的静态方法来创 ...
- linux下开启oracle服务和开启监听
su - oracle 切换到oracle用户模式下 sqlplus /nolog //登录sqlplus SQL> connect /as sysdba //连接oracle SQL&g ...
- Dubbo浅谈
一.高并发的解决 1.高并发:很多人同时访问. 2.高并发产生的性能瓶颈: tomcat支持的controller,解决办法:多个tomcat共同支撑.(tomcat集群) 只有一个service被调 ...
- WSDL 文档-一个简单的 XML 文档
WSDL 文档是利用这些主要的元素来描述某个 web service 的: <portType>-web service 执行的操作 <message>-web service ...
- C和C++内存模型
以下内容,大部分整理自网络 C分为四个区:堆,栈,静态全局变量区,常量区 C++内存分为5个区域(堆栈全常代 ): 堆 heap : 由new分配的内存块,其释放编译器不去管,由我们程序自己控制(一个 ...
- 2.10 select下拉框
2.10 select下拉框 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select 1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就 ...
- 2017-2018-2 20165228 实验四《Android程序设计》实验报告
一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:苏祚堃 学号:20165228 指导教师:娄嘉鹏 实验日期:2018年5月14日 实验时间:13:45 - 3:25 实验序号:实验四 ...
- Caution: request is not finished yet
/********************************************************************** * Caution: request is not fi ...