bootstrap中bootgrid的使用实例

由于实习开始就在外包公司做事，用的都是extjs和jquery-easyui的东西，甚至jquery-easyui都并不是那么熟练。使用bootstrap的东西也就避免不了走了很多弯路，bootstrap的组件初始化一般使用在js中完成的，但是在使用bootgrid的时候没有看文档（直接copy了一个栗子，就去写后台去了），将data-toggle="bootgrid"复制进去，$(seletor).bootgrid()一直不执行。最后才看到官方文档中最上面一段有一句话：
Add data-toggle=”bootgrid” to your table to initialize jQuery Bootgrid without writing any line of JavaScript code.
“磨刀不误砍柴工”大家都懂，做的时候其实都想抄近路！
js代码：

$(function () {
    var grid = $("#grid-data").bootgrid({
        ajax : true,
        url:"/admin/dictionaryType/getDictionaryList",
        converters: {
            datetime: {
                from: function (value) { return moment(value); },
                to: function (value) { return moment(value).format('YYYY-MM-DD'); }
            }
        },
        formatters: {
            "commands": function(column, row)
            {
                return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " +
                    "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-trash-o\"></span></button>";
            },
             "type_id":function(column, row){
                 return row.type.id;
             },
             "type_name":function(column, row){
                 return row.type.type_name;
             },
             "parent_content":function(column, row){
                 if (typeof(row.parent) == "undefined"){
                     return "";
                 }
                 return row.parent.content;

             },
             "parent_id":function(column, row){
                 if (row.parent == undefined){
                     return "";
                 }
                 return row.parent.id;
             },
             "firstfixuser":function(column, row){
                 return row.firstfixuser.username;
             },
             "lastfixuser":function(column, row){
                 return row.lastfixuser.username;
             }
        }
    }).on("loaded.rs.jquery.bootgrid", function()
    {
        /* Executes after data is loaded and rendered */
        grid.find(".command-edit").on("click", function(e)
        {
            location.href="/admin/dictionary/edit?id="+$(this).data("row-id");

        }).end().find(".command-delete").on("click", function(e)
        {
            location.href="/admin/direction/del?id="+$(this).data("row-id");
        });
    });
});

上面使用了moment.js，可以自行百度下载和小按钮的css文件
json数据：

{"current":1,"total":1,"rowCount":1,"rows":[{"lastfixtime":1484230262000,"lastfixuser":{"image":"","id":1,"enabled":1,"username":"admin"},"firstfixuser":{"image":"","id":1,"enabled":1,"username":"admin"},"remark":"Test","firstfixtime":1484230262000,"id":1,"type":{"type_name":"行业方向","remark":"行业方向字典类型","id":1},"content":"Test"}]}

html:（在使用converter和formatter时，对应的属性是data-converter和data-formatter）

<table id="grid-data"
    class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
           <th data-column-id="id" data-type="numeric"></th>
           <th data-column-id="type" data-visible="false" data-formatter="type_id" >类型ID</th>   
               <th data-column-id="type"  data-visible="false" data-formatter="type_name" >类型名称</th>
           <th data-column-id="parent" data-visible="false" data-formatter="parent_id" >父节点ID</th>
           <th data-column-id="parent" data-formatter="parent_content">父节点</th>
           <th data-column-id="content">字段内容</th>
           <th data-column-id="firstfixuser" data-formatter="firstfixuser">创建人</th>
           <th data-column-id="lastfixuser" data-formatter="lastfixuser">修改人</th>
           <th data-column-id="firstfixtime" data-converter="datetime">创建时间</th>
           <th data-column-id="lastfixtime" data-converter="datetime">修改时间</th>
           <th data-column-id="remark">备注</th>
           <th data-column-id="commands" data-formatter="commands" data-sortable="false">编辑/删除</th>
 </tr>
 </thead>
</table>
<link th:href="@{/plugins/bootgrid/jquery.bootgrid.min.css}" rel="stylesheet" />
<link th:href="@{/assets/css/commands.css}" rel="stylesheet" />
<script th:src="@{/assets/js/libs/jquery-1.10.2.min.js}"></script>
<script th:src="@{/plugins/bootgrid/jquery.bootgrid.min.js}"></script>
<script th:src="@{/plugins/moment/moment-with-locales.min.js}"></script>
<script type="text/javascript"  th:src="@{/assets/js/dictionary.js}"></script>

效果图：