EasyUI Forum
March 29, 2024, 02:23:24 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: [Solved] ComboGrid, load saved values  (Read 6597 times)
argumentum
Newbie
*
Posts: 22



View Profile
« on: February 04, 2018, 09:57:32 PM »

Code:
<!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>
&emsp;< ?php // getSomeData.php<br>
&emsp;&emsp;$page = isset($_POST['page']) ? intval($_POST['page']) : 1;<br>
&emsp;&emsp;$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;<br>
&emsp;&emsp;$items = array();<br>
&emsp;&emsp;for($i=1; $i<=$rows; $i++){<br>
&emsp;&emsp;&emsp;$index = $i+($page-1)*$rows;<br>
&emsp;&emsp;&emsp;$items[] = array(<br>
&emsp;&emsp;&emsp;&emsp;'id' => $index,<br>
&emsp;&emsp;&emsp;&emsp;'itemname' => 'Name ' . $index,<br>
&emsp;&emsp;&emsp;&emsp;'itemdesc' => 'Long description ' . $index,<br>
&emsp;&emsp;&emsp;);<br>
&emsp;&emsp;}<br>
&emsp;&emsp;$result = array();<br>
&emsp;&emsp;$result['total'] = 10000;<br>
&emsp;&emsp;$result['rows'] = $items;<br>
&emsp;&emsp;echo json_encode($result);<br>
&emsp;? ><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
« Last Edit: February 05, 2018, 09:20:13 AM by argumentum » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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.
Code:
$('#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
Logged
argumentum
Newbie
*
Posts: 22



View Profile
« Reply #2 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 ?
Logged
argumentum
Newbie
*
Posts: 22



View Profile
« Reply #3 on: February 05, 2018, 09:19:34 AM »

Is there a "getValues" for combogrid ?
Code:
console.log(JSON.stringify($('#us-item').combogrid('getValues')));
Found it, thanks =)
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!