zoukankan      html  css  js  c++  java
  • 一步步实现 easyui datagrid表格宽度自适应,效果非常好

    一步步实现 easyui datagrid表格宽度自适应,效果非常好:

    一、设置公共方法,使得datagrid的属性  fitColumns:true

    $(function(){
      //初始加载,表格宽度自适应 $(document).ready(
    function(){ fitCoulms(); });
      //浏览器窗口大小变化后,表格宽度自适应 $(window).resize(
    function(){ fitCoulms(); }); }) //表格宽度自适应,这里的#dg是datagrid表格生成的div标签 function fitCoulms(){ $('#dg').datagrid({ fitColumns:true }); }

    二、在$('#dg').datagrid中设置columns的各列宽度比例

    当 fitColumns:true时,columns里的width变为改列宽度占表格总宽度大小的比例,而不是实际宽度

    下面例子中,各列的宽度大小比为:250:200:110:114

    //    视频广告数据统计的表格数据渲染
        $('#frequencyDg').datagrid({
            scrollbarSize:0,
            method : 'get',
            loadMsg: '正在加载中,请稍等... ',
            nowrap:false,//允许换行
            fitColumns:true,//宽度自适应
            emptyMsg: '<span>无记录</span>',
            onLoadSuccess : function(data) {// Fires when data is
                var classify = $("#classify").val();
                $('#frequencyPp').pagination('refresh', {
                    total : data.total,
                    pageNumber : data.page,
                    classify:classify
                });
            },
            columns:[[
                {
                    field:'name',
                    title:'广告名称',
                    250, //当 fitColumns:true时,columns里的width变为改列宽度占表格总宽度大小的比例
                    align:'center'
                },          
                {
                    field:'startTime',
                    title:'投放日期',
                    200,
                    align:'center'
                },
                {
                    field:'playCount',
                    title:'播放次数',
                    110,
                    align:'center',
                    editor:'text'
                },
                {
                    field:'userSawTimes',
                    title:'用户观看次数',
                    144,
                    align:'center',
                    editor:'text'
                }
            ]]
        });

    三、将body设置为min-1100px。使得datagrid表格宽度大于浏览器宽度时,下面可以出现横向滚动条,可以横向拉动看到整个datagrid数据。

    body{
        padding: 0;
        margin: 0;
        border: 0;
        min- 1100px;
        box-sizing: border-box;
        font-size: 14px;
    }

    显示效果如下图:

  • 相关阅读:
    基于K-means聚类算法的图像分割 和 基于机器学习的图像二元分类
    .off文件三维数据读取并显示
    滑动窗口&Region Proposal&Selective Search&KMeans&二元分类(空间分割)
    ENVI+IDL遥感图像处理
    OpenCV与图像分割 边界检测
    SublimeText3追踪函数工具CTags设置及使用
    岗位要求
    bash shell脚本如何获取脚本所在目录
    mongodb获取到的可能已经沦为肉鸡的云服务器地址
    wireshark查看包显示:Packet size limitedduring capture
  • 原文地址:https://www.cnblogs.com/baiyangyuanzi/p/6702742.html
Copyright © 2011-2022 走看看