bootstrapTable实现预先选中某一行

实际情况:
根据页面中,某一个DOM元素是否存在值,决定bootstrapTable表格中某一行数据是否选中,例如某一元素的值为66,那么表格中ID为66的那一行,在查看表格的时候ID为66的那一行就是已经选中的状态
代码:

    $('#Table').bootstrapTable({
        locale: 'zh-CN',
        url: "/online/alarm/list",
        method: "post",
        contentType: "application/json; charset=utf-8",
        queryParams: function(){
            return JSON.stringify({
                state: $("#value").val()
            });
        },
        pagination: true,
        search: true,
        showRefresh: true,
        showColumns: true,
        clickToSelect: true,
        pageList: [10, 25, 50, 100, 'All'],
        showExport: true,
        exportDataType: 'all',
        exportTypes: [ 'json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', &
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Table中,搜索是一个非常常用的功能。它可以帮助用户快速找到他们所需要的数据,提高用户体验。下面我们来详细介绍Bootstrap Table搜索功能的使用方法。 1. 初始化表格 首先需要在HTML代码中添加Bootstrap Table表格的结构,并在JavaScript代码中初始化表格。初始化表格的代码可以参考以下示例: ``` <table id="table" data-url="data.json" data-search="true"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> </table> <script> $(function() { $('#table').bootstrapTable({ // 表格配置 }); }); </script> ``` 在上面的代码中,我们通过data-search="true"来开启表格的搜索功能。 2. 使用搜索框 Bootstrap Table提供了一个默认的搜索框,可以直接使用。只需要在表格的配置中设置search: true即可。示例代码如下: ``` <table id="table" data-url="data.json" data-search="true"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> </table> <script> $(function() { $('#table').bootstrapTable({ search: true, // 表格配置 }); }); </script> ``` 在上面的代码中,我们将search设置为true,表格就会自动添加一个搜索框。 3. 自定义搜索框 如果想要自定义搜索框,可以在HTML代码中手动添加一个搜索框,并在JavaScript中绑定搜索事件。示例代码如下: ``` <div class="input-group"> <input type="text" class="form-control" id="searchInput" placeholder="Search..."> <span class="input-group-btn"> <button class="btn btn-default" type="button" id="searchButton"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div> <table id="table" data-url="data.json"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> </table> <script> $(function() { $('#table').bootstrapTable({ // 表格配置 }); $('#searchButton').click(function() { var searchText = $('#searchInput').val(); $('#table').bootstrapTable('search', searchText); }); }); </script> ``` 在上面的代码中,我们手动添加了一个搜索框,并在JavaScript中绑定了搜索按钮的点击事件。当用户点击搜索按钮时,会获取搜索框的内容并使用Bootstrap Table提供的search方法来搜索匹配的数据。 以上就是Bootstrap Table搜索功能的详细介绍。你可以根据自己的需求来选择使用默认搜索框还是自定义搜索框。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值