由於實習開始就在外包公司做事，用的都是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>效果圖：
