EasyUI Forum
June 19, 2024, 04:15:10 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Need help getting json data into combobox on inline edit  (Read 23156 times)
cspeerly
Newbie
*
Posts: 7


View Profile Email
« on: September 07, 2012, 12:24:49 AM »

I have tried every thing, all I can get is the combox to show on edit but no data in it.
Can someone please help me. It all works except the combobox part.

See live here: http://HomersPHP.tzo.com/jqueryEasyUI/TEST-inline/

Code:
<script type="text/javascript" src="../easyui/jquery-1.8.0.js"></script>
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../easyui/jquery.edatagrid.js"></script>
<script type="text/javascript" src="../easyui/datagrid-detailview.js"></script>
<script type="text/javascript" src="../easyui/plugins/jquery.combobox.js"></script>

<script type="text/javascript">
$(function(){
$('#dg').edatagrid({
url: 'get_users.php',
saveUrl: 'save_user.php',
updateUrl: 'update_user.php',
destroyUrl: 'destroy_user.php',
height: 'auto',
   scrollbarSize: 0,
pageSize:10,
pageList: [10,15,20,25]
});

$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
});

$.fn.datebox.defaults.formatter = function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
};
$.fn.datebox.defaults.parser = function(s){
if (!s) return new Date();
var ss = s.split('-');
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
};

var lastIndex;
$('#tt').datagrid({
onClickRow:function(rowIndex){
if (lastIndex != rowIndex){
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('beginEdit', rowIndex);
setEditing(rowIndex);
}
lastIndex = rowIndex;
}
});
</script>

The HTML

Code:
<body>
<h2>CRUD DataGrid Inline Edit</h2>

<table id="dg" title="My Users" style="width:800px;height:250px"
toolbar="#toolbar" pagination="true" idField="id"
rownumbers="false" fitColumns="true" singleSelect="false">
<thead>
<tr>
<th field="id" width="50" >CustId</th>
<th field="firstname" sortable="true" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
<th field="lastname" sortable="true" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
<th field="phone" width="50" editor="text">Phone</th>
<th field="imgphoto" width="50" editor="text">Photo</th>
<th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
  <th field="dateentered" sortable="true" width="50" editor="{type:'datebox',options:{required:true}}">First Name</th>
<th field="favoratecolor" id="cc" value="aa" width="60" align="center" editor="{type:'combobox'}">Color</th>
<th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'YES',off:'NO'}}">Active</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="false" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="false" onclick="javascript:$('#dg').edatagrid('destroyRow')">Remove User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="false" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="false" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>

</body>

This is the combobox line from the HTML above

Code:

<th field="favoratecolor" id="cc" class="easyui-combobox" value="aa" width="60" align="center" editor="{type:'combobox'}">FavorateColor</th>



Chuck

« Last Edit: September 07, 2012, 12:33:42 AM by cspeerly » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: September 09, 2012, 06:21:55 PM »

To use the 'combobox' editor, some corresponding properties must be defined.
Code:
editor:{
  type: 'combobox',
  options: {
    valueField: ...,
    textField: ...,
    url: ...
  }
}

Please refer to the tutorial below to learn how to use the 'combobox' editor.
http://www.jeasyui.com/tutorial/datagrid/datagrid12.php
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!