Merge branch 'feature/Query.view_add_paging_setting' into 'develop'

Merge of feature/[数据中心]视图设置中增加分页条的设置 to develop

See merge request o2oa/o2oa!164

o2web/source/o2_core/o2/widget/$Paging/default/css.wcss

@@ -54,7 +54,8 @@
         "float" : "left"
     },
     "pageItem" : {
-        "width": "24px",
+        "padding-left": "5px",
+        "padding-right" : "5px",
         "height": "24px",
         "border": "1px solid #e6e6e6",
         "text-align": "center",
@@ -68,6 +69,38 @@
     "pageItem_over" : {
         "background-color": "#f1f1f1"
     },
+    "preBatchPage" : {
+        "padding-left": "5px",
+        "padding-right" : "5px",
+        "height": "24px",
+        "border": "1px solid #e6e6e6",
+        "text-align": "center",
+        "line-height": "24px",
+        "cursor": "pointer",
+        "float": "left",
+        "margin-right": "10px",
+        "background-color": "#ffffff",
+        "color": "#777777"
+    },
+    "preBatchPage_over" : {
+        "background-color": "#f1f1f1"
+    },
+    "nextBatchPage" : {
+        "padding-left": "5px",
+        "padding-right" : "5px",
+        "height": "24px",
+        "border": "1px solid #e6e6e6",
+        "text-align": "center",
+        "line-height": "24px",
+        "cursor": "pointer",
+        "float": "left",
+        "margin-right": "10px",
+        "background-color": "#ffffff",
+        "color": "#777777"
+    },
+    "nextBatchPage_over" : {
+        "background-color": "#f1f1f1"
+    },
     "currentPage" : {
         "width": "24px",
         "height": "24px",
@@ -86,7 +119,7 @@
         "line-height" : "20px",
         "text-align" : "center",
         "width" : "20px",
-        "margin-left" : "5px",
+        "margin-left" : "10px",
         "border" : "1px solid #ddd"
     },
     "pageJumper_over" : {

o2web/source/o2_core/o2/widget/$Paging/forum/css.wcss

@@ -61,6 +61,42 @@
         "background-color" : "#fff",
         "color" : "#43AAFA"
     },
+    "preBatchPage" : {
+        "float" : "left",
+        "height" : "20px",
+        "min-width" : "16px",
+        "line-height" : "20px",
+        "text-align" : "center",
+        "padding" : "2px 5px",
+        "border" : "1px solid #f3f3f3",
+        "background-color" : "#f3f3f3",
+        "cursor" : "pointer",
+        "color" : "#333",
+        "margin" : "5px"
+    },
+    "preBatchPage_over" : {
+        "border" : "1px solid #43AAFA",
+        "background-color" : "#fff",
+        "color" : "#43AAFA"
+    },
+    "nextBatchPage" : {
+        "float" : "left",
+        "height" : "20px",
+        "min-width" : "16px",
+        "line-height" : "20px",
+        "text-align" : "center",
+        "padding" : "2px 5px",
+        "border" : "1px solid #f3f3f3",
+        "background-color" : "#f3f3f3",
+        "cursor" : "pointer",
+        "color" : "#333",
+        "margin" : "5px"
+    },
+    "nextBatchPage_over" : {
+        "border" : "1px solid #43AAFA",
+        "background-color" : "#fff",
+        "color" : "#43AAFA"
+    },
     "currentPage" : {
         "float" : "left",
         "height" : "20px",
@@ -82,7 +118,7 @@
         "width" : "20px",
         "margin-top" : "5px",
         "margin-bottom" : "5px",
-        "margin-left" : "5px",
+        "margin-left" : "10px",
         "border" : "1px solid #ddd"
     },
     "pageJumper_over" : {

o2web/source/o2_core/o2/widget/Paging.js

@@ -10,13 +10,18 @@ o2.widget.Paging = new Class({
         currentPage: 1,
         itemSize: 0,
         pageSize: 0,
+        hasFirstPage : true,
+        hasLastPage : true,
         hasNextPage: true,
         hasPrevPage: true,
+        hasBatchTuring : true,
         hasTruningBar: true,
         hasJumper: true,
         hiddenWithDisable: false,
         hiddenWithNoItem: true,
         text: {
+            preBatchTuring : "...",
+            nextBatchTuring : "...",
             prePage: "",
             nextPage: "",
             firstPage: "",
@@ -75,12 +80,18 @@ o2.widget.Paging = new Class({
             max = currentPage + halfCount;
         }
 
-        if  (min > 1 || !this.options.hiddenWithDisable )this.createFirst();
+        if( this.options.hasFirstPage && (min > 1 || showWithDisable) ){
+            this.createFirst();
+        }
 
         if (this.options.hasPrevPage && ( currentPage != 1 || showWithDisable ) ){
             this.createPrev();
         }
 
+        if( this.options.hasTruningBar && this.options.hasBatchTuring && ( min > 1 ) ){ //showWithDisable
+            this.createPrevBatch( min );
+        }
+
         if( this.options.hasTruningBar ){
             this.pageTurnContainer = new Element("div", {
                 styles : this.css.pageTurnContainer
@@ -98,15 +109,21 @@ o2.widget.Paging = new Class({
             }
         }
 
-        if (this.options.hasJumper) {
-            this.createPageJumper();
+        if( this.options.hasTruningBar && this.options.hasBatchTuring && ( max < pageSize )){ //showWithDisable
+            this.createNextBatch( max );
         }
 
         if (this.options.hasNextPage && ( currentPage != pageSize || showWithDisable )){
             this.createNext();
         }
 
-        if( max < pageSize || showWithDisable )this.createLast();
+        if(this.options.hasLastPage && ( max < pageSize || showWithDisable ) ){
+            this.createLast();
+        }
+
+        if (this.options.hasJumper) {
+            this.createPageJumper();
+        }
     },
     createFirst : function(){
         var firstPage = this.firstPage = new Element("div.firstPage", {
@@ -194,6 +211,54 @@ o2.widget.Paging = new Class({
         });
         return pageTurnNode;
     },
+    createPrevBatch : function( min ){
+        this.preBatchPage = new Element("div.prePage", {
+            styles: this.css.preBatchPage
+        }).inject(this.node);
+        if (this.options.text.preBatchTuring ) this.preBatchPage.set("text", this.options.text.preBatchTuring);
+        this.preBatchPage.addEvents({
+            "mouseover": function (ev) {
+                ev.target.setStyles(this.css.preBatchPage_over)
+            }.bind(this),
+            "mouseout": function (ev) {
+                ev.target.setStyles(this.css.preBatchPage )
+            }.bind(this),
+            "click": function () {
+                var page;
+                if( this.options.visiblePages % 2 == 1 ){
+                    page = min - Math.ceil( this.options.visiblePages / 2 );
+                }else{
+                    page = min - Math.ceil( this.options.visiblePages / 2 ) - 1;
+                }
+                if( page < 1 )page = 1;
+                this.gotoPage( page );
+            }.bind(this)
+        });
+    },
+    createNextBatch : function( max ){
+        this.nextBatchPage = new Element("div.prePage", {
+            styles: this.css.nextBatchPage
+        }).inject(this.node);
+        if (this.options.text.nextBatchTuring ) this.nextBatchPage.set("text", this.options.text.nextBatchTuring);
+        this.nextBatchPage.addEvents({
+            "mouseover": function (ev) {
+                ev.target.setStyles(this.css.nextBatchPage_over);
+            }.bind(this),
+            "mouseout": function (ev) {
+                ev.target.setStyles(this.css.nextBatchPage );
+            }.bind(this),
+            "click": function () {
+                var page;
+                if( this.options.visiblePages % 2 == 1 ){
+                    page = max + Math.ceil( (this.options.visiblePages) / 2 );
+                }else{
+                    page = max + Math.ceil( (this.options.visiblePages) / 2 ) + 1;
+                }
+                if( page > this.options.pageSize )page = this.options.pageSize;
+                this.gotoPage( page );
+            }.bind(this)
+        });
+    },
     createPageJumper : function(){
         var _self = this;
         var pageJumper = this.pageJumper = new Element("input.pageJumper", {
@@ -225,6 +290,7 @@ o2.widget.Paging = new Class({
         });
     },
     gotoPage: function (num) {
+        if( typeOf(num) === "string" )num = num.toInt();
         if (num < 1 || num > this.options.pageSize) return;
         this.fireEvent("jumpingPage", [num]);
         this.options.currentPage = num;

o2web/source/x_component_query_Query/Viewer.js

@@ -710,14 +710,17 @@ MWF.xApplication.query.Query.Viewer = MWF.QViewer = new Class({
         this.viewPageAreaNode.empty();
         this.paging = new o2.widget.Paging(this.viewPageAreaNode, {
             countPerPage: this.json.pageSize || this.options.perPageCount,
-            visiblePages: 10,
+            visiblePages: this.viewJson.visiblePages ? this.viewJson.visiblePages.toInt() : 9,
             currentPage: this.currentPage,
             itemSize: this.count,
             pageSize: this.pages,
-            hasNextPage: true,
-            hasPrevPage: true,
-            hasTruningBar: true,
-            hasJumper: true,
+            hasNextPage: typeOf( this.viewJson.hasPreNextPage ) === "boolean" ? this.viewJson.hasPreNextPage : true,
+            hasPrevPage: typeOf( this.viewJson.hasPreNextPage ) === "boolean" ? this.viewJson.hasPreNextPage : true,
+            hasTruningBar: typeOf( this.viewJson.hasTruningBar ) === "boolean" ? this.viewJson.hasTruningBar : true,
+            hasBatchTuring: typeOf( this.viewJson.hasBatchTuring ) === "boolean" ? this.viewJson.hasBatchTuring : true,
+            hasFirstPage: typeOf( this.viewJson.hasFirstLastPage ) === "boolean" ? this.viewJson.hasFirstLastPage : true,
+            hasLastPage: typeOf( this.viewJson.hasFirstLastPage ) === "boolean" ? this.viewJson.hasFirstLastPage : true,
+            hasJumper: typeOf( this.viewJson.hasPageJumper ) === "boolean" ? this.viewJson.hasPageJumper : true,
             hiddenWithDisable: false,
             hiddenWithNoItem: true,
             text: {
@@ -735,6 +738,7 @@ MWF.xApplication.query.Query.Viewer = MWF.QViewer = new Class({
     },
     _initPage: function(){
         this.count = this.bundleItems.length;
+
         var i = this.count/this.json.pageSize;
         this.pages = (i.toInt()<i) ? i.toInt()+1 : i;
         this.currentPage = 1;

o2web/source/x_component_query_ViewDesigner/$View/default/css.wcss

@@ -168,6 +168,13 @@
         "line-height": "24px",
         "border-bottom": "1px dashed #CCC"
     },
+    "editTableTitleNoWidth": {
+        "font-weight": "bold",
+        "font-size": "12px",
+        "height": "24px",
+        "line-height": "24px",
+        "border-bottom": "1px dashed #CCC"
+    },
     "editTableValue": {
         "height": "24px",
         "line-height": "24px",

o2web/source/x_component_query_ViewDesigner/$View/view.html

@@ -38,14 +38,6 @@
                     <input class="editTableRadio" name="data.isSequence" text{($.data.isSequence!=='yes')?'checked':''} type="radio" value="no"/>否
                 </td>
             </tr>
-            <tr>
-                <td class="editTableTitle">最大行数:</td>
-                <td class="editTableValue"><input type="number" name="count" value="text{$.count || 600}" class="editTableInput"/></td>
-            </tr>
-            <tr>
-                <td class="editTableTitle">每页行数:</td>
-                <td class="editTableValue"><input type="number" name="pageSize" value="text{$.pageSize || 20}" class="editTableInput"/></td>
-            </tr>
 <!--            <tr>-->
 <!--                <td class="editTableTitle">视图样式:</td>-->
 <!--                <td class="editTableValue">-->
@@ -72,6 +64,66 @@
             <!--<td class="editTableValue"><input type="text" name="max" value="text{$.max}" class="editTableInput"/></td>-->
             <!--</tr>-->
         </table>
+        <div style="height:24px; text-align: center; line-height: 24px; background-color: #EEE; border-top: 1px solid #999; font-weight: bold">分页</div>
+        <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
+            <tr>
+                <td class="editTableTitleNoWidth">最大行数:</td>
+                <td class="editTableValue"><input type="number" name="count" value="text{$.count || 600}" class="editTableInput"/></td>
+            </tr>
+            <tr>
+                <td class="editTableTitleNoWidth">每页行数:</td>
+                <td class="editTableValue"><input type="number" name="pageSize" value="text{$.pageSize || 20}" class="editTableInput"/></td>
+            </tr>
+            <tr>
+                <td class="editTableTitleNoWidth">显示数字分页:</td>
+                <td class="editTableValue">
+                    <input class="editTableRadio" name="data.hasTruningBar" text{($.data.hasTruningBar!==false)?'checked':''}  onclick="
+                    if (this.checked){
+                        $('text{$.id}visiblePagesTr').setStyle('display', 'table-row');
+                        $('text{$.id}hasBatchTuringTr').setStyle('display', 'table-row');
+                    }" type="radio" value="true"/>是
+                    <input class="editTableRadio" name="data.hasTruningBar" text{($.data.hasTruningBar===false)?'checked':''}   onclick="
+                    if (this.checked){
+                        $('text{$.id}visiblePagesTr').setStyle('display', 'none');
+                        $('text{$.id}hasBatchTuringTr').setStyle('display', 'none');
+                    }" type="radio" value="false"/>否
+                </td>
+            </tr>
+            <tr id="text{$.id}visiblePagesTr">
+                <td class="editTableTitleNoWidth">数字显示个数:</td>
+                <td class="editTableValue"><input type="number" name="data.visiblePages" value="text{$.data.visiblePages || 9}" onchange="
+                    $('text{$.id}visiblePagesText').set('text', this.value);
+                " class="editTableInput"/></td>
+            </tr>
+            <tr id="text{$.id}hasBatchTuringTr">
+                <td class="editTableTitleNoWidth">显示前后<span id="text{$.id}visiblePagesText">text{$.data.visiblePages || 9}</span>页:</td>
+                <td class="editTableValue">
+                    <input class="editTableRadio" name="data.hasBatchTuring" text{($.data.hasBatchTuring!==false)?'checked':''} type="radio" value="true"/>是
+                    <input class="editTableRadio" name="data.hasBatchTuring" text{($.data.hasBatchTuring===false)?'checked':''} type="radio" value="false"/>否
+                </td>
+            </tr>
+            <tr>
+                <td class="editTableTitleNoWidth">显示首页末页:</td>
+                <td class="editTableValue">
+                    <input class="editTableRadio" name="data.hasFirstLastPage" text{($.data.hasFirstLastPage!==false)?'checked':''} type="radio" value="true"/>是
+                    <input class="editTableRadio" name="data.hasFirstLastPage" text{($.data.hasFirstLastPage===false)?'checked':''} type="radio" value="false"/>否
+                </td>
+            </tr>
+            <tr>
+                <td class="editTableTitleNoWidth">显示上页下页:</td>
+                <td class="editTableValue">
+                    <input class="editTableRadio" name="data.hasPreNextPage" text{($.data.hasPreNextPage!==false)?'checked':''} type="radio" value="true"/>是
+                    <input class="editTableRadio" name="data.hasPreNextPage" text{($.data.hasPreNextPage===false)?'checked':''} type="radio" value="false"/>否
+                </td>
+            </tr>
+            <tr>
+                <td class="editTableTitleNoWidth">显示跳页:</td>
+                <td class="editTableValue">
+                    <input class="editTableRadio" name="data.hasPageJumper" text{($.data.hasPageJumper!==false)?'checked':''} type="radio" value="true"/>是
+                    <input class="editTableRadio" name="data.hasPageJumper" text{($.data.hasPageJumper===false)?'checked':''} type="radio" value="false"/>否
+                </td>
+            </tr>
+        </table>
 
         <div style="height:24px; text-align: center; line-height: 24px; background-color: #EEE; border-top: 1px solid #999; font-weight: bold">权限</div>
         <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable" id="processEditStarter">