Bootstrap-table custome-ajax用法
2016-01-26 15:38
621 查看
<div id="toolbar"> <div class="form-inline" role="form"> <div class="form-group"> <select class="form-control"> <option value="InterfNo" selected>经销商编号</option> <option value="JoyoId">卓越卡号</option> <option value="NickName">微信昵称</option> <option value="Email">邮箱</option> <option value="UserId">用户编号</option> </select> </div> <div class="form-group"> <input name="search" class="form-control" type="text" placeholder="请输入查询关键字"> </div> <div class="form-group" style="margin-left:20px;"> 绑定日期: <div class="input-group input-daterange"> <input type="text" id="sDate" name="sDate" readonly class="form-control" placeholder="开始日期"> <span class="input-group-addon">至</span> <input type="text" id="eDate" name="eDate" readonly class="form-control" placeholder="结束日期"> </div> </div> <button id="ok" type="button" class="btn btn-default">搜索</button> </div> </div> <table id="table" data-toolbar="#toolbar" data-detail-view="true" data-page-list="[10, 20, 50, 100]" data-detail-formatter="detailFormatter"> <thead> <tr> <th data-field="UserId" data-width="150">用户编号</th> <th data-field="NickName" data-width="220">昵称</th> <th data-field="InterfNo" data-width="150">经销商编号</th> <th data-field="JoyoId" data-width="60">卓越卡号</th> <th data-field="Email" data-width="180">邮箱</th> <th data-field="CreationTime" data-width="160">绑定时间</th> <th data-formatter="operateFormatter" data-events="operateEvents">操作</th> </tr> </thead> </table>
var $table = $('#table');
var btnSearch = $('#ok');
btnSearch.click(function () { $table.bootstrapTable('selectPage', 1); }); $table.bootstrapTable({ method: 'get', url: url, striped: true, dataType: "json", idField: "UserId", pagination: true, queryParamsType: "limit", singleSelect: false, contentType: "application/json;charset=utf-8", pageSize: 10, pageNumber: 1, search: false, //不显示 搜索框 showColumns: false, //不显示下拉框(选择显示的列) sidePagination: "server", //服务端请求 queryParams: queryParams, responseHandler: responseHandler, formatLoadingMessage: function () { return "请稍等,正在加载中..."; }, onLoadError: function (data) { $table.bootstrapTable('removeAll'); } });
//自定义传递到服务器的参数 function queryParams(params) { $('#toolbar').find('input[name]').each(function () { params[$(this).attr('name')] = $(this).val(); }); params["pageSize"] = params.limit; var pageindex = params.offset / params.limit + 1; //if (btnSearch.data("search") == "1") { // pageindex = 1; // btnSearch.data("search", 0); // params.pageNumber = 0; //} params["pageIndex"] = pageindex; params["Key"] = $("#toolbar select option:selected").val(); params["value"] = params.search; return params; }
//操作列按钮执行的方法 window.operateEvents = { 'click .wxUnBind': function (e, value, row) { var d = { UserId: row.UserId, UnionId: row.UnionId }; var url = '@Url.Action("WxUnBind")'; unBind(url, d, $(e.target).text()); }, 'click .interfNoUnBind': function (e, value, row) { if (row.InterfNo.length == 0) { swal("该用户未绑定经销商编号,无需解绑!", "", "error"); } else { var d = { UserId: row.UserId, interfNo: row.InterfNo }; var url = '@Url.Action("InterfNoUnBind")'; unBind(url, d, $(e.target).text()); } } }; //格式化操作列中需要设置的按钮 function operateFormatter(value, row, index) { var html = []; html.push('<div>'); html.push('<a class="wxUnBind" href="javascript:void(0)" title="微信解绑">'); html.push('微信解绑'); html.push('</a>'); if (row.InterfNo.length > 0) html.push('<a style="margin-left:10px" class="interfNoUnBind" href="javascript:void(0)" title="经销商解关联">经销商解关联</a>'); html.push('</div>'); return html.join(''); }
相关文章推荐
- Bootstrap学习
- JS组件Bootstrap Select2使用方法详解
- Ubuntu 下的flask+bootstrap 环境搭建
- JS组件中bootstrap multiselect两大组件较量
- JS组件Form表单验证神器BootstrapValidator
- JS组件Bootstrap Select2使用方法详解
- Bootstrap 表格
- Bootstrap 表单
- Bootstrap 按钮
- Bootstrap 图像
- Bootstrap 帮助器类
- Bootstrap 响应式实用工具
- Bootstrap 字形图标(Glyphicons)
- Bootstrap 下拉菜单(Dropdowns)
- Bootstrap 按钮组
- Bootstrap 按钮下拉菜单
- Bootstrap V4 自学之路 文档目录
- bootstrap
- Bootstrap树形组件jqTree的简单封装
- BootStrap学习