Question

我有以下示例HTML：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            //Sample Json data
            var jsondata = [
                {
                    "id": "1",
                    "Name": "Name1",
                    "Address": "Address1"
                },
                {
                    "id": "2",
                    "Name": "Name2",
                    "Address": "Address2"
                },
                {
                    "id": "3",
                    "Name": "Name3",
                    "Address": "Address3"
                }];

            $('#table').bootstrapTable({
                //Assigning data to table
                data: jsondata
            });

           function LinkFormatter(value, row, index) {
                 return "<a href='/details/"+row.id+"'>"+value+"</a>";
                }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table id="table">
            <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="Name" data-formatter="LinkFormatter">Name</th>
                    <th data-field="Address">Address</th>
                </tr>
            </thead>
        </table>
    </form>
</body>
</html>

我想在href列中添加name，以便点击后我可以重定向到../details/id。我添加了linkFormatter，但我无法在id列上设置和获取name。如何使用Bootstrap表完成此操作？我想设置id以便我可以使用它。

我尝试按如下方式分离js文件：

$(document).ready(function() {
   getServices();

});


function getServices(){
  var requestBody="{}";
        $.ajax({
                type : 'GET',
                url :  my_url,
                data : requestBody,
                headers: {
                        'Content-Type':'application/json'
                },
                dataType : "json",
                success : function(data) {
                        services = data;
                        fillServiceTable();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                        displayConsoleMessages(jqXHR, textStatus, errorThrown);
                        renderErrorMessage("There was some error fetching devices.");
                }
        });
}

function fillServiceTable(){
$('#table').bootstrapTable({
                //Assigning data to table
                data: services
            });
}

function LinkFormatter(value, row, index) {
        return "<a href='/details/"+row.id+"'>"+value+"</a>";

Answer 1

将LinkFormatter功能移到$(document).ready(function ()

之外

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
     function LinkFormatter(value, row, index) {
                 return "<a href='/details/"+row.id+"'>"+value+"</a>";
                }
    
        $(document).ready(function () {
            //Sample Json data
            var jsondata = [
                {
                    "id": "1",
                    "Name": "Name1",
                    "Address": "Address1"
                },
                {
                    "id": "2",
                    "Name": "Name2",
                    "Address": "Address2"
                },
                {
                    "id": "3",
                    "Name": "Name3",
                    "Address": "Address3"
                }];

            $('#table').bootstrapTable({
                //Assigning data to table
                data: jsondata
            });
  
           
        });
    </script>
</head>
<body>
 
   
    <form id="form1" runat="server">
        <table id="table">
            <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="Name" data-formatter="LinkFormatter">Name</th>
                    <th data-field="Address">Address</th>
                </tr>
            </thead>
        </table>
    </form>
    
   
</body>
</html>

如何在引导表列上设置id

1 个答案: