Atitit easyui翻页组件与vue的集成解决方案attilax总结
Atitit easyui翻页组件与vue的集成解决方案attilax总结
===========\paggingUtil_easyui_vue.js2
C:\Users\Administrator\Desktop\00oa\js\paggingUtil_easyui_vue.js
===============使用
<!-- pagging-->
<link rel="stylesheet" type="text/css" href="easyui1.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui1.5/themes/icon.css">
<script src="easyui1.5/jquery.easyui.min.js"></script>
<script src="paggingCoreV3r44.js"></script>
<script src="js/paggingUtil_easyui_vue.js"></script>
<!-- pagging end-->
<script src="api_cfg.js"></script>
</head>
<!-- 翻页控件区域-->
<div class="easyui-pagination" id="page_div" ></div>
</div>
<!-- 绑定翻页查询数据事件-->
$("#button11").on('click',function(){
var s2 ="select * from ROLE_PARSE where 流程 like '%"+$('#textfield').val()+"%'";
var url2 = api_url+"/api?m=q&p1="+encodeURIComponent(encodeURIComponent(s2));
fetch(url2).then(response=>response.json()).then(data => {
setPageControl(data);
}
).catch(e => console.log("Oops, error", e));
})
===========\paggingUtil_easyui_vue.js
// JavaScript Document
//绑定翻页查询数据事件-->
function getTestdata()
{
var a=new Array();
for(i=1;i<99;i++)
{
a.push(i);
}
return a ;
}
function showCurPageData2Table(cur_page_datas)
{
VueObj1.$data.list_data1=cur_page_datas;
}
function clrOldPageData()
{
VueObj1.$data.list_data1=[];
}
var all_data=getTestdata();//获取数据,可以一般是从后台ajax获取。。前段分页是获取所有数据,后端分页只获取当前页数据
function setPageControl(all_data)
{
//设置翻页
$('#page_div').pagination({
total:all_data.length,
pageSize:10,
onSelectPage: function(pageNumber, pageSize){
clrOldPageData();//清空现有显示数据
//截取当前页面数据
var cur_page_datas=getCurPageDatas(all_data,pageNumber,pageSize);
//显示截取数据到界面
showCurPageData2Table(cur_page_datas);
}
});
$('#page_div').pagination('select', 1);//转到第一页
}
作者:: 绰号:老哇的爪子claw of Eagle 偶像破坏者Iconoclast image-smasher
捕鸟王"Bird Catcher kok 虔诚者Pious 宗教信仰捍卫者 Defender Of the Faith. 卡拉卡拉红斗篷 Caracalla red cloak 万兽之王
简称:: Emir Attilax Akbar 埃米尔 阿提拉克斯 阿克巴
全名::Emir Attilax Akbar bin Mahmud bin attila bin Solomon bin adam Al Rapanui 埃米尔 阿提拉克斯 阿克巴 本 马哈茂德 本 阿提拉 本 所罗门 本亚当 阿尔 拉帕努伊
常用名:艾提拉(艾龙), EMAIL:1466519819@qq.com
头衔:uke总部o2o负责人,全球网格化项目创始人,
uke交友协会会长 uke捕猎协会会长 Emir Uke部落首席大酋长,
uke宗教与文化融合事务部部长, uke宗教改革委员会副主席
uke制度与重大会议委员会委员长,uke保安部首席大队长,uke制度检查委员会副会长,
uke 首席cto 软件部门总监 技术部副总监 研发部门总监主管 产品部副经理 项目部副经理 uke科技研究院院长uke软件培训大师
uke波利尼西亚区大区连锁负责人 汤加王国区域负责人 uke克尔格伦群岛区连锁负责人,莱恩群岛区连锁负责人,uke布维岛和南乔治亚和南桑威奇群岛大区连锁负责人
Uke软件标准化协会理事长理事长 Uke 数据库与存储标准化协会副会长
uke终身教育学校副校长 Uke医院 与医学院方面的创始人
uec学院校长, uecip图像处理机器视觉专业系主任 uke文档检索专业系主任
Uke图像处理与机器视觉学院首席院长
Uke 户外运动协会理事长 度假村首席大村长 uke出版社编辑总编
转载请注明来源:attilax的专栏 ?http://www.cnblogs.com/attilax/
--Atiend v8
Atitit easyui翻页组件与vue的集成解决方案attilax总结的更多相关文章
- Atitit.pagging 翻页功能解决方案专题 与 目录大纲 v3 r44.docx
Atitit.pagging 翻页功能解决方案专题 与 目录大纲 v3 r44.docx 1.1. 翻页的重要意义1 1.2. Dep废弃文档 paip.js翻页分页pageing组件.txt1 ...
- 一款易用、高可定制的vue翻页组件
一款易用.高可定制的vue翻页组件 在线体验:pages.cixi518.com 使用 npm i vo-pages --save vo-pages组件父元素必须设置固定高度并填写属性overflow ...
- 翻页组件page-flip调用问题
翻页组件重新调用解决方案 翻页组件:page-flip import { PageFlip } from 'page-flip' pagefile() { //绘制翻页 this.pageFlip = ...
- Atitit 基于sql编程语言的oo面向对象大规模应用解决方案attilax总结
Atitit 基于sql编程语言的oo面向对象大规模应用解决方案attilax总结 1. Sql语言应该得到更大的范围的应用,1 1.1. 在小型系统项目中,很适合存储过程写业务逻辑2 1.2. 大型 ...
- Atitit 翻页功能的解决方案与版本历史 v4 r49
Atitit 翻页功能的解决方案与版本历史 v4 r49 1. 版本历史与分支版本,项目版本记录1 1.1. 主干版本历史1 1.2. 分支版本 项目版本记录.1 2. Easyui 的翻页组件2 ...
- vue翻页器,包括上一页,下一页,跳转
翻页组件 -- 子组件<template> <div class="pager-wrapper" ref="pager"> <di ...
- element-ui table 的翻页记忆选中
公司中台项目刚开始开发,用了vue+element,需要许多前置调研,table的翻译记忆选中就是其中之一. template: <el-table :ref="tableRef&qu ...
- 解决Hexo博客模板hexo-theme-next的翻页按钮不正常显示问题
用Hexo搭了个Gitpage的博客,兴冲冲的发了11篇博文后发现翻页按钮不正常显示,显示为<i class="fa fa-angle-right"></i> ...
- vue案例 - vue-awesome-swiper实现h5滑动翻页效果
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...
随机推荐
- 6-5 巡逻机器人 uva1600
一开始按照标准bfs来写 标记为二维数组 后来按照三维数组写过了 ps大部分bfs都不会是二维数组搞定!!! 其中有一个bug弄了半个小时... 一开始我是先判断!vis[x][y][v.c] ...
- 第一章 Python入门
一. 语言 计算机语言:人和计算机之间沟通的语言计算机语言: 按照级别分类:(越高级月进阶人类) 机器语言: 汇编语言: 助记符 ag. add 2 3 高级语言: c, PHP, java , .n ...
- QT学习之第一个程序
QT学习之第一个程序 目录 手动创建主窗口 居中显示 添加窗口图标 显示提示文本 Message Box的应用 手动连接信号与槽 手动创建主窗口 窗口类型 QMainWindow: 可以包含菜单栏.工 ...
- HTML的lang属性的作用
今天翻了一下<css权威指南>选择器章节,看到伪类选择器,也叫语言选择器:lang(language),顾名思义它会根据html设置的语言应用对应样式,如: *:lang(en){ col ...
- 进程描述和控制(os 笔记二)
进程描述和控制 计算机最初的主要任务之一就是高效的自动化我们的工作,完成用户交付的任务.而这种任务在计算机中的表示就是一个个的进程.从上一篇文章中描述的计算机的发展历史我们能发现,无论是单道批处理 ...
- vim编辑器基本操作
命令模式: 按(i)键进入编辑模式,将在光标前面插入: 按(I)键进入编辑模式,将在光标行首插入: 按(a)进入编辑模式,在光标后面插入: 按(A)键进入编辑模式,将在光标行末插入: 按(o)进入编辑 ...
- JAXB注解 @XmlRootElement 及XML文件解析详解
@Retention(value=RUNTIME) @Target(value=TYPE) public @interface XmlRootElement @Inherited @Retention ...
- Egret 之 消除游戏 开发 PART 6 Egret elimination game development PART 6
Egret 之 消除游戏 开发 PART 6 Egret elimination game development PART 6 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱: ...
- BZOJ.4298.[ONTAK2015]Bajtocja(Hash 启发式合并)
题目链接 \(Description\) 给定\(d\)张无向图,每张图都有\(n\)个点.一开始,在任何一张图中都没有任何边. 接下来有\(m\)次操作,每次操作会给出\(a,b,k\),意为在第\ ...
- 20172302 《Java软件结构与数据结构》实验一:线性结构实验报告
课程:<Java软件结构与数据结构> 班级: 1723 姓名: 侯泽洋 学号:20172302 实验教师:王志强老师 实验日期:2018年9月26日 必修/选修: 必修 实验内容 (1)链 ...