Recently, I have changed a project I wrote before to use easyi as the front-end. I encountered many problems in the process. One of them is that datagrid cannot be well laid out. I have thought of many ways and have limited limitations. Finally, I thought about whether it was a layout problem. After practice, the problem was finally solved.
1: For example, datagrid is used in the project. If the interface is simpler - there is only one datagrid, just set its attribute fit to true to automatically adapt to the form. If there are other divs above the datagrid, datagrid will not automatically adapt to the form. If you check that datagrid has paging controls, you will not be able to see the paging controls. At this time, easyi-layout should be used to separate the form to put the specific content in different parts of easyi-layout. This will solve the adaptive problem very well.
The code is as follows:
The code copy is as follows: <divdata-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 body tag. When the browser window size changes, easyui-layout can adjust its size according to the size of the window. Easyui-layout based on div tags. If you want to have the above functions, you must set the easyui-layout property fit equal to true.
Case 1:
Copy the code as follows:<body>
<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:
The code copy is as follows: <divdata-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 defining easyi in html, the following two writing methods are the same. That is, the properties of the easyi control can be written in the dataoptions property, or these properties can be written on the tag.
Writing method 1:
The code copy is as follows: <divdata-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>
Writing method 2:
Copy the code as follows:<divfit="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's highly adaptable content. I hope you can give you a reference and I hope you can support Wulin.com more.