更改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='width: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>");

View Code