1. 程式人生 > >bootstrap-table的toolbar用法自定義增刪改查工具容器

bootstrap-table的toolbar用法自定義增刪改查工具容器

toolbar我也不知道怎麼稱呼,關於 bootstrap-table 的用法本人也是在學習中,

關於更多和詳細內容請拜訪大神,http://www.cnblogs.com/landeanfen/p/4976838.html

////////////////////////////////html

<!-- 工具容器 -->
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default" onclick="addVideoShow();">
               <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
           </button>
<button id="btn_delete" type="button" class="btn btn-default" onclick="batchUploadShow();">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>批量上傳
</button>
<button id="btn_edit" type="button" class="btn btn-default" onclick="editMemberInfoShow();">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>選擇修改
</button>
<button id="btn_delete" type="button" class="btn btn-default" onclick="delMemberVideo();">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>選擇刪除
</button>
</div>

//////////////////////js

$('#memberTable')
.bootstrapTable(
{
columns : [
{
checkbox : true,
align : 'center'
},
{
field : 'member_id',
title : 'id',
align : 'center',
sortable : true
},
{
field : 'member_Uid',
title : '會員id',
align : 'center',
sortable : true
},
{
field : 'nickName',
title : '暱稱',
align : 'center',
sortable : true
},
{
field : 'portrait',
title : '頭像',
align : 'center',
sortable : true,
formatter : portrait
},
{
field : 'sex',
title : '性別',
align : 'center',
sortable : true
},
{
field : 'loginType',
title : '登陸方式',
align : 'center',
sortable : true
},
{
field : 'signature',
title : '個性簽名',
align : 'center',
sortable : true
},
{
field : 'thirdSign',
title : '第三方標識',
align : 'center',
sortable : true
},
{
field : 'yesnoAgreeChat',
title : '是否同意私聊',
align : 'center',
sortable : true
},
{
field : 'myAttention',
title : '關注數',
align : 'center',
sortable : true
},
{
field : 'myFans',
title : '粉絲數',
align : 'center',
sortable : true
},
{
field : 'startTime',
title : '會員開始時間',
align : 'center',
sortable : true
},
{
field : 'endTime',
title : '會員結束時間',
align : 'center',
sortable : true
},
{
field : 'registerTime',
title : '註冊時間',
align : 'center',
sortable : true
},
{
field : 'minderMoney',
title : '守護資費',
align : 'center',
sortable : true
},
{
field : 'minderMoneyTime',
title : '守護資費修改時間',
align : 'center',
sortable : true
},
{
field : 'balance',
title : '會員餘額',
align : 'center',
sortable : true,
formatter : function(value, row) {
if (value > 0) {
return "<button id=\"btn_cash_"
+ row.member_id
+ "\" type=\"button\" class=\"btn btn-info\" onclick=\"Charge('"
+ row.member_id
+ "','"
+ value
+ "','"
+ row
+ "',this);\"><span class=\"glyphicon \" aria-hidden=\"true\"></span>¥"
+ value + " 提現</button>";
} else {
return value;
}


}
}, {
field : 'memberType',
title : '會員型別',
align : 'center',
sortable : true,
formatter : memberTypeFormatter
}, {
field : 'lastLoginTime',
title : '最後登陸時間',
align : 'center',
sortable : true
} ],
sortName : 'member_id',
sortOrder : 'asc',
pagination : true, // 分頁
sidePagination : 'server',
pageNumber : 1,
pageSize : 10,
pageList : [ 10, 20, 50, 100 ],
showColumns : true,
checkboxHeader : false,
clickToSelect : true,
singleSelect:true,
toolbar : "#toolbar",


singleSelect : false,
search:true,
queryParamsType : 'limit',
queryParams : function(params) {
return {
pageSize : params.limit,
rowoffset : params.offset,
keyword:params.search,
sortOrder: params.order,
       sortName:params.sort
}
},
onDblClickRow : function(row, $element) {
editMemberInfoShow(row, $element);
},
url : './member/initMemberInfoCon'
});
$('#memberTable').bootstrapTable('hideColumn', 'portrait');
$('#memberTable').bootstrapTable('hideColumn', 'thirdSign');
$('#memberTable').bootstrapTable('hideColumn', 'startTime');
$('#memberTable').bootstrapTable('hideColumn', 'endTime');
$('#memberTable').bootstrapTable('hideColumn', 'minderMoney');
$('#memberTable').bootstrapTable('hideColumn', 'minderMoneyTime');
$('#memberTable').bootstrapTable('hideColumn', 'yesnoAgreeChat');
$('#memberTable').bootstrapTable('hideColumn', 'member_id');

}