Easyui Datagrid 的Combobox 如何动态修改下拉选项,以及值的转换
我是先将下拉选项的值通过datagrid的url查出来了,在每一行的row中
//项目结果选项卡的列表
$('#project_table').datagrid({
width : '100%',
height: '378',
url : 'getSeparationProjectInf',
//title : '待分发条码列表',
striped : true,
nowrap : true,
rownumbers : true,
singleSelect : true,
showHeader : true,
showFooter : false,
loadMsg : '努力展开中...',
scrollbarSize:0,
fitColumns : true,
checkOnSelect : true,
onClickRow: function (rowIndex, rowData) {
//$(this).datagrid('unselectRow', rowIndex);
var _this = this;
if (editIndex != undefined && editIndex != rowIndex) {
//结束行编辑
endEdit(_this,editIndex);
}
$(_this).datagrid('beginEdit', rowIndex);
$("input.datagrid-editable-input").on("keypress",function(e){
if(e.keyCode==13){
endEdit(_this,editIndex);
}
});
editIndex = rowIndex;
},
onBeginEdit: function(index, rowData){ //动态修改检测结果下拉项
var resultDictionaryDetailList = rowData.resultDictionaryDetailList
//监测结果下拉框
var goEditor = $('#project_table').datagrid('getEditor', {
index : index,
field : 'result'
});
$(goEditor.target).combobox({
onLoadSuccess: function () {
if(rowData.result){
$(goEditor.target).combobox('setValue', rowData.result);
}else{
$(goEditor.target).combobox('setValue', rowData.resultDictionaryDetailList[0].id);
}
},
onBeforeLoad: function(){ //下拉展开时动态修改options
if(resultDictionaryDetailList.length){
var data = [];
for ( var index in resultDictionaryDetailList) {
var resultDictionaryDetail = resultDictionaryDetailList[index];
data.push({'id': resultDictionaryDetail.id, 'name':resultDictionaryDetail.name});
}
$(goEditor.target).combobox("loadData", data);
}
}
});
},
columns : [[
{
field : 'ck',
checkbox: true
},
{
field : 'projectId',
title : '项目ID',
align : 'center',
sortable : false,
resizable : false,
hidden: true
},
{
field : 'projectName',
title : '项目',
align : 'center',
sortable : false,
resizable : false,
width : 120
},
{
field : 'data',
title : '检测数据',
align : 'center',
sortable : false,
resizable : false,
width : 100,
editor:{
type:'text'
}
},
{
field : 'result',
title : '检测结果',
align : 'center',
sortable : false,
resizable : false,
width : 100,
formatter: function (value, rowData, rowIndex) {
var resultDictionaryDetailList = rowData.resultDictionaryDetailList;
if(!value){
rowData.result = resultDictionaryDetailList[0].id;
value = resultDictionaryDetailList[0].name;
}
console.log("resultDictionaryDetailList.length=="+resultDictionaryDetailList.length);
for (var i = 0; i < resultDictionaryDetailList.length; i++) {
if (resultDictionaryDetailList[i].id == value) {
return resultDictionaryDetailList[i].name;
}
}
return value;
},
editor:{
type:'combobox',
options:{
valueField:'id',
textField:'name',
//method:'get',
//url:'products.json',
//data: resultDictionaryDetailList,
data: [{
productid: '0',
checkResult: '高'
},{
productid: '1',
checkResult: '低'
}],
required:true
}
}
},
{
field : 'remark',
title : '结果备注',
align : 'center',
sortable : false,
resizable : false,
width : 120 ,
editor : {type:"text"}
},
{
field : 'suggestion',
title : '建议内容',
align : 'center',
sortable : false,
resizable : false,
width : 150,
editor:{ type:'text' }
},
{
field : 'explanation',
title : '医学解释',
align : 'center',
sortable : false,
resizable : false,
width : 150,
editor:{ type:'text' }
},
{
field : 'reason',
title : '常见原因',
align : 'center',
sortable : false,
resizable : false,
width : 150,
hidden: true
},
{
field : 'operate',
title : '操作',
align : 'center',
sortable : false,
resizable : false,
width : 80,
formatter: function(value,row,index){
// return '<a href="javascript:void(0);" onclick="cancelDialog(event)">'+value+'</a>';
}
}
]],
data : [
/*{
project : 'ERCC1基因表达',
checkData : '≥3.4%',
checkResult : '高',
resultRemark : 'xxxxx',
advise : '您患2型糖尿病的基因位.....',
medicalExplanation : '合理安排休息,保证充分....',
operate : '删除',
}*/
],
pagination : false,
/*pageSize : 10,
pageList : [10],
pageNumber : 1,*/
pagePosition : 'bottom',
remoteSort : false,
});
具体解析如下:
onBeginEdit是将row中的下拉项数据拿出来并动态加载到Combobox 中,onBeforeLoad很重要,不然执行onLoadSuccess方法的时候,Combobox还没有动态加载下拉选项,导致显示的是值,而不是值对应的名,所以用onBeforeLoad可以先加载Combobox的下拉选项,然后再回填值
onBeginEdit: function(index, rowData){ //动态修改检测结果下拉项
var resultDictionaryDetailList = rowData.resultDictionaryDetailList
//监测结果下拉框
var goEditor = $('#project_table').datagrid('getEditor', {
index : index,
field : 'result'
});
$(goEditor.target).combobox({
onLoadSuccess: function () {
if(rowData.result){
$(goEditor.target).combobox('setValue', rowData.result);
}else{
$(goEditor.target).combobox('setValue', rowData.resultDictionaryDetailList[0].id);
}
},
onBeforeLoad: function(){ //下拉展开时动态修改options
//datatype处理统计方法
if(resultDictionaryDetailList.length){
var data = [];
for ( var index in resultDictionaryDetailList) {
var resultDictionaryDetail = resultDictionaryDetailList[index];
data.push({'id': resultDictionaryDetail.id, 'name':resultDictionaryDetail.name});
}
$(goEditor.target).combobox("loadData", data);
}
/* //设置值
if(rowData.result){
$(goEditor.target).combobox('setValue', rowData.result);
}else{
$(goEditor.target).combobox('setValue', rowData.resultDictionaryDetailList[0].name);
}*/
}
});
},
formatter是将值转换成对应的name
formatter: function (value, rowData, rowIndex) {
var resultDictionaryDetailList = rowData.resultDictionaryDetailList;
if(!value){
value = resultDictionaryDetailList[0].id;
rowData.result = value;
}
for (var i = 0; i < resultDictionaryDetailList.length; i++) {
if (resultDictionaryDetailList[i].id == value) {
return resultDictionaryDetailList[i].name;
}
}
return value;
},
Easyui Datagrid 的Combobox 如何动态修改下拉选项,以及值的转换的更多相关文章
- jquery 动态添加下拉框 需要增加 煊染 selectmenu("refresh");
若通过js动态选择下拉框的值必须刷新下拉框,例如:var selArray = $("select#sel");selArray[0].selectedIndex = 1;selA ...
- Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
datagrid combobox输入框下拉(取消)选值和编辑已选值处理 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 如下,在datagri ...
- 通通WPF随笔(1)——基于lucene.NET让ComboBox拥有强大的下拉联想功能
原文:通通WPF随笔(1)--基于lucene.NET让ComboBox拥有强大的下拉联想功能 我一直很疑惑百度.谷哥搜索框的下拉联想功能是怎么实现的?是不断地查询数据库吗?其实到现在我也不知道,他们 ...
- SupportV7包中 SwipeRefreshLayout 修改下拉控件的距离
//修改下拉距离 ViewTreeObserver vto = mCategoryResults.mSwipeRefreshLayout.getViewTreeObserver(); vto.addO ...
- ComboBox 自动调整组合框下拉部分的宽度
/// <summary> /// ComboBox 自动调整组合框下拉部分的宽度 /// </summary> void Resiz ...
- layui 根据根据后台数据动态创建下拉框并同时默认选中
第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...
- Jquery动态设置下拉框selected --(2018 08/12-08/26周总结)
1.Jquery动态根据内容设置下拉框selected 需求就是根据下拉框的值动态的设置为selected,本以为很简单,网上一大推的方法,挨着尝试了之后却发现没有一个是有用的.网上的做法如下: &l ...
- WPF-学习笔记 动态修改控件Margin的值
原文:WPF-学习笔记 动态修改控件Margin的值 举例说明:动态添加一个TextBox到Grid中,并设置它的Margin: TextBox text = new TextBox(); t_gri ...
- jquery 根据后台传过来的值动态设置下拉框、单选框选中
更多内容推荐微信公众号,欢迎关注: jquery 根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...
随机推荐
- VS2013 tips
1.创建一个connection时会自动产生一个localdb数据库文件,可以通过Server Explorer窗口查看这个localDB,注意,是Server Explorer窗口,而不是SQL S ...
- 优化器Optimizer
目前最流行的5种优化器:Momentum(动量优化).NAG(Nesterov梯度加速).AdaGrad.RMSProp.Adam,所有的优化算法都是在原始梯度下降算法的基础上增加惯性和环境感知因素进 ...
- java分布式(一)
分布式架构的演进 初始阶段架构 应用服务和数据服务分离阶段 使用缓存改善性能 使用应用服务器集群 数据库读写分离 反向代理和CDN加速 分布式文件系统和分布式数据库 使用NoSql和搜索引擎 业务拆分 ...
- BZOJ5336 TJOI2018 party 【状压DP】*
BZOJ5336 TJOI2018 party Description 小豆参加了NOI的游园会,会场上每完成一个项目就会获得一个奖章,奖章 只会是N, O, I的字样.在会场上他收集到了K个奖章组成 ...
- BZOJ2653 middle 【主席树】【二分】*
BZOJ2653 middle Description 一个长度为n的序列a,设其排过序之后为b,其中位数定义为b[n/2],其中a,b从0开始标号,除法取下整.给你一个长度为n的序列s.回答Q个这样 ...
- mysql update select 用法
之前用SqlServer , update语句对表进行更新:update a set a.xx= (select yy from b) ; 是可以的但是在mysql中,不能直接使用set select ...
- UVA11401 Triangle Counting
题意 输入\(n\),输出有多少种方法可以从\(1,2,3,\dots,n\)中选出3个不同的整数,使得以他们为三边长可以组成三角形. \(n \leq 10^6\) 分析 参照刘汝佳的题解. 按最大 ...
- 使用 commander && inquirer 构建专业的node cli
备注: 比较简单就是使用nodejs 的两个类库帮助我们进行开发而已,具体的使用参考类库文档 1. 项目初始化 a. 安装依赖 yarn init -y yarn add commander in ...
- travis-cli 使用
1. 添加项目 登录 travis 选择对应项目即可 2. 添加持续集成文件 .travis.yml language: node_js node_js: - "node" bef ...
- springboot: 使web项目支持jsp
1.springboot为什么不推荐使用jsp? 参考地址:https://spring.io/blog/2012/10/30/spring-mvc-from-jsp-and-tiles-to-thy ...