2 h723836333 h723836333 于 2013.08.29 12:11 提问

jquery easyui 1.3.4 的datagrid无法自适应高度和宽度,
            <div id="searchpanel" class="easyui-panel" border="false" title="查询条件"
                    style="height: 100px;"
                    data-options="iconCls:'icon-search', collapsible:true">
                    <table class="tableForm datagrid-toolbar"
                            style="width: 100%; height: 100%;">
                            <tr>
                                    <th>
                                            用户名
                                    </th>
                                    <td>
                                            <input name="userName" style="width: 155px" />
                                    </td>
                                    <th>
                                            联系电话
                                    </th>
                                    <td>
                                            <input name="phone" style="width: 155px" />
                                    </td>
                                    <th>
                                            所属单位
                                    </th>
                                    <td>
                                            <input name="phone" style="width: 155px" />
                                    </td>

                            </tr>
                            <tr>
                                    <th>
                                            开始日期
                                    </th>
                                    <td>
                                            <input name="timeStart" editable="flase"
                                                    class="easyui-datetimebox" style="width: 155px" />
                                    </td>
                                    <th>
                                            结束日期
                                    </th>
                                    <td>
                                            <input name="timeEnd" editable="flase" class="easyui-datetimebox"
                                                    style="width: 155px" />

                                    </td>
                                    <th></th>
                                    <td>
                                            <a href="#" class="easyui-linkbutton">查询</a>
                                            <a href="#" class="easyui-linkbutton">清空</a>
                                    </td>

                            </tr>
                    </table>


            </div>

            <table id="centerDateGrid">
                    <thead>
                            <tr>

                                    <th field="userId" width="80" sortable="true">
                                            userId
                                    </th>
                                    <th field="loginName" width="100" sortable="true">
                                            loginName
                                    </th>
                                    <th field="userName" width="80" sortable="true">
                                            userName
                                    </th>
                                    <th field="password" width="80" align="right" sortable="true">
                                            password
                                    </th>
                                    <th field="cell" width="80" align="right" sortable="true">
                                            cell
                                    </th>
                                    <th field="qq" width="100" align="right" sortable="true">
                                            qq
                                    </th>
                                    <th field="mail" width="110" sortable="true">
                                            mail
                                    </th>

                            </tr>
                    </thead>
            </table>


    </div>


-->
这是我的center里面的代码

下面是我的js代码:

$(function() {
alert("进来了");
//初始化查询pannel

    // 初始化右下角的提示框
    $.messager.show({
            title : '我的消息',
            msg : '登录成功,欢迎使用此系统',
            timeout : 3000,
            showType : 'slide'
    });
    // 初始化datagrid
    $("#centerDateGrid").datagrid({
            url : 'login/users!findList.action',
            height:"200px;",
            iconCls : 'icon-save',// 图标
            rownumbers : true,// 如果为true,则显示一个行号列。
            singleSelect : true,// 如果为true,则只允许选择一行。
            // autoRowHeight:false,//定义设置行的高度,根据该行的内容。设置为false可以提高负载性能。
            nowrap : false,// 如果为true,则在同一行中显示数据。设置为true可以提高加载性能。
            pagination : true,// 显示分页工具条
            pageSize : 20,// 每页条数
            fit : true,// datagrid自适应宽高
            fitColumns : true,// 使列自动展开/收缩到合适的数据表格宽度。
            idField : 'userId',
            sortName : 'userId',// 定义哪些列可以进行排序
            sortOrder : 'asc',// 定义列的排序顺序,只能是'asc'或'desc'
            border : false,
            pageList : [ 20, 30, 40, 50 ],// 分页条数选择
            toolbar : [ {
                    text : '添加',
                    iconCls : 'icon-add',
                    hander : function() {

                    }
            },'-', {
                    text : '修改',
                    iconCls : 'icon-edit',
                    hander : function() {

                    }

            },'-', {
                    text : '删除',
                    iconCls : 'icon-remove',
                    hander : function() {

                    }

            } ]
            //toolbar:"#toolbar"

    });

});

//查询条件
function search(){

    $("#centerDateGrid").datagrid("load",{
            userName("#userName").val()
    });

}
//清空查询条件
function clear(){

}

13个回答

u013487035
u013487035   2014.12.24 14:06
已采纳

table不要设高度,fit:true;fitColumns : true;

elva762959379
elva762959379   2014.11.21 14:30

可以在datagrid外层加入layout,然后将datagrid的height:100px去掉,添加fit="true"

caryyin
caryyin   2014.11.19 16:36

后面多放了一个。把这个删除试试。
caryyin
caryyin   2014.11.19 16:39

<table id="centerDateGrid">后面多放了一个</div>,把这个</div>删除试试。

showbo
showbo   Ds   Rxr 2014.11.20 10:55

你的查询表单表单占了一定高度了,但是easyui设置fit为true是依据视窗高度的,没有减去查询表单的占位。。这样导致你的导航显示不出来

要先实现你的效果,需要使用center和north布局layout


你饿那个查询表单的html

你的datagridhtml代码

pangang_12345
pangang_12345   2014.11.20 16:04

$('#test').datagrid({
width: ($(window).width()*0.99),
height:($(window).height()*0.98)
});

inthislife
inthislife   2014.11.21 15:22

自己写一段自适应的js代码,用屏幕的高度减去其他部分的高度设置为datagrid的高度(宽度也是一样),就可以实现自适应了

inthislife
inthislife   2014.11.21 15:22

自己写一段自适应的js代码,用屏幕的高度减去其他部分的高度设置为datagrid的高度(宽度也是一样),就可以实现自适应了

wangqiuyun
wangqiuyun   2014.11.23 10:17

首先外面一层easyui-layout,接着设置region,然后datagrid设置fit="true",不要给高度,肯定能行,例如:



lingsen79
lingsen79   2014.11.25 15:38

你的datagrid不要设置宽度和高度,设置fit=true

共13条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!