JS表格分页组件:fupage的设计思路和详细使用方法(未来考虑开源,争取在2015年)
之前在秒针工作的时候,某js高级project师写了非常多自己的组件。当中一套是分页组件。叫做st-grid。
只是在我看来,bug太多。我常常给他反馈bug,我也不清楚为啥别人没有发现。
回到武汉工作后。我自己利用业余实践完好自己的官网,从前端到后端,都是自己一个人亲自搞定。
第1个分页的需求是,文章下方的评论。异步载入。第2个需求是,表格管理。比方后台管理系统,常常须要列出user、log等表的记录。
二、实例
<table class="table table-bordered table-hover table-condensed" >
三、实例解读
1.定义table
这个地方不是关键。主要是,确定表头。
表头通常是固定的。
眼下的设计是,表头就是开发人员自己写死。(我遇到的需求基本都是这样)
2.定义2个容器-holder
bodyHolder,名字能够随便取,仅仅只是要相应。
fupage会把表的主体内容,放在这个div里。
pageHolder,存放分页,比方“上一页”、“下一页”等。
3.定义FuPage对象。向后台请求数据。
var fuPage = new FuPage({..});
fuPage.send();
4.參数。
url:后台请求路径
params:參数
bodyHolder,pageHolder,容器的id
tableTemplate。一行数据row的模版。
5.模版渲染
解析变量。{varName}。
自己定义函数。
比方
<td>@formatStatus({status})</td>
function formatStatus(status){
}
四、设计思路
JS表格分页组件:fupage的设计思路和详细使用方法(未来考虑开源,争取在2015年)的更多相关文章
- JS表格分页组件:fupage的设计思路和具体用法(未来考虑开源,争取在2015年)
一.背景 之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现. ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
- iOS 组件化 —— 路由设计思路分析
原文 前言 随着用户的需求越来越多,对App的用户体验也变的要求越来越高.为了更好的应对各种需求,开发人员从软件工程的角度,将App架构由原来简单的MVC变成MVVM,VIPER等复杂架构.更换适合业 ...
- JS表格分页(封装版)
HTML代码: <html> <head> <meta charset='utf-8'> <script type="text/javascript ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- vue2.0分页组件,
pagination.vue <!-- 表格分页组件 --> <template> <nav class="boot-nav"> <ul ...
- 基于 bootstrap 的 vue 分页组件
申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...
- 电子商务系统的设计与实现(十三):分页组件,从前到后,从JS到Java
一.概述 学习实践Web开发5年多了,直到今天,我才算真正实现了最基本最常用的分页组件. 包括: a.前端JS异步加载并渲染: b.前端JSP.Freemarker.Struts标签渲 ...
随机推荐
- Luogu-P1020(导弹拦截)(DP,LIS ,二分优化)
Luogu-P1020(导弹拦截)(DP) 题意: 给n(n<=100000) 个数字,求最长不上升子序列的长度和最少的不上升子序列的个数. 分析: 第一问: 求最长不上升子序列有 O(n^2) ...
- 南邮CTF--md5_碰撞
南邮CTF--难题笔记 题目:md5 collision (md5 碰撞) 解析: 经过阅读源码后,发现其代码是要求 a !=b 且 md5(a) == md5(b) 才会显示flag,利用PHP语言 ...
- 剑指Offer(书):实现单例模式
题目:设计一个类,我们只能生成该类的一个实例. 生成一个单例模式,有下列几种常用解法. 1.双重检查锁. 当运行在多线程环境中,此方法可以正常实现单例模式. public class Singleto ...
- 【实验吧】转瞬即逝write up
---恢复内容开始--- 虽然这是很简单的一道题,但这是我第一次拿着题有很清晰的思路,并且脚本也有思路写,拿到文件用ida打开,分析main函数: int __cdecl main(int argc, ...
- LeetCode(10) Regular Expression Matching
题目 Implement regular expression matching with support for '.' and '*'. '.' Matches any single charac ...
- SqlParameter[] parameters
SqlParameter[] parameters = { new SqlParameter("@rdTypeName", readertype.rdTypeName), new ...
- 可以从CSS框架中借鉴到什么
http://isux.tencent.com/css-framework.html http://isux.tencent.com/css-framework.html 现在很多人会使用 CSS 框 ...
- POJ3037 Skiing
Skiing 题目大意: 给定一个M*N的网格,已知在每个网格中的点可以向上下左右四个方向移动一个单位,每个点都有一个高度值. 从每个点开始移动时存在一个速度值,从A点移动到B点,则此时B点的速度为& ...
- Codeforces Round #389 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 3) 圣诞之夜!
A. Santa Claus and a Place in a Class 模拟题.(0:12) 题意:n列桌子,每列m张桌子,每张桌子一分为2,具体格式看题面描述.给出n,m及k.求编号为k的桌子在 ...
- PHP统计目录中文件个数和文件大小
<meta charset="utf-8"><?php $dirn = 0; //目录数 $filen = 0; //文件数 //用来统计一个目录下的文件和目录的 ...