Title: edatagrid refresh combo after data input
Post by: markalves on May 07, 2013, 04:54:36 AM
Hi all,
I'm newbie in easyui, and I have a problem:
I would like to retrieve data in a combobox after a user input data in a column or in alternative connect a column to the value of another.
I make an example to best understand the problem:
I have a db of products (where the combo retrive data) this this values:
ID PRODUCT COLOR
1 A RED
2 A GREEN
3 B YELLOW
In the datagrid there is an input text where the user digit the product and the combobox where I display the colors and I would like that if the user digit A in the combobox
appear RED and GREEN is it possible ?
Thank you
Bye
Title: Re: edatagrid refresh combo after data input
Post by: stworthy on May 07, 2013, 07:59:15 AM
Redefine the 'filter' function to determine how to display items regarding your input value. Here is the example shows how to use 'filter' function. <input class="easyui-combobox" name="color" style="width:200px;" data-options="
valueField:'id',
textField:'color',
data:[{id:1,product:'A',color:'RED'},{id:2,product:'A',color:'GREEN'},{id:3,product:'B',color:'YELLOW'}],
filter: function(q,row){
return q==row.product || q=='';
}
">
Title: Re: edatagrid refresh combo after data input
Post by: markalves on May 08, 2013, 09:22:50 AM
Hi Thank you for the answer, but this is my first datagrid and I will need a little further help, because my structure is a little different from your. Follow my code D00PRO is product and D00ART the color : var articoli;
function trunkFormatter(value){
for(var i=0; i<articoli.length; i++){
if (articoli[i].MACAR0 == value) return articoli[i].MACAR0;
}
return value;
}
$(function() {
$.getJSON('list_art.php?tipoord='+ $("#tipoordine").val(), function(json) {
articoli = json;
$('#dg').edatagrid({
url: 'get_righe.php?file=' + $("#nomefile").val(),
updateUrl: 'update_righe.php?file='+ $("#nomefile").val(),
onAfterEdit: function (data) {
$('#dg').edatagrid('reload');
},
rowStyler:function(index,row){
if (row.PREDIV>0 && row.D00PRO != 0){
return 'background-color:pink;color:blue;font-weight:bold;';
}
if (row.D00PRO==0){
return 'background-color:yellow;color:blue;font-weight:bold;';
}
}
});
});
});
</script>
<h2>Gestione Dati</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>Doppio click per modificare</div>
</div>
<table id="dg" title="Righe importate" style="width:1000px;height:500px"
toolbar="#toolbar" pagination="true" idField="E42POS"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<!-- <th field="id_trunk" width="140" formatter="trunkFormatter" editor="{type:'combobox',options:{valueField:'id_trunk',textField:'nome',data:collegamenti,required:true}}">Righe</th> -->
<th field="D00POS" width="0" editor="text" hidden="true">id</th>
<th field="D00PRO" width="10" editor="text">Progressivo</th>
<th field="D00ART" width="50" formatter="trunkFormatter" editor="{type:'combobox',options:{valueField:'MACAR0',textField:'MADES0',data:articoli,required:true}}">Articolo</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Salvare</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
Title: Re: edatagrid refresh combo after data input
Post by: stworthy on May 09, 2013, 12:02:15 AM
Redefine the 'filter' function to achieve your filter logic. Please try: <th field="D00ART" width="50" formatter="trunkFormatter" editor="
{
type:'combobox',
options:{
valueField:'MACAR0',
textField:'MADES0',
data:articoli,
required:true,
filter: function(q,row){
return q==row.MACAR0 || q=='';
}
}
}">Articolo</th>
|