如何使href在jquery-bootgrid基本插件中工作

时间:2016-06-18 06:45:04

标签: javascript php jquery jquery-bootgrid

使用bootgrid-basic来显示我的数据,

<table id="grid-basic"
    class="table table-bordered table-striped table-condensed mb-none">
    <thead>
        <th data-column-id="aa">aa</th>
        <th data-column-id="ss"  data-order="desc">ss</th>
        <th data-column-id="dd">dd</th>
        <th data-column-id="ff">ff</th>
        <th data-column-id="aaa">aaa</th>
        <th data-column-id="aaaaa" >aaaAa</th>

        </tr>
    </thead>
    <tbody>
        @foreach($alldata as $data)
        <tr>
            <td>{{$data->aa}}</td>
            <td><a href="#">{{$data->ss}}</a></td>
            <td>0</td>
            <td>{{$data->dd}}</td>
            <td>{{$data->ff}}</td>
            <td><a href="#">ASSSsdf</a></td>
        </tr>
        @endforeach
    </tbody>
</table>

并在脚本中初始化$("#grid-basic").bootgrid();

一切都很好,如搜索,数据排序,分页,但这些链接看起来不起作用。

如果我使用格式化程序链接工作并保持不起作用。

$("#grid-basic").bootgrid(
formatters: {
              "action": function (column, row)
              {
                  return '<a href=\"/model/' + row.actions + '"\>' +row.actions+ '</a>' ;
              }});

这里有一个jsfiddle链接:http://jsfiddle.net/6xpyxbcg/

1 个答案:

答案 0 :(得分:2)

您的JS中缺少一个括号,它应该是bootgrid({,您需要将data-formatter="link"添加到您希望使用格式化程序的列的th标记上(即链接栏)。

<强> HTML

 <th data-column-id="link" data-formatter="link" >Received</th>

<强> JQuery的

$(function()
{
  $("#grid-basic").bootgrid({

    formatters: {
        "link": function(column, row)
        {
            return "<a href=\"" + row.link + "\">" + row.link + "</a>";
        }
    }
  }
  )
});

Demo in jsFiddle

P.S。尝试下次使用内置片段,因为有一个单击按钮,允许您将代码复制到答案部分并相应地进行修改。