您的位置:首页 > 其它

dataGrid的combobox改变,输入框值随之变化

2017-11-27 09:56 405 查看
在datagrid初始加载后,点击双击编辑,根据一个输入框的下拉选择,改变另一个输入框的值。有关的页面展示如下



下面是有关的代码:

var line;//定义一个全局变量,在双击编辑的时候,将编辑行的索引赋值给该变量
var pipingLevel = [{"value":"0","text":"体育用品"},{"value":"1","text":"生活用品"},{"value":"2","text":"食品"}];
//json格式,下拉框的格式内容,可以通过后台查询,也可以在前台直接定义
grid = $("#hg").datagrid({//分配储位的右边的关联库位的展示
url : 'manager.do?method=getStoragelocation&id='+ id,
fit : true,
rownumbers : true,
singleSelect : false,
selectOnCheck : true,
checkOnSelect : true,
toolbar : '#tb',
columns : [ [ {
field : 'id',
checkbox : true
}, {
field : 'goodsName',
title : '商品明细',
width : 150,
align : 'center',
editor : {
type : 'combobox',
options : {
precision : 2,
validType : 'number',
editable  :  false //将输入框变成不能编辑的状态
}
}
}, {
field : 'goodsType',
title : '商品类型',
width : 80,
align : 'center',
formatter : function(val, row, index) {
if (val == 0) {
return "体育用品";
} else if (val == 1) {
return "生活用品";
} else if (val == 2) {
return "食品";
}
},
editor:{
type: 'combobox',
options: {
data: pipingLevel,
valueField: "value",
textField: "text",
editable: false,
panelHeight:70,
required: true,
onChange:function(k,v){
//k是新的值,v是初始值
var lineInfo =  $('#hg').datagrid('getData').rows[line];
var productName = lineInfo.goodsnumber;
var editors = $('#hg').datagrid('getEditors', line);//取当前的编辑器
var row = $('#hg').datagrid('getRows')[line];
var smEditor = editors[1];
$(smEditor.target).combobox('clear');
//根据下拉选择的值发送ajax查询有关的数据,将数据加载到变化的输入框中
$.ajax({
type : "POST",
url : 'manager.do?method=changeKw',
data : {
goodsnumber :productName,
type:k
},
success : function(data) {

var str=[];
var s = "";
if(data.length != 0){

for ( var i = 0; i < data.length; i++) {
s = {"value":data[i].librarynum,"text":data[i].librarynum};
str.join(",");
str.push(s);

}
}
//var str = [{"value":data[0].librarynum,"text":data[0].librarynum}];
var editors = $('#hg').datagrid('getEditors', line);//取当前的编辑器
var row = $('#hg').datagrid('getRows')[line];
var smEditor = editors[0];//获得datagrid的第一个编辑框(库位代码)
$(smEditor.target).combobox("loadData", str);
$
4000
(smEditor.target).combobox('select', data[0].librarynum);//选项框默认显示第一条
}
});
}
}
}
}
] ],
//双击编辑事件
onDblClickRow : function(rowIndex, rowData) {
var data = $('#hg').datagrid('getData');
//最后一行取消编辑
//双击开启编辑行
if (editval != rowIndex) {
line=rowIndex;
$("#hg").datagrid('refreshRow',rowIndex);
$('#hg').datagrid("endEdit", editval);
$('#hg').datagrid("beginEdit", rowIndex);
editval = rowIndex;
//在双击事件中,将改变方法重新加载一下,当双击编辑时,数据就能直接加载
$.ajax({
type : "POST",
url : 'manager.do?method=changeKw',
data : {
goodsnumber :rowData.goodsnumber,
type:rowData.kuweitype
},
success : function(data) {
console.info(data);
var str=[];
var s = "";
if(data.length != 0){

for ( var i = 0; i < data.length; i++) {
s = {"value":data[i].librarynum,"text":data[i].librarynum};
str.join(",");
str.push(s);

}
}
//var str = [{"value":data[0].librarynum,"text":data[0].librarynum}];
var editors = $('#hg').datagrid('getEditors', line);//取当前的编辑器
var row = $('#hg').datagrid('getRows')[line];
var smEditor = editors[0];//获得datagrid的第一个编辑框(库位代码)
$(smEditor.target).combobox("loadData", str);
$(smEditor.target).combobox('select', data[0].librarynum);//选项框默认显示第一条
}
});
} else {
editval = undefined;
$('#hg').datagrid("endEdit", rowIndex);
}
},

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  datagrid combo box