iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >BootStrap中如何实现Table复选框默认选中功能
  • 732
分享到

BootStrap中如何实现Table复选框默认选中功能

2024-04-02 19:04:59 732人浏览 泡泡鱼
摘要

这篇文章主要介绍BootStrap中如何实现Table复选框默认选中功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!废话不多说,直接给大家贴代码了,具

这篇文章主要介绍BootStrap中如何实现Table复选框默认选中功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

废话不多说,直接给大家贴代码了,具体代码如下所示:

$('#table').bootstrapTable('destroy'); 
$('#table').bootstrapTable({
url:'../data/kehulist.JSON',
uniqueId: "id",
striped:true,
// pagination:true,
clickToSelect:true,
height:340,
  columns: [{
  field : 'state',
  checkbox:true, 
  fORMatter : stateFormatter
  },{
    field: 'id',    
    title: '组织编码',
    sortable: true,
  },{
    field: 'name',
    title: '组织名称',
    sortable: true,
  }],
});
//对应的函数进行判断;
function stateFormatter(value, row, index) {
  if (row.state == true)
    return {
      disabled : false,//设置是否可用
      checked : true//设置选中
    };
  return value;
}
模拟后台对应的数据;
[
  {  
    "id": "1",
    "name": "金蝶软件(中国)有限公司",
    "state": false, //是否选中
    "tel":"18536552258"
  },
  {
    "id": "2",
    "name": "金蝶软件(中国)有限公司",
    "state": true,
    "tel":"18536552258"
  },
  {
    "id": "3",
    "name": "金蝶软件(中国)有限公司",
    "state": false,
    "tel":"18536552258"
  }
]

以上是“BootStrap中如何实现Table复选框默认选中功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: BootStrap中如何实现Table复选框默认选中功能

本文链接: https://www.lsjlt.com/news/71674.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • BootStrap中如何实现Table复选框默认选中功能
    这篇文章主要介绍BootStrap中如何实现Table复选框默认选中功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!废话不多说,直接给大家贴代码了,具...
    99+
    2024-04-02
  • vue中v-for循环复选框如何实现默认勾选第一个
    这篇文章主要为大家展示了“vue中v-for循环复选框如何实现默认勾选第一个”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中v-for循环复选框如何实现默...
    99+
    2024-04-02
  • JavaScript实现复选框全选功能
    本文实例为大家分享了JavaScript实现复选框全选的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="e...
    99+
    2024-04-02
  • 如何使用Angularjs+bootstrap+table多选支持单击行选中实现编辑、删除功能
    小编给大家分享一下如何使用Angularjs+bootstrap+table多选支持单击行选中实现编辑、删除功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获...
    99+
    2024-04-02
  • html+javascript+bootstrap如何实现层级多选框全层全选和多选功能
    这篇文章主要为大家展示了“html+javascript+bootstrap如何实现层级多选框全层全选和多选功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“h...
    99+
    2024-04-02
  • Win8如何开启文件夹复选框功能默认是禁用的
      Win8系统中,默认文件夹复选框功能是禁用的。因此喜欢复选框功能的朋友就要自己开启这项功能了,不过很多刚接触WIn8的朋友并不知道从哪儿开启,下面就详细为大家介绍Win8开启复选框功能的方法,一起来看看吧。   1、...
    99+
    2023-06-07
    Win8 复选框 功能 选框 文件
  • Bootstrap中Table如何实现加载按钮功能
    小编给大家分享一下Bootstrap中Table如何实现加载按钮功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1 ...
    99+
    2024-04-02
  • JS实现layui table筛选框记忆功能
    碰到表中列很多如下表 使用layui table的筛选功能.选完之后呢,关掉浏览器再打开或者换个页面再打开的时候,选择就白选了.这种情况下,客户就要求加个记忆功能.让她下次再打开...
    99+
    2024-04-02
  • layui中如何使用table插件进行复选框联动功能
    小编给大家分享一下layui中如何使用table插件进行复选框联动功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实际项目功能...
    99+
    2024-04-02
  • JavaScript怎么实现复选框全选功能
    这篇文章主要介绍了JavaScript怎么实现复选框全选功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下代码:<!DOCTYPE html>...
    99+
    2023-06-14
  • layui数据表格复选框如何实现单选功能
    这篇文章将为大家详细讲解有关layui数据表格复选框如何实现单选功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。如下所示://点击选中(单选) //单击行勾选check...
    99+
    2024-04-02
  • Bootstrap如何实现table右键功能
    这篇文章主要介绍了Bootstrap如何实现table右键功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。本文介绍使用contextMen...
    99+
    2024-04-02
  • java单选框功能如何实现
    在Java中,单选框通常是通过使用JRadioButton类来实现的。可以按照以下步骤实现单选框功能: 导入必要的类库: imp...
    99+
    2024-04-02
  • html单选按钮默认选中如何做
    本文小编为大家详细介绍“html单选按钮默认选中如何做”,内容详细,步骤清晰,细节处理妥当,希望这篇“html单选按钮默认选中如何做”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。...
    99+
    2024-04-02
  • html页面中的单选框功能如何实现
    本文小编为大家详细介绍“html页面中的单选框功能如何实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“html页面中的单选框功能如何实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新...
    99+
    2024-04-02
  • 如何实现jQuery多选框功能
    这篇文章主要介绍如何实现jQuery多选框功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Jquery多选框的基本操作:支持全选、反选、取消全选的功能HTML正文:<inpu...
    99+
    2024-04-02
  • Bootstrap如何使用Table实现搜索框和查询功能
    这篇文章主要为大家展示了“Bootstrap如何使用Table实现搜索框和查询功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Bootstrap如何使用Tab...
    99+
    2024-04-02
  • AngularJS中如何实现select加载数据选中默认值
    这篇文章给大家分享的是有关AngularJS中如何实现select加载数据选中默认值的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。问题描述:在我们开发项目过程中,避免不了会用到s...
    99+
    2024-04-02
  • el-table 选中行与复选框相互联动的实现步骤
    目录步骤:1. 点击行时触发复选框的选择或取消2.点击复选框时触发相应行的变化(问题关键在怎么获取复选框选取的行)需求:对el-table 选中行时复选框也被选中,选中复选框时触发行...
    99+
    2022-11-13
    el-table 复选框联动 el-table 行复选框联动
  • C#中如何实现listbox的全选,全部选,反选功能
    这篇文章将为大家详细讲解有关C#中如何实现listbox的全选,全部选,反选功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。c#  listbox的全选,全不选,反选方法//全选方法一&nbs...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作