Title: Need help getting json data into combobox on inline edit
Post by: cspeerly 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/ <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>
<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>
<th field="favoratecolor" id="cc" class="easyui-combobox" value="aa" width="60" align="center" editor="{type:'combobox'}">FavorateColor</th>
Title: Re: Need help getting json data into combobox on inline edit
Post by: stworthy on September 09, 2012, 06:21:55 PM
To use the 'combobox' editor, some corresponding properties must be defined. 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
|