easyui 学习总结

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wc250025/article/details/50772152

1.分页折行导致显示问题

问题描述:

1)缩小datagrid的宽度,直至分页刚刚折行。


2)此时再隐藏pageList按钮和刷新按钮。此时table底部将出现一个白条。

        $('#dg').datagrid({data: getData()}).datagrid('clientPaging')
                .datagrid("getPager").pagination({showRefresh: false, showPageList: false});


问题解决方法:

在用代码隐藏pageList和刷新按钮后,调用datagrid的resize方法。

        $('#dg').datagrid({data: getData()}).datagrid('clientPaging')
                .datagrid("getPager").pagination({showRefresh: false, showPageList: false});
        $('#dg').datagrid('resize');

提示:如果没有问题,就不要乱用resize,否则可能有其他显示问题。


2.datagrid客户端分页时显示空行(ShowEmptyRows)

point:使用datagrid的尾行(Foot rows)作为行的补充,动态的去添加尾行的个数,从而达到显示空行的效果。



<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="../components/easyui_1.4/easyui-include.js"></script>

</head>
<body>
<table id="dg" title="Client Side Pagination" style="width:680px;" data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:false,
                pagination:true,
                pageSize:5,
                pageList:[5],
                showFooter: true">
    <thead>
    <tr>
        <th field="inv" width="80">Inv No</th>
        <th field="date" width="100">Date</th>
        <th field="name" width="80">Name</th>
        <th field="amount" width="80" align="right">Amount</th>
        <th field="price" width="80" align="right">Price</th>
        <th field="cost" width="100" align="right">Cost</th>
        <th field="note" width="110">Note</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Inv No 1</td>
        <td>2016-03-01</td>
        <td>Name 1</td>
        <td>339</td>
        <td>240</td>
        <td>81360</td>
        <td>Note 1</td>
    </tr>
    <tr>
        <td>Inv No 2</td>
        <td>2016-03-01</td>
        <td>Name 2</td>
        <td>639</td>
        <td>95</td>
        <td>60705</td>
        <td>Note 2</td>
    </tr>
    <tr>
        <td>Inv No 3</td>
        <td>2016-03-01</td>
        <td>Name 3</td>
        <td>440</td>
        <td>245</td>
        <td>107800</td>
        <td>Note 3</td>
    </tr>
    <tr>
        <td>Inv No 4</td>
        <td>2016-03-01</td>
        <td>Name 4</td>
        <td>828</td>
        <td>894</td>
        <td>740232</td>
        <td>Note 4</td>
    </tr>
    <tr>
        <td>Inv No 5</td>
        <td>2016-03-01</td>
        <td>Name 5</td>
        <td>189</td>
        <td>654</td>
        <td>123606</td>
        <td>Note 5</td>
    </tr>
    <tr>
        <td>Inv No 6</td>
        <td>2016-03-01</td>
        <td>Name 6</td>
        <td>475</td>
        <td>766</td>
        <td>363850</td>
        <td>Note 6</td>
    </tr>
    <tr>
        <td>Inv No 7</td>
        <td>2016-03-01</td>
        <td>Name 7</td>
        <td>367</td>
        <td>287</td>
        <td>105329</td>
        <td>Note 7</td>
    </tr>
    <tr>
        <td>Inv No 8</td>
        <td>2016-03-01</td>
        <td>Name 8</td>
        <td>251</td>
        <td>883</td>
        <td>221633</td>
        <td>Note 8</td>
    </tr>
    </tbody>
</table>
<script>
    // 分页
    function pagerFilter(data, datagrid) {
        if (typeof data.length == 'number' && typeof data.splice == 'function') {	// is array
            data = {
                total: data.length,
                rows: data
            }
        }
        var opts = datagrid.datagrid('options');
        var pager = datagrid.datagrid('getPager');
        pager.pagination({
            onSelectPage: function (pageNum, pageSize) {
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh', {
                    pageNumber: pageNum,
                    pageSize: pageSize
                });
                datagrid.datagrid('loadData', data);
            }
        });
        if (!data.originalRows) {
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));

        var pageData = new Object();
        pageData.data = data;
        //判断是否添加空行
        var min = data.total - start
        var needCreateCount;
        if (min < opts.pageSize) {
            //差几个 补几个
            needCreateCount = opts.pageSize - min;
        }
        pageData.needCreateCount = needCreateCount;

        return pageData;
    }

    function pf_dg(data) {
        var pageData = pagerFilter(data, $(this));

        if (pageData.needCreateCount != undefined || pageData.needCreateCount != 0) {
            var footList = new Array();
            while (pageData.needCreateCount > 0) {
                footList.push(new Object());
                pageData.needCreateCount--;
            }
            $('#dg').datagrid('reloadFooter', footList);
        }
        return pageData.data;
    }

    $(function () {
        $('#dg').datagrid({loadFilter: pf_dg})
                .datagrid("getPager").pagination({showRefresh: false, showPageList: false});
        $("#dg").datagrid("resize");
    });
</script>
</body>
</html>

不足:在没有横向滚动条的状态下,可以正常显示。但是如果table的宽度小,出现横向滚动条的话,会有下面的问题。

虽然加上fitColumns:true会没有滚动条,但是里面的文字还是会看不清,目前还不知道怎么解,欢迎大家来共享思路。

     

展开阅读全文

没有更多推荐了,返回首页