更改ligerui源码实现分页样式修改

修改后样式:

第一步:实现功能.

　　更改源码部分ligerui.all.js文件

读源代码,发现ligerui底部工具条是这样实现的(ps:注释部分为源码)

_render: function () {
            var g = this, p = this.options;
            g.grid = $(g.element);
            g.grid.addClass("l-panel");
            var gridhtmlarr = [];
            gridhtmlarr.push("        <div class='l-panel-header'><span class='l-panel-header-text'></span></div>");
            gridhtmlarr.push("                    <div class='l-grid-loading'></div>");
            gridhtmlarr.push("        <div class='l-panel-topbar' style='display:none'><div class='l-panel-topbarinner'></div></div><div class='l-clear'></div>");
            gridhtmlarr.push("        <div class='l-panel-bwarp'>");
            gridhtmlarr.push("            <div class='l-panel-body'>");
            gridhtmlarr.push("                <div class='l-grid'>");
            gridhtmlarr.push("                    <div class='l-grid-dragging-line'></div>");
            gridhtmlarr.push("                    <div class='l-grid-popup'><table cellpadding='0' cellspacing='0'><tbody></tbody></table></div>");

            gridhtmlarr.push("                  <div class='l-grid1'>");
            gridhtmlarr.push("                      <div class='l-grid-header l-grid-header1'>");
            gridhtmlarr.push("                          <div class='l-grid-header-inner'><table class='l-grid-header-table' cellpadding='0' cellspacing='0'><tbody></tbody></table></div>");
            gridhtmlarr.push("                      </div>");
            gridhtmlarr.push("                      <div class='l-grid-body l-grid-body1'>");
            gridhtmlarr.push("                      </div>");
            gridhtmlarr.push("                  </div>");

            gridhtmlarr.push("                  <div class='l-grid2'>");
            gridhtmlarr.push("                      <div class='l-grid-header l-grid-header2'>");
            gridhtmlarr.push("                          <div class='l-grid-header-inner'><table class='l-grid-header-table' cellpadding='0' cellspacing='0'><tbody></tbody></table></div>");
            gridhtmlarr.push("                      </div>");
            gridhtmlarr.push("                      <div class='l-grid-body l-grid-body2 l-scroll'>");
            gridhtmlarr.push("                      </div>");
            gridhtmlarr.push("                  </div>");


            gridhtmlarr.push("                 </div>");
            gridhtmlarr.push("              </div>");
            gridhtmlarr.push("         </div>");
            /**
              * 根据样式需求更改分页工具栏样式
              * 修改生成的分页工具条
              */
            //注释掉ligerUI原来的代码
            //gridhtmlarr.push("         <div class='l-panel-bar'>");
            //gridhtmlarr.push("            <div class='l-panel-bbar-inner'>");
            //gridhtmlarr.push("                <div class='l-bar-group  l-bar-message'><span class='l-bar-text'></span></div>");
            //gridhtmlarr.push("            <div class='l-bar-group l-bar-selectpagesize'></div>");
            //gridhtmlarr.push("                <div class='l-bar-separator'></div>");
            //gridhtmlarr.push("                <div class='l-bar-group'>");
            //gridhtmlarr.push("                    <div class='l-bar-button l-bar-btnfirst'><span></span></div>");
            //gridhtmlarr.push("                    <div class='l-bar-button l-bar-btnprev'><span></span></div>");
            //gridhtmlarr.push("                </div>");
            //gridhtmlarr.push("                <div class='l-bar-separator'></div>");
            //gridhtmlarr.push("                <div class='l-bar-group'><span class='pcontrol'> <input type='text' size='4' value='1' style='20px' maxlength='3' /> / <span></span></span></div>");
            //gridhtmlarr.push("                <div class='l-bar-separator'></div>");
            //gridhtmlarr.push("                <div class='l-bar-group'>");
            //gridhtmlarr.push("                     <div class='l-bar-button l-bar-btnnext'><span></span></div>");
            //gridhtmlarr.push("                    <div class='l-bar-button l-bar-btnlast'><span></span></div>");
            //gridhtmlarr.push("                </div>");
            //gridhtmlarr.push("                <div class='l-bar-separator'></div>");
            //gridhtmlarr.push("                <div class='l-bar-group'>");
            //gridhtmlarr.push("                     <div class='l-bar-button l-bar-btnload'><span></span></div>");
            //gridhtmlarr.push("                </div>");
            //gridhtmlarr.push("                <div class='l-bar-separator'></div>");
            //gridhtmlarr.push("                <div class='l-clear'></div>");
            //gridhtmlarr.push("            </div>");
            //gridhtmlarr.push("         </div>");

这样一来实现就很简单了只要重写注释部分源码并增加生成控件和执行点击事件的逻辑即可

重写后的部分代码1:

 gridhtmlarr.push("         <div class='l-panel-bar'>");
            gridhtmlarr.push("            <div class='l-panel-bbar-inner'>");
            gridhtmlarr.push("                <div class='l-bar-group'><span class='pcontrol'>当前第<span id='currentPage'></span> / <span id='allPage'></span>页</span></div>");
            gridhtmlarr.push("                <div class='l-bar-group'>");
            gridhtmlarr.push("                      <div class='pageControl'>");
            gridhtmlarr.push("                          <div class='l-bar-group'>");
            gridhtmlarr.push("                              <div class='l-bar-btnprev'><span>上一页</span></div>");
            gridhtmlarr.push("                          </div>");
            gridhtmlarr.push("                          <div class='l-bar-group'>");
            gridhtmlarr.push("                              <div class='pagebtns'></div>");
            gridhtmlarr.push("                          </div>");
            gridhtmlarr.push("                          <div class='l-bar-group'>");
            gridhtmlarr.push("                              <div class='l-bar-btnnext'><span>下一页</span></div>");
            gridhtmlarr.push("                           </div>");
            gridhtmlarr.push("                      </div>");
            gridhtmlarr.push("                </div>");
            gridhtmlarr.push("                <div class='l-bar-group'>");
            gridhtmlarr.push("                     <span class='gopagebox'><span class='gopageboxspan'>到</span><input id='skippage' type='text' size='4'/><span class='gopageboxspan'>页</span></span>");
            gridhtmlarr.push("                </div>");
            gridhtmlarr.push("                <div class='l-bar-group'>");
            gridhtmlarr.push("                    <div class='pskip'><input id='ligerbtn' type='button' size='4' value='确定'/></div>");
            gridhtmlarr.push("                </div>");
            gridhtmlarr.push("                <div class='l-clear'></div>");
            gridhtmlarr.push("            </div>");
            gridhtmlarr.push("         </div>");

第二步:添加方法:(这一部分代码实现了具体的点击按钮逻辑)

 /**
         * 根据样式需求更改分页工具栏样式
         * 增加_generPageHtml方法
         * _generPageHtml方法重新生成分页工具条样式并注册点击事件
         */
        _generPageHtml: function () {
            var g = this, p = this.options;
            if (g.loading) return true;
            if (p.dataAction != "local" && g.isDataChanged && !confirm(p.isContinueByDataChanged))
                return false;
            //分页处理准备
            var pno = parseInt(p.newPage);
            p.pageCount = parseInt($("#allPage", g.toolbar).html());
            var length = p.pageCount;
            $('.pagebtns').empty();
            //分页处理
            var dot = '<span class="spanDot">...</span>';
            if (length <= 8) {
                for (var i = 1; i <= length; i++) {
                    if (pno == i) {
                        $('.pagebtns').append('<a class="aAll curr" id="a' + i + '">' + i + '</a>');
                    }else {
                        $('.pagebtns').append('<a class="aAll" id="a' + i + '">' + i + '</a>');
                    }
                }
            } else {
                if (pno <= 5) {
                    for (var i = 1; i <= 7; i++) {
                        if (pno == i) {
                            $('.pagebtns').append('<a class="aAll curr" id="a' + i + '">' + i + '</a>');
                        } 
                        else {
                            $('.pagebtns').append('<a class="aAll" id="a' + i + '">' + i + '</a>');
                        }
                    }
                    $('.pagebtns').append(dot);
                } else {
                    $('.pagebtns').append('<a class="aAll" id="a1">1</a>');
                    $('.pagebtns').append('<a class="aAll" id="a2">2</a>');
                    $('.pagebtns').append(dot);
                    var begin = pno - 2;
                    var end = pno + 2;
                    if (end > length) {
                        end = length;
                        begin = end - 4;
                        if (pno - begin < 2) {
                            begin = begin - 1;
                        }
                    } else if (end + 1 == length) {
                        end = length;
                    }
                    for (var i = begin; i <= end; i++) {
                        if (pno == i) {
                            $('.pagebtns').append('<a class="aAll curr" id="a' + i + '">' + i + '</a>');
                        } else {
                            $('.pagebtns').append('<a class="aAll" id="a' + i + '">' + i + '</a>');
                        }
                    }
                    if (end != length) {
                        $('.pagebtns').append(dot);
                        $('.pagebtns').append('<a class="aAll" id="a' + length + '">' + length + '</a>');
                    }
                }
            }
            //注册点击事件
            $('.aAll').click(function (e) {
                var gotoPage = e.currentTarget.innerText;
                if (gotoPage) {
                    g.changePage('a',gotoPage);
                }
            });
        },

其次是根据更改代码一来改动其他方法中的选择器名称,太杂乱,就不一一展示.

接下来是何时调用添加的方法_generPageHtml(创建分页工具条),通过源码阅读,与调试demo,让方法在类库中自动调用是最好的方式,不用在类库的调用中增加额外的工作量.

在调用类库中的_buildPager方法(创建分页)时调用该方法.

注意点:

usePager属性(是否使用分页)的判断

使用本地数据需要调用 Grid的reRender方法

 源码及source:链接：http://pan.baidu.com/s/1pKH0EBT 密码：4bvx

 但根据调研和使用,发现此种分页方式适合页数固定的项目(类似于购物网站),但不适用于后台管理系统,因为后台管理系统数据量可能很大,导致翻页和动态跳动,样式不佳