easyui 学习总结

来源：互联网发布：中国阜宁网络发言人编辑：程序博客网时间：2024/04/30 22:18

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会没有滚动条，但是里面的文字还是会看不清，目前还不知道怎么解，欢迎大家来共享思路。

0 0