Easyui datagrid内容自动撑开页面

在做项目时会用到Easyui datagrid插件，因为里面的数据各不相一，可能会存在内容无法撑开页面的效果，以下分享一下做得成功的一个案例，如图：

 

<div id="toolbar" style="padding: 5px;">
    <div>
        <a href="#" class="easyui-linkbutton" onclick="OpenDiag();" iconcls="icon-add">新增</a>
    </div>
</div>
<table class="easyui-datagrid" id="table1" toolbar="#toolbar" style="height: 700px">
</table>
<div id="divAddDiag">
    <table class="gentable_con" cellpadding="5">
        <tr>
            <td class="alignright" style="width: 35%">
                关键词标识:
            </td>
            <td>
                <input id="hdKeyCode" type="hidden" />
                <input id="txtKeyCode" class="easyui-validatebox" data-options="required:true,validType:'length[1,10]',invalidMessage:'最多可输入10个汉字'" />
            </td>            
        </tr>   
        <tr>
            <td class="alignright" style="width: 35%">
                关键词:
            </td>
            <td>
                <input id="hdKeys" type="hidden" />
                <input id="txtKeys" class="easyui-validatebox" data-options="required:true,validType:'length[1,10]',invalidMessage:'最多可输入10个汉字'" />
            </td>            
        </tr>        
        <tr>
            <td class="alignright" >
                缓存时间:
            </td>
            <td>
                <input id="txtCacheTime" type="text" />
            </td>
        </tr>
        <tr>
            <td class="alignright" >
                频道ID:
            </td>
            <td>
                <input id="txtChannelID" type="text" />
            </td>
        </tr>
    </table>
</div>

 

$(function () {
    $("#table1").datagrid({
        url: 'GetKeysList',
        fit: true,
        rownumbers: true,
        fitColumns: true,
        singleSelect: true,
        pagination: true,
        pageSize: 30,
        pageList: [30, 50, 100],
        columns: [[
            { field: 'KeyCode', title: '关键词标识', width: 50 },
            { field: 'Keys', title: '关键词', width: 50 },
            { field: 'CacheTime', title: '缓存时间(秒)', width: 30 },
            { field: 'TotalCount', title: '频道ID', width: 30 },
            { field: 'LastCacheDate', title: '最后缓存时间', width: 50, formatter: dateFormatter },
            { field: 'CreateTime', title: '创建时间', width: 50, formatter: dateFormatter },
            { field: 'Oper', title: '操作', width: 200, formatter: formatterOper }
        ]]
    });
    $("body").css({ visibility: "visible" });

    $(".btn-add").click(function () {
        OpenDiag();
    });

    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, // 月
            "d+": this.getDate(), // 天
            "h+": this.getHours(), // 时
            "m+": this.getMinutes(), // 分
            "s+": this.getSeconds(), // 秒
            "q+": Math.floor((this.getMonth() + 3) / 3), // 刻
            "S": this.getMilliseconds() //毫秒
            // millisecond
        };
        if (/(y+)/.test(format))
            format = format.replace(RegExp.$1, (this.getFullYear() + "")
                .substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(format))
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
                    : ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    };
});

function formatterOper(value, rowData, rowIndex) {
    return "<a href='#' onclick='EditKey(" + JSON.stringify(rowData) + ")'  data-value=" + JSON.stringify(rowData) + ">编辑</a>" +
           "<a href='#' onclick='DeleteKey(this)'  style='margin-left:15px;' data-value='" + rowData.KeyCode + "'>删除</a>";
}

function dateFormatter(value, rec, index) {
    if (value == null || value == '') {
        return '';
    }
    var dt;
    if (value instanceof Date) {
        dt = value; ;
    } else {
        dt = new Date(value);
        if (isNaN(dt)) {
            value = value.replace(/\/Date\((-?\d+)\)\//, '$1');
            dt = new Date();
            dt.setTime(value);
        }
    }
    return dt.format("yyyy-MM-dd hh:mm:ss");
}