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(){

}

11个回答

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

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

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

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

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


你饿那个查询表单的html

你的datagridhtml代码

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

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

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

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



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

datagrid 中的 data-options=“fit:true;....................."

共11条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐