天天看点

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" οnclick="addVideoShow();">

               <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增

           </button>

<button id="btn_delete" type="button" class="btn btn-default" οnclick="batchUploadShow();">

<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>批量上传

</button>

<button id="btn_edit" type="button" class="btn btn-default" οnclick="editMemberInfoShow();">

<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>选择修改

</button>

<button id="btn_delete" type="button" class="btn btn-default" οnclick="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\" οnclick=\"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');

}

继续阅读