Atitit easyui翻页组件与vue的集成解决方案attilax总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Atitit easyui翻页组件与vue的集成解决方案attilax总结相关的知识,希望对你有一定的参考价值。

Atitit easyui翻页组件与vue的集成解决方案attilax总结

 

 

===============使用1

===========\\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:[email protected]

 

 

头衔: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.列表页面and条件查询的实现最佳实践------翻页 分页 控件的实现java .net php

Easyui主要组件用法

easyui的datagrid的翻页控件的事件,有没有啥对应的翻页函数,或者翻页控件绑定的函数

vue上下滑动翻页组件

atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

vue单文件组件工程,上下全屏翻页小案例