bootstrap table实现点击翻页功能 可记录上下页选中的行

 更新时间:2017年09月28日 10:11:15   作者:_linka  
这篇文章主要介绍了bootstrap table实现点击翻页功能,可记录上下页选中的行,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

bootstrap-table中实现,翻页之后再返回,依然选中的情况,具体内容如下

//var productids = $("body",window.parent.frames[0].document).find('.ptids');//textarea存放数据
var productids = $('textarea');
var merge_order_object= {};//页码+id组成的对象
var jsonObj = {};
var current_page = "";//当前页码

//表格渲染完成操作
table.on('post-body.bs.table', function (e, settings, json, xhr) {

  var merge_order_arr = [];
  var objString = productids.val();
  if(objString !== ""){
    jsonObj = JSON.parse(objString);//转换为json对象
    $.map(jsonObj, function (arr) {
      // merge_order_arr.push.apply(merge_order_arr,arr);//合并数组
      merge_order_arr = merge_order_arr.concat(arr);//合并数组
    });
    $.each(settings,function (i,v) {
      $.each(merge_order_arr,function (index,value) {
        if(v.id === parseInt(value)){
          $(e.target).find('tbody tr').eq(i).find('input').click();
        }
      });
    });
    // productids.val( objString );
  }
  // debugger;
});
$('input[name="btSelectAll"], table tbody, input[name="btSelectItem"]').change(function () {//复选框
  current_page = table.bootstrapTable('getOptions').pageNumber;
  merge_order_object[current_page] = Table.api.selectedids(table);
  productids.val( JSON.stringify(merge_order_object) );//转换成字符串

});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 浅谈微信页面入口文件被缓存解决方案

    浅谈微信页面入口文件被缓存解决方案

    缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,这篇文章主要介绍了浅谈微信页面入口文件被缓存解决方案,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • ES6中定义类和对象的方法示例

    ES6中定义类和对象的方法示例

    这篇文章主要介绍了ES6中定义类和对象的方法,结合实例形式分析了ES6中类的定义、继承、静态方法、静态属性等相关操作技巧,需要的朋友可以参考下
    2019-07-07
  • 微信小程序云开发之使用云数据库

    微信小程序云开发之使用云数据库

    这篇文章主要为大家详细介绍了微信小程序云开发之使用云数据库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 探索Javascript中this的奥秘

    探索Javascript中this的奥秘

    本文介绍了JavaScript中的this关键字在各种情况下的含义,实例都很简单,这样更能有助于加深理解。虽然这只是js中一个很小的概念,但借此我们可以了解js中函数的执行环境,充分掌握this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。
    2016-12-12
  • uni-app中如何使用uni.showModal添加输入框

    uni-app中如何使用uni.showModal添加输入框

    uni-app是一种使用Vue.js开发所有前端应用的框架,uni.showModal是其API之一,用于展示模态弹窗并可添加输入框,通过editable属性设置弹窗内容是否可编辑,通过success回调函数处理用户点击结果,这提供了一个交互式元素,方便在应用中收集用户输入的信息
    2024-09-09
  • elementui 日历组件el-calendar使用总结

    elementui 日历组件el-calendar使用总结

    这篇文章主要介绍了elementui 日历组件el-calendar使用总结,引用dayjs处理日期,结合el-calendar完美实现,需要的朋友可以参考下
    2024-07-07
  • cypress e2e测试编写注意点总结分析

    cypress e2e测试编写注意点总结分析

    这篇文章主要为大家介绍了cypress e2e测试编写注意点总结分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 快速解决js开发下拉框中blur与click冲突

    快速解决js开发下拉框中blur与click冲突

    这篇文章主要帮助大家快速解决js开发下拉框中blur与click冲突,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 理解JavaScript的prototype属性

    理解JavaScript的prototype属性

    JavaScript可以说是最让人初学者难以理解的单一属性。我看了一些资料后,开始明白其实这些困难很大程度来自prototype这个名字本身的二义性
    2012-02-02
  • uni-app小程序沉浸式导航实现的全过程

    uni-app小程序沉浸式导航实现的全过程

    在跨端项目开发中,uniapp是个不错的框架,下面这篇文章主要给大家介绍了关于uni-app小程序沉浸式导航实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10

最新评论