Title: [Solved] ComboGrid, load saved values
Post by: argumentum on February 04, 2018, 09:57:32 PM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/plugins/jquery.combogrid.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
</head>
<body>
<h2>ComboGrid, Pagination, SearchBox, load multiline</h2>
<p>
When saving the <b>item IDs</b>, it's all good.<br>
When restoring the <b>item IDs</b>, since the <b>item Name</b> is not<br>
in the datagrid, only the <b>item IDs</b> is shown and not the <b>item Name</b> and<br>
to make it wost, if I post the form, the <b>item IDs</b> for the missing <b>item Name</b> is not retuned.<br>
If I click, until the page where the <b>item Name</b> is found, it fixes it self.<br>
<br><br>
Is there:<br>
a) a proper way to handle it, or<br>
b) a work around, or<br>
c) another aproach ?<br><br>
Thanks<br><br><br><br>
</p>
<form id="us-form" action="form_test.php" method="post" enctype="multipart/form-data">
<input type="hidden" id="ActOnFormUsersAs" name="ActOnFormUsersAs" value="notSet" />
<input type="hidden" id="ActOnFormUsersItemID" name="ActOnFormUsersItemID" value="notSet" />
<input type="hidden" id="ActOnFormUsersUserID" name="ActOnFormUsersUserID" value="notSet" />
<table style="min-width:300px">
<tr>
<td style="white-space: nowrap" align="right">First Name:</td>
<td><input class="easyui-textbox" name="first_name" data-options="required:false,disabled:false,editable:true,prompt:'enter the First Name'" style="width:300px"></td>
<td></td>
<td>
</tr>
<tr>
<td style="white-space: nowrap" align="right">Last Name:</td>
<td><input class="easyui-textbox" name="last_name" data-options="required:false,disabled:false,editable:true,prompt:'enter the Last Name'" style="width:300px"></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="white-space: nowrap" align="right"></td>
<td></td>
<td align="left"></td>
</tr>
<tr>
<td align="right" style="white-space: nowrap">Items:</td>
<td>
<select id="us-item" name="cgItem" class="easyui-combogrid" required="true" style="width:100%;" data-options="
pageSize: 10,
url: 'getSomeData.php',
method: 'post',
panelWidth: 600,
multiline: true,
panelEvents: $.extend({}, $.fn.combogrid.defaults.panelEvents, {
mousedown: function(){}
}),
panelHeight: 'auto',
editable: false,
multiple: true,
pagination: true,
loading: true,
pagePosition: 'top',
limitToList: true,
iconWidth:22,
icons:[
{
iconCls:'icon-add',
content: 'content',
handler:us_Item_iconAdd
},{
iconCls:'icon-edit',
content: 'content',
handler:us_Item_iconEdit
},{
iconCls:'icon-undo',
content: 'content',
handler:us_Item_iconClear
}
],
onChange: us_Item_onChange,
onLoadSuccess:function(data){
$(this).datagrid('getPanel').find('tr.datagrid-row').each(function(){
var index = parseInt($(this).attr('datagrid-row-index'));
$(this).tooltip({
zIndex:9999999,
trackMouse:true,
showDelay:10,
hideDelay:10,
position:'top',
content:'<b>Desc.:</b><br><em>' + data.rows[index]['itemdesc'] + '<br>for index ' + data.rows[index]['id'] + '</em>'
})
})
},
onClickRow: us_Item_onClickRow,
onShowPanel: us_Item_onShowPanel,
onHidePanel: us_Item_onHidePanel,
idField: 'id',
textField: 'itemname',
columns: [[
{field:'id',title:'Item ID',hidden:true},
{field:'itemname',title:'Item Name',width:100}
]],
fitColumns: true
">
</select>
<div id="us-item-buttons">
<input class="easyui-searchbox" data-options="menu:'#mm',prompt:'limit search by selected',searcher:us_Items_search" style="width:240px"></input>
<div id="mm">
<div data-options="name:'name'">Name</div>
<div data-options="name:'desc'">Desc.</div>
</div>
</div>
</td>
</tr>
</table>
</form>
<br>
<table style="min-width:800px">
<tr>
<td>
<a class="easyui-linkbutton" onclick="loadLocal()">Form Load - local test</a>
<a class="easyui-linkbutton" onclick="clearForm()">Form Clear</a>
</td>
</tr>
<tr>
<td>
<br><br><br>
 < ?php // getSomeData.php<br>
  $page = isset($_POST['page']) ? intval($_POST['page']) : 1;<br>
  $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;<br>
  $items = array();<br>
  for($i=1; $i<=$rows; $i++){<br>
   $index = $i+($page-1)*$rows;<br>
   $items[] = array(<br>
    'id' => $index,<br>
    'itemname' => 'Name ' . $index,<br>
    'itemdesc' => 'Long description ' . $index,<br>
   );<br>
  }<br>
  $result = array();<br>
  $result['total'] = 10000;<br>
  $result['rows'] = $items;<br>
  echo json_encode($result);<br>
 ? ><br>
</td>
</tr>
</table>
<script>
function us_Item_iconAdd() {}
function us_Item_iconEdit() {}
function us_Item_iconClear() {
$('#us-item').combogrid('clear');
}
function us_Item_onChange() {}
function us_Item_onClickRow() {}
function us_Item_onShowPanel() {}
function us_Item_onHidePanel() {}
function us_Items_search() {
console.log('function us_Items_search()');
}
function clearForm() {
$('#us-form').form('clear');
}
function loadLocal() {
$('#us-form').form('load', {
first_name: 'first name',
last_name: 'last name',
cgItem: [2, 22], // ["Name 2","Name 22"]
ActOnFormUsersItemID: [2, 22],
});
}
var g_pageSize = 10;
$(function() {
$('#us-item').textbox('getIcon', 0).tooltip({
position: 'top',
content: 'add an item'
});
$('#us-item').textbox('getIcon', 1).tooltip({
position: 'top',
content: 'edit selected items'
});
$('#us-item').textbox('getIcon', 2).tooltip({
position: 'top',
content: 'clear the box'
});
// ----- this is a hack. I'm sure it can be properly coded but I do not have the know how =/
var grid = $('#us-item').combogrid('grid');
var pager = grid.datagrid('getPager');
pager.pagination({
pageSize: g_pageSize,
pageList: [5, 10, 15, 20, 30, 50, 100],
layout: ['list', 'sep', 'first', 'prev', 'sep', 'next', 'last', 'sep', 'refresh'],
displayMsg: '',
buttons: $('#us-item-buttons'),
onChangePageSize: function(pageSize) {
g_pageSize = pageSize;
console.log('pager.pagination users : onChangePageSize : pageSize =' + g_pageSize);
}
});
var opts = pager.pagination('options');
var list = pager.find('.pagination-page-list').hide();
var tb = $('<input>').insertAfter(list);
tb.numberspinner({ // I had to place a spinner. On the drop-down, it would mess up
spinAlign: 'left', // the tooltips on the grid refresh.
width: 45,
min: 10, // ..also, the minimum had to be 10. In all datagrid, for what I've seen,
max: 90, // the 1st request is 10, like it or not =/
increment: 5,
editable: false,
value: g_pageSize,
onChange: function(value) {
list.html('<option>' + value + '<option>');
pager.pagination('refresh', {
pageSize: value
});
list.triggerHandler('change');
}
});
// ----- this is a hack. I'm sure it can be properly coded but I do not have the know how =/
});
</script>
</body>
</html>
The preview is at http://code.reloado.com/ifuhos/edit#html,live but will not run due to the missing "php fake db" file. When saving the item IDs, it's all good. When restoring the item IDs, since the item Name is not in the datagrid, only the item IDs is shown and not the item Name and to make it wost, if I post the form, the item IDs for the missing item Name is not retuned. If I click, until the page where the item Name is found, it fixes it self. Is there: a) a proper way to handle it, or b) a work around, or c) another approach ? There is also other stuff that I'm asking as comments in the attached source code. Thanks
Title: Re: ComboGrid, load saved values
Post by: stworthy on February 05, 2018, 02:23:45 AM
After load form data, call 'setValues' method of the combogrid with 'key-value' pairs to update its field values. $('#us-form').form('load', {
first_name: 'first name',
last_name: 'last name',
cgItem: [2, 22], // ["Name 2","Name 22"]
ActOnFormUsersItemID: [2, 22],
});
$('#us-item').combogrid('setValues', [
{id:2,itemname:'itemname2'},
{id:22,itemname:'itemname22'}
]);
http://code.reloado.com/ifuhos/2/edit#preview
Title: Re: ComboGrid, load saved values
Post by: argumentum on February 05, 2018, 09:04:50 AM
After load form data, call 'setValues' method of the combogrid with 'key-value' pairs to update its field values.
thanks for the setValues, but I still have the problem of not having the values when I post. Is there a "getValues" for combogrid ?
Title: Re: ComboGrid, load saved values
Post by: argumentum on February 05, 2018, 09:19:34 AM
Is there a "getValues" for combogrid ?
console.log(JSON.stringify($('#us-item').combogrid('getValues')));Found it, thanks =)
|