Print Page - [Solved] easyui-panel, show/hide header and footer

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hide header and footer - jQuery EasyUI Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=2">

	<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.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>
</head>
<body bgcolor="violet">
    <div id="idPanelMainFooter" style="padding:5px;">
        <table style="width:100%">
            <tr>
                <td align="right">
                    <a class="easyui-linkbutton" data-options="plain:true,disabled:true">| nice looking label |</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="idPanelMain" class="easyui-panel" title="" data-options="border:true,fit:true,footer:'#idPanelMainFooter'" style="width:100%;height:100%;">
        <header id="idPanelMainHead">
            <span style="display:inline-block;"><b>
			<a id="idTestJs" class="easyui-linkbutton" onclick="doTestFake()" data-options="plain:true,disabled:false" style="display:inline-block;width:100%;">Header title</a>
			</b></span>
            <span style="float:right;">
				<a  class="easyui-linkbutton" onclick="doLogoutFake()" data-options="iconCls:'icon-lock',plain:false" style="width:150px;">Logout</a>
			</span>
        </header>
        <div class="easyui-tabs" data-options="fit:true">
            <div title="Show / Hide stuff">
                <p>
                    Pagination on
                    <select id="p-pos" class="easyui-combobox" data-options="editable:false,value:'top',onChange:changeP" onchange="changeP()">
						<option>bottom</option>
						<option>top</option>
						<option>both</option>
					</select> Style
                    <select id="p-style" class="easyui-combobox" data-options="editable:false,value:'links',onChange:changeP" onchange="changeP()">
						<option>manual</option>
						<option>links</option>
					</select>
                </p>
                <table class="table-flat" style="width:auto;">
                    <tr>
                        <td><span><b>Hide header and footer: </b></span></td>
                        <td>
                            <input class="easyui-switchbutton" data-options="disabled:false,checked:false,onText:'YES',offText:'NO',onChange:onChangeHeaderFooter">
                        </td>
                        <td>&nbsp;&nbsp;</td>
                    </tr>
                </table>
            </div>
            <div title="Datagrid here" style="padding:2px">
                <table id="tt" class="easyui-datagrid" data-options="fit:true,url:'fake.php',title:'Load Data',iconCls:'icon-save',rownumbers:true,pagination:true">
                    <thead>
                        <tr>
                            <th field="field1" width="auto">field1</th>
                            <th field="field2" width="140" align="center" hidden="true">field2</th>
                            <th field="field3" width="110" align="center">field3</th>
                            <th field="field4" width="140">field4</th>
                            <th field="field5" width="70" align="right">field5</th>
                            <th field="field6" width="70" align="center">field6</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function changeP() {
            console.log('function changeP()');
            var dg = $('#tt');
            dg.datagrid('loadData', []);
            dg.datagrid({
                pagePosition: $('#p-pos').val()
            });
            dg.datagrid('getPager').pagination({
                layout: ['list', 'sep', 'first', 'prev', 'sep', $('#p-style').val(), 'sep', 'next', 'last', 'sep', 'refresh', 'info']
            });
        }

        function onChangeHeaderFooter(checked) {
            console.log('onChangeHeaderFooter(' + checked + ')');
            var x = document.getElementById("idPanelMainHead");
            var y = document.getElementById("idPanelMainFooter");
            if (checked) {
                x.style.display = "none";
                y.style.display = "none";
            } else {
                x.style.display = "block";
                y.style.display = "block";
            }
            $('#idPanelMain').panel('resize', {
                width: 100,
                height: 100
            });
            setTimeout(function() {
                $('#idPanelMain').panel('expand');
            }, 200);
        }
    </script>
</body>
</html>

This is going to run mainly on PCs, so,
the example of my code is at http://code.reloado.com/inexay3/edit#html,live (http://code.reloado.com/inexay3/edit#html,live)

but I'd like to use it in a phone browser's too, so,
a more realistic preview is at http://code.reloado.com/eyakex3/edit#preview (http://code.reloado.com/eyakex3/edit#preview)

Since on the phone the "real estate" is small, I'll need to hide some parts, in this case, the nice header and footer, takes up a lot of space that I can use to view the datagrid.

I've tried everything that I can think of to no avail, and I can't get the panel to reclaim the space of the header and footer.

Thanks

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: argumentum on March 03, 2018, 12:21:42 PM