BootStrapTable 单选及取值的实现方法

2024-10-11 16:04:43

学习bootstrapTable 一直没有找到单选框的选定的和取值的教程,今天写一个.作为笔记

1. 效果图: 点击 bootstrapTable 单选的按钮, 选中该列, 取到该列的所有值.

2. js 代码 : bootstrapTable 初始化

a. 注意:

 singleSelect : true, // 单选checkbox
      columns : [ { checkbox: true } ] // bootstrapTable 显示单选checkbox 列

$().ready(function() { 

  // bootstrapTable 表格数据初始化
  var table = $('#item_info_table').bootstrapTable({
    url       : '<c:url value='/item/entry/main_info/list_data'/>',
    method     : 'POST',          // GET
    uniqueId    : 'id',           // 绑定ID
    toolbar     : '#item_info_toolbar',   // 搜索框绑定
    search     : true,           // 搜索框
    pagination   : true,           // 显示页码等信息
    singleSelect  : true,           // 单选checkbox
    showRefresh   : true,           // 显示刷新按钮
    showColumns   : true,           // 选择显示的列
    pageSize    : pageSize,         // 当前分页值
    pageList    : pageList,         // 分页选页
    dataType    : dataType,         // JSON
    sidePagination : sidePagination,      // 服务端请求
    buttonsAlign  : buttonsAlign,       // 刷新,显示列按钮位置
    toolbarAlign  : toolbarAlign,       // 搜索框位置
    columns     : [
      {
        checkbox: true
      }, {
        title  : '项目序号',
        field  : 'itemNum',
        align  : 'center',
        formatter:function(value,row,index){
          var url = '';
          if (isSingleItem(value)) url = '<a href="#" mce_href="#" onclick="single_item_edit_fun(\'' + row.infoId + '\')">' + row.itemNum + '</a>  ';
          if (isJoinItem(value))  url = '<a href="#" mce_href="#" onclick="join_item_edit_fun(\'' + row.infoId + '\')">' + row.itemNum + '</a>  ';
          return url;
        }
      }, {
        title  : '项目名称',
        field  : 'itemName',
        align  : 'center'
      }
    ]
  });
  /********** bootstrapTable toolbar 按钮事件 *********/
  // [新增] 按钮点击事件
  $('#item_info_btn_add').click(function(){
    $('#item_info_modal').modal('show');
  });
  // [项目立项] 按钮点击事件
  $('#item_info_btn_do').click(function(){
    var selectContent = table.bootstrapTable('getSelections')[0];
    if(typeof(selectContent) == 'undefined') {
      toastr.warning('请选择一列数据!');
      return false;
    }else{
      console.info(selectContent);
      $('#item_project_modal').modal('show');   // 项目立项面板
    }
  });
});

3. bootstrapTable url : '<c:url value='/item/entry/main_info/list_data'/>', 后台json数据

注意. 第一个图片中的 chrome F12 中的 Object 就是selectContent =table.bootstrapTable('getSelections')[0] 中的数据了这样我们就能取到 bootstrap 单选框选择一行的数据.

{
 "offset":10,
 "rows":
 [
  {
   "infoId":"main_info_1111",
   "itemName":"AAA项目组",
   "itemNum":"JXY160909011S"
  },
  {
   "infoId":"main_info_2222",
   "itemName":"BBB项目组",
   "itemNum":"JXY160909012F"
  }
 ],
 "total":10
}

以上所述是小编给大家介绍的BootStrapTable 单选及取值的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

bootstrap table配置参数例子

bootstrap-table的一些配置参数: $('#reportTable').bootstrapTable({ method: 'post', url: '/qStock/AjaxPage', dataType: "json", striped: true, //使表格带有条纹 pagination: true, //在表格底部显示分页工具栏 pageSize: 22, pageNumber: 1, pageList: [10, 20, 50, 100, 200, 500], i
Bootstrap table两种分页示例

Bootstrap table服务器端分页和客户端分页,供大家参考,具体内容如下服务器端分页注意服务器端数据的返回的格式 [json]必须包含:total节点(总记录数),rows节点(分页后数据) 即:{"total":24,"rows":[-]} $('#test-table').bootstrapTable({ //请求方法 method: 'get', //是否显示行间隔色 striped: true, //是否使用缓存,默认为true,所以一般情况下需
bootstrap table 数据表格行内修改的实现代码

js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : "--",//数据为空时显示 validate : function(value) { if ($.trim(value) == '') { return '不能为空';//修改是数据为空显示 } } } js中设置bootstrop-table加载数据时属性 onEditableSave : function(field, row, oldValue, $el)
Bootstrap标签页（Tab）插件使用方法

您可以通过以下两种方式启用标签页: 1.通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中添加 nav 和 nav-tabs 类到 ul 中,将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中,将会应用 Bootstrap 胶囊式样式. <ul class="nav nav-tabs"> <li><a
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test
Bootstrap每天必学之标签页（Tab）插件

标签页(Tab)通过结合一些 data 属性,您可以轻松地创建一个标签页界面. "如果您想要单独引用该插件的功能,那么您需要引用 tab.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js." 一.用法您可以通过以下两种方式启用标签页: 通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

bootstrap框架.导航条.下拉菜单.轮播广告carousel.栅格系统布局.标签页tabs.模态框.菜单定位的个人总结,具体详情如下所示: bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible
基于Bootstrap的标签页组件及bootstrap-tab使用说明

bootstrap-tab bootstrap-tab组件是对原生的bootstrap-tab组件的封装,方便开发者更方便地使用,主要包含以下功能: tab页初始化关闭tab页新增tab 显示tab页获取tab页ID 使用 Step1 :引入样式 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <
简单实现Bootstrap标签页

本文实例为大家分享了Bootstrap标签页的具体实现代码,供大家参考,具体内容如下 HTML代码: <div id="tabs"> <ul class="nav nav-tabs"> <li class="active"><a href="#item1" data-toggle="tab">项目一</a></li> <li>
BootStrapTable 单选及取值的实现方法

学习bootstrapTable 一直没有找到单选框的选定的和取值的教程,今天写一个.作为笔记 1. 效果图: 点击 bootstrapTable 单选的按钮, 选中该列, 取到该列的所有值. 2. js 代码 : bootstrapTable 初始化 a. 注意: singleSelect : true, // 单选checkbox columns : [ { checkbox: true } ] // bootstrapTable 显示单选checkbox 列 $().ready(func
SelecT下拉框选中和取值的解决方法

Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <
layui富文本编辑器前端无法取值的解决方法

首先,需要简单说下layui这个框架,个人觉得属于那种比较好用的框架,包括他的极简流畅的弹框,很适合那种主要写后端的程序员和快速开发的团队本期主要讲的是layui富文本编辑器这个东西,他的模式是在某个textarea的基础上建立了一个富文本编辑器,也就是说你填写在富文本编辑器的值其实是放在编辑器里面的,并没有放在之前的textarea中,你获取textarea的值的时候需要先把富文本编辑器的值同步到之前的textarea中,然后才能通过textarea获取对应的值主要代码如下: 下图是通过浏
对pandas的层次索引与取值的新方法详解

1.层次索引 1.1 定义在某一个方向拥有多个(两个及两个以上)索引级别,就叫做层次索引. 通过层次化索引,pandas能够以较低维度形式处理高纬度的数据通过层次化索引,可以按照层次统计数据层次索引包括Series层次索引和DataFrame层次索引 1.2 Series的层次索引 import numpy as np import pandas as pd s1 = pd.Series(data=[99, 80, 76, 80, 99], index=[['2017', '2017',
JS子父窗口互相操作取值赋值的方法介绍

$("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementByIdx_x("父窗口元素ID"): 取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document); 类似的,取其它窗口的方法大同小异$(se
vue.js select下拉框绑定和取值方法

最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="
Python字典取键、值对的方法步骤

1. 取键:keys()方法 #spyder bb={'人才/可怕':23,'伏地魔&波特':'army','哈哈哈,人才,回合':'hhh'} for ii in bb.keys(): print(ii) #输出: #人才/可怕 #伏地魔&波特 #哈哈哈,人才,回合 2. 取值:values()方法 for jj in bb.values(): print(jj) #输出 #23 #army #hhh 3. 取键值对:items()方法 for kk,vv in bb.items():
JQuery表单元素取值赋值方法总结

一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" class="test1"/> <input type="button" value="赋值" onclick="get()"/> <input type="text" class="
jQuery对html元素的取值与赋值实例详解

本文实例讲述了jQuery对html元素的取值与赋值方法.分享给大家供大家参考,具体如下: Jquery给基本控件的取值.赋值 TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框,文本区域: $("#text_id").attr("value",'');//清空内容 $("#text_id").attr("value&qu
如何解决ASP.NET新增时多字段取值的问题

ASP.NET 开发人员在卡发时经常会碰到一个情况,就是新增的页面中字段太多,在点击保存的时候需要一个一个的赋值实体或者构建SQL语句去保存.这样不仅浪费体力还需要占用大量的文本行控件去写代码.经过构思是否可以使用一种更方便的办法去解决呢?提高代码的内聚性. 1.思路我们知道一般新增页面最多的就是一大堆文本框让用户输入内容,然后点击保存按钮进行提交将数据持久化到数据库. 在点击提交的时候传统方式就是一个一个文本框的读取赋值. HTML代码如下: <asp:TextBox ID="Text

BootStrapTable 单选及取值的实现方法

相关推荐

随机推荐