由于实习开始就在外包公司做事,用的都是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 " " +
"";
},
"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>