1. 程式人生 > >bootstrap table 單擊獲取當前行號

bootstrap table 單擊獲取當前行號

<!DOCTYPE html>
<html>
<head>
    <title>getSelections</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/bootstrap-table.css">
    <link rel="stylesheet" href="http://issues.wenzhixin.net.cn/bootstrap-table/assets/examples.css">
    <script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/jquery.min.js"></script>
    <script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/bootstrap-table.js"></script>
    <script src="http://issues.wenzhixin.net.cn/bootstrap-table/ga.js"></script>
</head>
<body>
    <div class="container">
        <h1>獲取bootstrap table 當前所在行號</h1>
        
        <table id="table"
               data-toggle="table"
               data-toolbar="#toolbar"
               data-height="460"
               data-click-to-select="true"
              >
            <thead>
            <tr>
                <th data-field="state" data-checkbox="true" data-visible="false" ></th>
                <th data-field="id">ID</th>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
            </tr>
            </thead>
        </table>
    </div>
<script>
    var  data =[
    {
        "id": 0,
        "name": "張國榮",
        "price": "$0"
    },
    {
        "id": 1,
        "name": "周杰倫",
        "price": "$1"
    },
    {
        "id": 2,
        "name": "瑪蒂娜",
        "price": "$2"
    },
    {
        "id": 3,
        "name": "張飛",
        "price": "$3"
    },
    {
        "id": 4,
        "name": "關羽",
        "price": "$4"
    },
    {
        "id": 5,
        "name": "劉翔",
        "price": "$5"
    },
    {
        "id": 6,
        "name": "史泰龍",
        "price": "$6"
    },
    {
        "id": 7,
        "name": "李小龍",
        "price": "$7"
    },
    {
        "id": 8,
        "name": "賓士",
        "price": "$8"
    },
    {
        "id": 9,
        "name": "奧迪",
        "price": "$9"
    },
    {
        "id": 10,
        "name": "Item 10",
        "price": "$10"
    },
    {
        "id": 11,
        "name": "Item 11",
        "price": "$11"
    },
    {
        "id": 12,
        "name": "Item 12",
        "price": "$12"
    },
    {
        "id": 13,
        "name": "Item 13",
        "price": "$13"
    },
    {
        "id": 14,
        "name": "Item 14",
        "price": "$14"
    },
    {
        "id": 15,
        "name": "Item 15",
        "price": "$15"
    },
    {
        "id": 16,
        "name": "Item 16",
        "price": "$16"
    },
    {
        "id": 17,
        "name": "Item 17",
        "price": "$17"
    },
    {
        "id": 18,
        "name": "Item 18",
        "price": "$18"
    },
    {
        "id": 19,
        "name": "Item 19",
        "price": "$19"
    },
    {
        "id": 20,
        "name": "Item 20",
        "price": "$20"
    }
];




    $(function () {
$("#table").bootstrapTable("load",data); 
        $('#table').on("click-row.bs.table",function(e, row, $element) {
var  index= $element.data('index');
alert(index);
});
    });


</script>
</body>
</html>

相關推薦

bootstrap table 獲取前行

<!DOCTYPE html> <html> <head>     <title>getSelections</title>     <meta charset="utf-8">     <link rel="stylesheet"

React 實現 antd中Table獲取內容

<Table columns={columns} dataSource={data} size="middle" onRow = {(record) => { return { onClick: () => { console

Bootstrap Table獲取該行內容及獲取全表的內容

Bootstrap Table 獲取單擊或雙擊的行內容 說明:看到這個應該就知道了bootstrap table的用法及如何使用了,所以下面的名稱就不介紹了 realTime_Table是表的id $("#realTime_Table").bootstr

kendoGrid、雙事件繫結並獲取前行資料

在對於table進行處理時候,最常用的還是點選或者雙擊當前行,從而獲取當前行的資料,var detailgrid = $("#Grid").kendoGrid({ dataSource: detailSources,

遍歷table下的checkbox是否被選中並獲取前行的id

<script type="text/javascript"> function ch(){ var get = $(".bb"); var strIds = []; for (i = 0 ; i <

JavaSE8基礎 LineNumberReader set/getLineNumber 設置與得到前行

ade cas info 優秀 pri puts true exce == os :windows7 x64 jdk:jdk-8u131-windows-x64 ide:Eclipse Oxygen Release (4.7.0) informat

bootstrap tableztree樹進行靜態搜索的方法

ztree 唯一id str click oos boot efi tst column 在ztree的1、onclick 方法 :定義choosefid,(點擊節點的唯一id)然後var diyQueryParam = {url: ‘${basePath}/manage

如何獲取前行集合

key del int getent 字段值 字段 nes 方法 obj 如想獲取單據體當前行字段值,可以參看下面代碼//獲取單據體或者子單據體字段值 需要先查找到相應單據體 string entityKey = "需要查找的單據體Key";//獲取單據

測試彩票,生成一天的序列,按照當前時間獲取前期

public function insert_num() { $start = date("Y-m-d") . ' 05:00';//凌晨五點開始 $re = Db::name('open')->find(); $now = (

bootstrap table通過ajax獲取後臺資料展示在table

1. 背景 bootstrap table 預設向後臺傳送語法的dataType為 json,但是為了解決跨域問題我們需要將dataType改為jsonp,這時就需要修改bootstrap table獲取後臺資料的方式,採用$('#table').bootstrap

bootstrap table 新增 修改刪除

//---------------------------------------html  <table class="table  table-bordered" id="para_table">         <tr>            

gridview獲取前行索引的方法

 在用GridView控制元件時,我們經常會碰到獲取當前行的索引,通過索引進行許多操作。例如,可以獲得當前行某一個控制元件元素;設定某一元素的值等等。 下面結合例項介紹幾種獲得GridView當前行索引值的方法。 例項: ① 目的:獲取GridView中RowCommand的

layui的table行勾選checkbox功能

//單擊行勾選checkbox事件 $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-

GridView根據迴圈按鈕獲取前行ID或其他欄位

在用GridView控制元件時,我們經常會碰到獲取當前行的索引,通過索引進行許多操作。例如,可以獲得當前行某一個控制元件元素;設定某一元素的值等等。 下面結合例項介紹幾種獲得GridView當前行索引值的方法。 例項: ① 目的:獲取GridView中RowCommand的

觸發器動態獲取前行的某欄位的值

create trigger del_replyon Articlefor deleteasdeclare @id intset @id=(select classID from deleted)delete Reply where [email protected

獲取elementui table 前行的詳細資料

el-table @row-click="getDetails" row-click 當某一行被點選時會觸發該事件 row, event, column,然後在methods裡面觸發該事件即可,如下 methods:{ getDetails(row){

bootstrap-table 實現單元格可編輯

$(function(){ $('#table').bootstrapTable({ url:'data.json', columns:[ {field: 'id',title: 'ID'},

Angularjs bootstrap table多選(全選),支援行選中

最終實現效果: index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/ang

ios開發之-- tableview/collectionview獲取前點的cell

self cell index sel collect sele new select 定義 方法如下: 一般collectionView 或者 tableview都有自帶的點擊函數,如下: 1, collectionView -(void)collectionVi

bootstrap table使用:前端分頁,獲取值棧中的json值,載入到table中,獲取選中的行資訊

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="/common/taglibs.jsp" %> <!DOCTYPE html> <html