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>

效果图：