EasyUISNF急速支付平台MVC-瀑布式分页组件

1.   瀑布式分页

现阶段早就比较流行了,以后的这种点击分页已经不可能满意广大网上朋友的必要了。像百度图片等等,网站都有滚动滚轮直接分页的效益,那样感受也真的好了很多,所以大家也决定在我们的框架内实行集成此功用。一种针对于大家的报表控件举行瀑布式分页,另一种是对准于网页自定义样式瀑布式分页。

1.1.      效果展现

1.1.1.    表格瀑布式分页

 EasyUI 1

图 3.1

 

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

 EasyUI 2

图 3.2

1.2.      添加引用

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

1.3.      表格瀑布式分页调用表达

1.3.1.    定义每一遍加载多少页

添加如下代码,eachTimeShow.rows改变时,会影响每一回加载多少页

//定义每页几条,从第几页发轫询问,固定格式且自然叫这几个名字
this.each提姆eShow

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.each提姆eShow//每趟加载的多寡条数 与
开头加载第几页的目的

});

}

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

如图

 EasyUI 3

                                         图 3.3

1.4.2.    加载 瀑布式分页 内容

各类包涵scroll-bind标签的div都供给定义一个之类目的,最终调用snf.scrollDivLoad(self)即可

formatter事件:重回值表示格式化后,每一格的剧情。包含五个参数,row:当前行数据,row数据中涵盖rowIndex为当下目录;total:总行数

onAfterFormatter事件:formatter每一回加载成功后触发,可用来绑定事件、自定义缩放等成效,包括1个参数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/德姆oSingleTableScroll/Get德姆oSingleTableScrollBar”,//数据加载地址

    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:
-十分之五;’>序号:” + (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.德姆oSingleTable定义之后再调用此措施

1.4.3.    定义查询事件

//查询

this.searchClick = function () {

   
snf.scrollModelSearch(“DemoSingleTable”);//参数表示3.4.第11中学绑定的scroll-bind属性,本例子中即为德姆oSingleTable

 

};

能够对瀑布式分页的数据源实行规范查询

1.4.4.    demo样例

次第路径:

/DEMO/德姆oSingleTableScroll/
德姆oSingleTableScrollNoGird(比较简便,通俗易懂)

/Sys/BusinessCard/BusinessCardAdmin(内容较全,包蕴全体事件和其它众多功力的三合一)

可在先后中依据此路径扩大菜单查看

 


作者: 王金斗
出处: http://www.cnblogs.com/spring_wang/
Email: spring_best@yeah.net
QQ:903639067 
QQ群:322581894

 那一个体系教程文书档案,欢迎转发:

SNF急速支付平台WinForm-CS甘特图http://www.cnblogs.com/spring_wang/p/7418423.html

SNF快速支付平台MVC-审核流,审核实现后会给下2个审核人发邮件,下三个审核人能够不记名种类,在邮件里展开核查处理http://www.cnblogs.com/spring_wang/p/7418402.html

SNF连忙支付平台MVC-名片管理(实际名片样式) http://www.cnblogs.com/spring_wang/p/7416540.html

SNF飞速支付平台MVC-表格单元格合并组件http://www.cnblogs.com/spring_wang/p/7416368.html

SNF快速支付平台MVC-单据状态水印http://www.cnblogs.com/spring_wang/p/7416349.html

SNF飞快支付平台MVC-瀑布式分页组件http://www.cnblogs.com/spring_wang/p/7411116.html

SNF急速支付平台MVC-高级查询组件http://www.cnblogs.com/spring_wang/p/7411113.html

SNF神速支付平台MVC-自由排序组件http://www.cnblogs.com/spring_wang/p/7411090.html

SNF快速支付平台MVC-各类级联绑定格局,演示样例程序(包涵表单和表格控件)http://www.cnblogs.com/spring_wang/p/7405371.html

SNF连忙支付平台MVC-集成了百度开源项目echarshttp://www.cnblogs.com/spring_wang/p/7405171.html

SNF飞快支付平台WinForm-平板拍照及扫描二维码成效http://www.cnblogs.com/spring_wang/p/7404600.html

SNF快速支付平台WinForm平整引擎全部介绍及利用http://www.cnblogs.com/spring\_wang/p/7404182.html

SNF火速支付平台WinForm-Grid表格控件大全http://www.cnblogs.com/spring_wang/p/7403881.html

SNF急迅支付平台WinForm-表单验证控件-通用http://www.cnblogs.com/spring_wang/p/7403750.html

SNF.CodeGenerator-升级生成BS页面代码-协助视图-数据库配置-急速开发者的利器http://www.cnblogs.com/spring_wang/p/7402612.html

SNF飞快支付平台WinForm-审核流使用方法样例http://www.cnblogs.com/spring_wang/p/7374176.html

SNF火速支付平台WinForm-EasyQuery总括分析-效果-非凡牛逼的表格查询工具http://www.cnblogs.com/spring_wang/p/7366059.html

SNF急速支付平台MVC-Grid++集成打字与印刷http://www.cnblogs.com/spring_wang/p/7365567.html

SNF连忙支付平台MVC-富文本控件集成了百度开源项目editorhttp://www.cnblogs.com/spring_wang/p/7365265.html

C#按回车Enter使输入核心自动跳到下多个TextBox的情势收集http://www.cnblogs.com/spring_wang/p/7216538.html

关于系统前端开发的那多少个事http://www.cnblogs.com/spring_wang/p/7092721.html

WebApi和MVC-controller层接收的json字符串的取值方法和调用后台服务情势http://www.cnblogs.com/spring_wang/p/6740314.html

SNF连忙支付平台–规则引擎在先后在那之中怎么着调用http://www.cnblogs.com/spring_wang/p/6740490.html

SNF火速支付平台–规则引擎介绍和利用文档http://www.cnblogs.com/spring_wang/p/6740445.html

SNF急迅支付平台MVC-EasyUI3.9之-DataGrid表格控件怎么样扩大右键菜单http://www.cnblogs.com/spring_wang/p/6740338.html

SNF火速支付平台–多组织+多平台+多系统处理方案http://www.cnblogs.com/spring_wang/p/6734654.html

SNF飞快支付平台MVC-EasyUI3.9之-Session过期处理和页面请求筛选http://www.cnblogs.com/spring_wang/p/6733975.html

SNF快捷支付平台MVC-EasyUI3.9之-WebApi身份验证难点一蹴而就方案http://www.cnblogs.com/spring_wang/p/6733814.html

SNF快捷支付平台MVC-EasyUI3.9之-WebApi跨域处理方案http://www.cnblogs.com/spring_wang/p/6733659.html

SNF火速支付平台MVC-EasyUI3.9之-ueditor富文本编辑在 asp.net
MVC下行使手续
http://www.cnblogs.com/spring_wang/p/6710351.html

SNF开发平台WinForm之十五-时间轴控件使用-http://www.cnblogs.com/spring\_wang/p/6285393.html

SNF开发平台WinForm之十四-站内发送系统音信http://www.cnblogs.com/spring\_wang/p/6140031.html

SNF开发平台WinForm之十三-单独从服务器上赢得PDF文件举办体现http://www.cnblogs.com/spring_wang/p/6140025.html

SNF开发平台WinForm之十二-发送手机短信成效调用http://www.cnblogs.com/spring_wang/p/6139829.html

SNF开发平台WinForm之十一-程序打包http://www.cnblogs.com/spring_wang/p/6139827.html

SNF开发平台WinForm之十-Excel导入http://www.cnblogs.com/spring_wang/p/6128604.html

SNF开发平台WinForm之九-代码生成器使用验证http://www.cnblogs.com/spring_wang/p/6128595.html

SNF开发平台WinForm之八-自动升级程序安排使用表明http://www.cnblogs.com/spring_wang/p/6128570.html

SNF开发平台WinForm之七-单据打字与印刷和接纳验证http://www.cnblogs.com/spring_wang/p/6126016.html

SNF开发平台WinForm之六-上传下载组件使用http://www.cnblogs.com/spring\_wang/p/6125929.html

SNF开发平台WinForm之五-高级查询利用表明-http://www.cnblogs.com/spring\_wang/p/6116640.html

SNF开发平台WinForm之四-开发-主细表管理页面-http://www.cnblogs.com/spring\_wang/p/6116626.html

SNF开发平台WinForm之三-开发-单表接纳控件创立-http://www.cnblogs.com/spring\_wang/p/6116592.html

SNF开发平台WinForm之二-开发-单表表单管理页面-http://www.cnblogs.com/spring\_wang/p/6116572.html

SNF开发平台WinForm之一-开发-单表表格编辑管理页面-http://www.cnblogs.com/spring\_wang/p/6116523.html

Winform开发框架之通用Windows录制头调用拍照http://www.cnblogs.com/spring_wang/p/6008674.html

Winform开发框架之图表报表在线设计器2-图表-SNF.EasyQuery项目–SNF飞速支付平台3.3-Spring.Net.Framework

Winform开发框架之图表报表在线设计器-报表-SNF.EasyQuery项目–SNF飞速支付平台3.3-Spring.Net.Framework

Winform开发框架之通用附属类小部件管理模块
–SNF连忙支付平台3.3-Spring.Net.Framework

SNFAutoupdater通用自动升级组件V2.0-WinForm

SNF快捷支付平台3.2之–.Net可扩展的单据编号生成器-SNF.CodeRule

SNF神速支付平台3.1之–审核流(3)低调奢华,不难不凡,实例演示-SNF.WorkFlow

SNF快捷支付平台3.1之–审核流(2)流程设计-SNF.WorkFlow效率使用表达

SNF连忙支付平台3.1之–审核流(1)SNF.WorkFlow审核流简介

SNF快速支付平台3.0之–完美的代码生成器SNF.CodeGenerator-飞速开发者的利器

听大人说MVC4+EasyUI的Web开发框架–Spring.Net.FrameworkV3.0完整介绍

SNF快捷支付平台3.0之–MVC
打字与印刷化解方案

SNF急迅支付平台3.0之–文件批量上传-统一附属类小部件管理器-在线预览文件(有网络和没有两种)

SNF快捷支付平台3.0之–asp.net mvc4
强大的导出和不必要上传文件的批量导入EXCEL

SNF连忙支付平台3.0之MVC通用控件库彰显-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout

SNF神速支付平台3.0之BS页面显示和九大亮点-部分页面呈现效果-Asp.net+MVC4.0+WebAPI+EasyUI
+Knockout

SNF火速支付平台3.0之-界面性子化配置+10种皮肤+7种菜单-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout

SNF火速支付平台3.0之-CS页面-Asp.net+Spring.Net.Framework

SNF飞快支付平台3.0之–系统里播放的效能–赶快及时、简明扼要的把音信发送给接收者