dataGrid的combobox改变,输入框值随之变化
2017-11-27 09:56
405 查看
在datagrid初始加载后,点击双击编辑,根据一个输入框的下拉选择,改变另一个输入框的值。有关的页面展示如下
![](https://img-blog.csdn.net/20171127102825789?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjE3ODcwNzM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
下面是有关的代码:
下面是有关的代码:
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); } }, });
相关文章推荐
- Swing容器中在jTable中添加combobox下拉框时,有关一个下拉框值改变,另一个下拉框值随之改变的方法
- 监听输入框值变化的最佳方案 oninput 和 onpropertychange (实时监控文本框改变的最佳方案)
- 实时监听输入框值变化的完美方案:oninput & onpropertychange
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
- 如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
- 实时监听输入框值变化的完美方案:oninput & onpropertychange
- jquery实时监听某输入框值的变化
- 如何实时监听 input 和 textarea输入框值的变化
- 实时监听输入框值变化的完美方案:oninput & onpropertychange
- 实时监听输入框值变化的完美方案:oninput & onpropertychange
- jQuery -- 监听input、textarea输入框值变化
- 监听输入框值的即时变化onpropertychange、oninput
- js监听输入框值的即时变化onpropertychange、oninput
- jquery实时监听输入框值变化
- 监听HTML input输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等
- 实时监听输入框值变化的完美方案:oninput & onpropertychange
- DatePickerDialog 如何去掉输入时间标题也随之变化的效果
- 监听输入框值的即时变化onpropertychange、oninput
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
- 实时监听输入框值变化