opq8976712
2013-08-29 04:11
采纳率: 50%
浏览 22.9k

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条回答 默认 最新

  • 落花雨-- 2014-12-24 06:06
    已采纳

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

    点赞 评论
  • Cary_诚 2014-11-19 08:39

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

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

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


    你饿那个查询表单的html

    你的datagridhtml代码

    点赞 评论
  • pangang_12345 2014-11-20 08:04

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

    点赞 评论
  • elvaweijy 2014-11-21 06:30

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

    点赞 评论
  • 不断在进步 2014-11-21 07:22

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

    点赞 评论
  • 不断在进步 2014-11-21 07:22

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

    点赞 评论
  • wangqiuyun 2014-11-23 02:17

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



    点赞 评论
  • lingsen79 2014-11-25 07:38

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

    点赞 评论
  • 忠义白马庙 2014-12-01 03:06

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

    点赞 评论
  • D哈迪斯 2014-12-08 11:59

    如果要自适应的话,table外边不能有任何元素,你的那个多了个div,去掉就可以了,另外别忘记在你的table里面写入fit:true

    点赞 评论

相关推荐 更多相似问题