SNF快速開發平台MVC-瀑布式分頁組件

標籤：sys   參數表   事件   position   var   jpeg   esc   參數說明   頁面   

1.   瀑布式分頁

目前已經比較流行了，以往的這種點擊分頁已經不能滿足廣大網民的需求了。像百度圖片等等，網站都有滾動滾輪直接分頁的功能，這樣體驗也確實好了不少，所以我們也決定在我們的架構內進行整合此功能。一種針對於我們的表格控制項進行瀑布式分頁，另一種是針對於網頁自訂樣式瀑布式分頁。

1.1.      效果展示1.1.1.    表格瀑布式分頁

 

圖 3.1

 

1.1.2.    任意文本的瀑布式分頁

 

圖 3.2

1.2.      添加引用

    <script src="~/Content/js/core/common.scroll.js"></script>

1.3.      表格瀑布式分頁調用說明1.3.1.    定義每次載入多少頁

添加如下代碼，eachTimeShow.rows改變時，會影響每次載入多少頁

//定義每頁幾條，從第幾頁開始查詢，固定格式且一定叫這個名字 this.eachTimeShow

this.eachTimeShow = { page: 1, rows: 20 };//***rows的數值一定要在snf.scrollDatagrid的pageList中存在

this.queryForm.page = ko.observable(self.eachTimeShow.page);

this.queryForm.rows = ko.observable(self.eachTimeShow.rows);

此代碼寫在viewModel的裡邊即可

1.3.2.    定義自由排序組件

在datagrid對象的onLoadSuccess事件中添加如下代碼：

onLoadSuccess: function (d) {

//載入datagrid的瀑布式分頁，注意位置，一定在onLoadSuccess事件中

/*

參數：

{

    total: d.total, //需要載入的資料總條數

    grid: self.grid, //當前瀑布式分頁的datagrid在viewModel中綁定的對象

    gridId: "grid",//綁定的datagrid的id

    pageList: [10, 20, 30, 40, 50],//每次載入多少條的可選下拉

    eachTimeShow: self.eachTimeShow//每次載入的資料條數 與 初始載入第幾頁的對象

}

*/

snf.scrollDatagrid({

    total: d.total, //需要載入的資料總條數

    grid: self.grid, //當前瀑布式分頁的datagrid在viewModel中綁定的對象

    gridId: "grid",//綁定的datagrid的id

    pageList: [10, 20, 30, 40, 50],//每次載入多少條的可選下拉 預設[10, 20, 30, 40, 50]

    eachTimeShow: self.eachTimeShow//每次載入的資料條數 與 初始載入第幾頁的對象

});

}

1.3.3.    重寫表格的查詢事件

//查詢

this.searchClick = function () {

    var param = ko.toJS(self.queryForm);

    self.grid.queryParams($.extend(param, self.eachTimeShow));

};

可對錶格的瀑布式分頁進行條件查詢

1.3.4.    demo範例

程式路徑：

/DEMO/DemoSingleTableScroll/ DemoSingleTableScroll

可在程式中按照此路徑增加菜單查看

 

 

1.4.      任意文本的瀑布式分頁調用說明1.4.1.    定義需要瀑布式分頁的div對象

在需要瀑布式分頁的div標籤中添加屬性scroll-bind

 

                                         圖 3.3

1.4.2.    載入 瀑布式分頁 內容

每個包含scroll-bind標籤的div都需要定義一個如下對象，最後調用snf.scrollDivLoad(self)即可

formatter事件：傳回值表示格式化後，每一格的內容。包含兩個參數，row：當前行資料，row資料中包含rowIndex為當前索引；total：總行數

onAfterFormatter事件：formatter每次載入完成後觸發，可用於綁定事件、自訂縮放等功能，包含一個參數row

onLoadSuccess事件：全部載入完成後觸發，可包含兩個參數row，total

 

//對應div的scroll-bind標籤，注意一定要是div

//參數說明

//{

    //w:左右邊距 預設0

    //h:上下邊距 預設0

    //rows:每次載入多少條資料，預設20

    ///**/url:資料查詢地址，必填

    //queryParams:綁定查詢條件 預設ko.observable(self.queryForm)

    //formatter:每行資料的格式化方式，增加一項rowIndex表示當前的行號

//}

this.DemoSingleTable = {

    w: 4,

    h: 100,

    rows: 5,//每次載入多少行

    pageList:[5, 10, 20, 30, 50],//每次載入多少條，可選擇

    url: "/api/DEMO/DemoSingleTableScroll/GetDemoSingleTableScrollBar",//資料載入地址

    queryParams: ko.observable(self.queryForm),//查詢條件

    formatter :function (row){//每行資料格式化方法

        var str = "<div style=‘width:100%;height:50px;margin-left:200px‘>";

        str += "<span style=‘position:relative;margin: 0 auto;top: -50%;‘>序號：" + (row.rowIndex + 1) + " 名稱："+row.Name+"，編號條碼：</span><img src=‘data:image/jpeg;base64," + row.CodeBar + "‘/>";

        str += "</div>";

        return str;

    },

    onAfterFormatter: function (row) {

       

    },

    onLoadSuccess: function (rows, total){

       

    }

};

 

//載入當前頁面全部具有scroll-bind屬性的div標籤

snf.scrollDivLoad(self);

 

snf.scrollDivLoad事件一定要在scroll-bind對象定義之後在調用，本例子中，即應當在this.DemoSingleTable定義之後再調用此方法

1.4.3.    定義查詢事件

//查詢

this.searchClick = function () {

    snf.scrollModelSearch("DemoSingleTable");//參數表示3.4.1中綁定的scroll-bind屬性，本例子中即為DemoSingleTable

 

};

可以對瀑布式分頁的資料來源進行條件查詢

1.4.4.    demo範例

程式路徑：

/DEMO/DemoSingleTableScroll/ DemoSingleTableScrollNoGird（比較簡略，通俗易懂）

/Sys/BusinessCard/BusinessCardAdmin（內容較全，包含所有事件和其他很多功能的整合）

可在程式中按照此路徑增加菜單查看

 

SNF快速開發平台MVC-瀑布式分頁組件