javascript - easyui1.5 DataGrid의 페이지 매김 표시가 정상이 아닙니다. 도와주세요.
- WBOY원래의
- 2016-10-11 14:23:131167검색
1. 문제 설명: easyui1.5를 사용할 때 DataGrid에서 툴바를 사용하면 DataGrid의 페이징 컨트롤이 제대로 표시되지 않는 것을 발견했습니다! 그림과 같이 몇 px 아래로 이동하세요.
2. 디버깅 후 발견 사항(2점):
1. DataGrid 도구 모음에는 두 가지 구현 방법이 있습니다.
두 구현 모두
2. 브라우저 창의 크기를 조정(약간 축소 또는 약간 확대)하면 페이징 표시가 즉시 정상으로 표시됩니다. ps: 초기화가 안된거 같네요~~
3. 질문 코드:
<code> <script>
$(function(){
$('#category').datagrid({
url: '{:U("Category/getList")}',
border: false,
toolbar: '#tbar',
fit: true,
columns:[[
{field:'id',checkbox:true},
{field:'sort',title:'排序',width:100},
{field:'name',title:'栏目名称',width:100},
{field:'create_time',title:'创建时间',width:100},
]],
pagination: true,
fitColumns: true,
rownumbers: true,
data: [
{
"id": 1,
"sort": 1,
"name": "助力海东",
"create_time": "2016-08-15 15:13:87"
},
{
"id": 2,
"sort": 2,
"name": "助力海东",
"create_time": "2016-08-15 15:13:87"
}
]
});
});
</script>
<table id="category"></table>
<div id="tbar" style="padding: 5px;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>
</code>
같은 문제가 있으면 도와주세요. 감사합니다
답글 내용:
1. 문제 설명: easyui1.5를 사용할 때 DataGrid에서 툴바를 사용하면 DataGrid의 페이징 컨트롤이 제대로 표시되지 않는 것을 발견했습니다! 그림과 같이 몇 px 아래로 이동하세요.
2. 디버깅 후 발견 사항(2점):
1. DataGrid 도구 모음에는 두 가지 구현 방법이 있습니다.
두 구현 모두
2. 브라우저 창의 크기를 조정(약간 축소 또는 약간 확대)하면 페이징 표시가 즉시 정상으로 표시됩니다. ps: 초기화가 안된거 같네요~~
3. 질문 코드:
<code> <script>
$(function(){
$('#category').datagrid({
url: '{:U("Category/getList")}',
border: false,
toolbar: '#tbar',
fit: true,
columns:[[
{field:'id',checkbox:true},
{field:'sort',title:'排序',width:100},
{field:'name',title:'栏目名称',width:100},
{field:'create_time',title:'创建时间',width:100},
]],
pagination: true,
fitColumns: true,
rownumbers: true,
data: [
{
"id": 1,
"sort": 1,
"name": "助力海东",
"create_time": "2016-08-15 15:13:87"
},
{
"id": 2,
"sort": 2,
"name": "助力海东",
"create_time": "2016-08-15 15:13:87"
}
]
});
});
</script>
<table id="category"></table>
<div id="tbar" style="padding: 5px;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>
</code>
같은 문제가 있으면 도와주세요. 감사합니다
1. js 배열을 사용하여 작성하면 문제가 없습니다.
2. 창을 변경하는 동안 디스플레이가 정상적으로 표시되는 상황을 많이 겪었는데, 이는 처음으로 정상이 아닌 것 같습니다. easyui가 처음으로 폼의 높이를 가져옵니다. 시간을 정한 다음 페이지를 렌더링하지만 툴바를 작성하면 그 높이가 없으면 당연히 툴바가 표시될 때 페이지가 한 부분 아래로 내려갈 것이라고 생각했습니다. 높이 속성을 추가해 볼 수 있습니다
<code> height : $('#**').height()-**,
pagination : true,
</code>