bootstrap-table的toolbar用法自定义增删改查工具容器
来源:互联网 发布:女朋友胸很大知乎 编辑:程序博客网 时间:2024/06/05 07:53
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');
}
- bootstrap-table的toolbar用法自定义增删改查工具容器
- bootstrap-table 实现表格增删改查
- Bootstrap 增删改查
- mysql table的增删查改。
- 自定义数组的增删改查
- jdbc增删改查的工具类
- java:Oracle(table的增删改查,data的增删改查) 转载备忘
- 【BootStrap】--具有增删改查功能的表格Demo
- 【BootStrap】--具有增删改查功能的表格Demo
- 【BootStrap】--具有增删改查功能的表格Demo
- bootstrap treeview 增删改查 的正确姿势
- 【BootStrap】--具有增删改查功能的表格Demo
- DOM大作业之Table表单的增删改查!
- Boostrap-table.js+bootstrap-editable.js增删改查完整案例
- Bootstrap增删改查,应用treeview,addTabs,table,bootbox,datatimepicker,fileinput
- 容器map与set的增删查改
- 数据库增删改查用法
- 增删改查mybatis用法
- all数组
- 翻转二叉树
- 判断回文
- Spring学习-20:Spring的AOP:自动代理
- 【python学习笔记】2:收集最多价值奖品问题
- bootstrap-table的toolbar用法自定义增删改查工具容器
- anchors数组
- 链表基础之翻转,删除
- 表单基础
- 框架的创建
- SIM900A与网络调试助手进行TCP收发通信
- Android Studio 创建窗口默认继承Activity而非AppCompatActivity
- 删除下拉列表中的选项
- BlockingQueue的基本原理