EasyUI layout highly adaptive and EasyUI layout adaptive

EasyUI layout highly adaptive and EasyUI layout adaptive

Recently, I changed a previously written project to the front-end with easyui. Many problems were encountered during the process. One of them is that the datagrid cannot be well laid out. There are limits to many methods. Finally, I thought about whether it would be a problem of layout. After practice, I finally solved the problem.

1: for example, the datagrid is used in the project. If the interface is relatively simple--- Only one datagrid can automatically adapt to the form by setting its attribute fit to true. If there are other div above the datagrid, The datagrid cannot automatically adapt to the form. If the datagrid has a page control, the page control will not be visible. In this case, you should use easyui-layout to separate the forms so that the specific content is placed in different parts of easyui-layout. In this way, the adaptive problem can be effectively solved.

The Code is as follows:

Copy codeThe Code is as follows: <div class = "easyui-layout" data-options = "fit: true">
<Div data-options = "region: 'north'" style = "height: 100px">
<Table id = "part1"> </table>
</Div>
<Div data-options = "region: 'center'">
<Table id = "part2"> </table>
</Div>
</Div>

2: easyui-layout Based on the body label when the browser window size changes, easyui-layout can adjust its size according to the window size.Easyui-layout Based on div labels if you want to have the above functions, you must set the easyui-layout attribute fit to true.

Scenario 1:

Copy codeThe Code is as follows: <body class = "easyui-layout">
<Div data-options = "region: 'north'" style = "height: 100px">
<Table id = "part1"> </table>
</Div>
<Div data-options = "region: 'center'">
<Table id = "part2"> </table>
</Div>
</Div>

Case 2:

Copy codeThe Code is as follows: <div class = "easyui-layout" data-options = "fit: true">
<Div data-options = "region: 'north'" style = "height: 100px">
<Table id = "part1"> </table>
</Div>
<Div data-options = "region: 'center'">
<Table id = "part2"> </table>
</Div>
</Div>

3: When easyui is defined in html, the following two statements are the same. That is to say, the easyui control attributes can be written in the dataoptions attributes, or these attributes can be written to tags.

Statement 1:

Copy codeThe Code is as follows: <div class = "easyui-layout" data-options = "fit: true">
<Div data-options = "region: 'north'" style = "height: 100px">
<Table id = "part1"> </table>
</Div>
<Div data-options = "region: 'center'">
<Table id = "part2"> </table>
</Div>
</Div>

Statement 2:

Copy codeThe Code is as follows: <div class = "easyui-layout" fit = "true">
<Div region = "north" style = "height: 100px;">
<Table id = "part1"> </table>
</Div>
<Div region = "center">
<Table id = "part2"> </table>
</Div>
</Div>

The above is all the content of EasyUI highly adaptive. I hope you can give us a reference and support for more.