 Show Posts
|
|
Pages: [1]
|
|
2
|
General Category / General Discussion / Need help getting json data into combobox on inline edit
|
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>
|
|
|
|
|
3
|
General Category / General Discussion / Re: jquery EasyUI pagination
|
on: September 05, 2012, 10:38:51 AM
|
Well it works and it don"t 1st, I guess I need the scrollbars and the window to resize so I can see all of the edit form. 2nd, When I put in $(function(){
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '<div class="ddv"></div>';
},
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
border:false,
cache:true,
href:'show_form.php?index='+index,
onLoad:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('getRowDetail',index).find('form').form('load',row);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
$('#dg').edatagrid({
pageList: [5,10,15,20],
height: 'auto',
scrollbarSize: 0
});
});
I loose the expand link to edit that row |
|
|
|
|
6
|
General Category / EasyUI for jQuery / The way I solved datebox() format to return yyyy=mm=dd
|
on: September 04, 2012, 10:03:44 PM
|
After hours of messing with this. It was the only way I could get it to work. see example here when you EDIT OR ADD a record. http://HomersPHP.tzo.com/jqueryEasyUI/Test-5/index.htmlNOTE: have to use the jquery.datebox.jshere is the my code.<script type="text/javascript" src="../easyui/plugins/jquery.datebox.js"></script>
<script type="text/javascript">
$('#datebox(').datebox({
required:true,
});
</head>
...
<!-- *********** HTML *********** -->
<td><input id="datebox" name="dateentered"></input></td>
Since all my applications use MySQL this works for me Now edit the jquery.datebox.js around line 105 tou will see this.var y=_1b.getFullYear();
var m=_1b.getMonth()+1;
var d=_1b.getDate();
return y+"/"+m+"/"+d;
},parser:function(s){
var t=Date.parse(s);
if(!isNaN(t)){
return new Date(t);
}else{
return new Date();
return m+"/"+d+"/"+y; to thisreturn y+"-"+m+"-"+d; When entering a date like 2013-1-3 it displays like that on the form But when you refresh.it appears like this 2013-01-03 I tried to use mm + dd but the it errors out. Hope this helps Chuck |
|
|
|
|
7
|
General Category / General Discussion / jquery EasyUI pagination
|
on: September 04, 2012, 06:23:15 PM
|
I am starting to catch the hang of this, but i have several Problems 1) pagination - How can I set the number of rows like 5.10.15.20 instead of the defaults of 10, 20 etc 2) Then Hide the vertical scroll bar See Live here http://HomersPHP.tzo.com/jqueryEASYUI/test-1/index.html <script type="text/javascript">
$(function(){
$('#dg').edatagrid({
url: 'get_users.php',
saveUrl: 'save_user.php',
updateUrl: 'update_user.php',
destroyUrl: 'destroy_user.php',
});
});
</script>
</head>
<body>
<h2>CRUD DataGrid</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>Double click the row to begin editing.</div>
</div>
<table id="dg" title="My Users" style="width:700px;height:250px"
toolbar="#toolbar" pagination="true" idField="id"
rownumbers="true" fitColumns="true" singleSelect="false">
<thead>
<tr>
<th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
<th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
<th field="address" width="50" editor="text">Address</th>
<th field="city" width="50" editor="text">City</th>
<th field="state" width="50" editor="text">State</th>
<th field="zip" width="50" editor="text">Zip</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
</ Thanks alot if you can help Chuck |
|
|
|
|
