Bootstrap-table custome-ajax用法
<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-table custome-ajax用法的更多相关文章
- bootstrap table通过ajax获取后台数据展示在table
1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...
- Bootstrap table的基础用法
一.官方文档 Bootstrap 中文网:http://www.bootcss.com/ Bootstrap Table 中文网 : http://bootstrap-table.wenzhixin. ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- 新的表格展示利器 Bootstrap Table
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
- 新的表格展示利器 Bootstrap Table Ⅰ
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
- Bootstrap Table 的用法
记录下 Bootstrap Table 的用法,备忘. <!DOCTYPE html> <html> <head> <meta charset="u ...
- bootstrap table 服务器端分页--ashx+ajax
1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...
- bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
- 表格组件神器:bootstrap table详细使用指南
1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...
随机推荐
- javaSe-反射3
package com.java.chap07.sec04; public class Student { private String name; private Integer age; publ ...
- UWP开发:应用设置存储
应用设置储存指的是保存在应用程序储存区中的键/值对的字典集合,它自动负责序列化对象,并将其保存在应用程序里.以键/值对方式提供一种快速数据访问的方式,主要用于储存一些应用信息. 1,简介 应用设置是W ...
- 剑指offer58 二叉树的下一个结点
自己写的 class Solution { public: TreeLinkNode* GetNext(TreeLinkNode* pNode) { if(pNode == NULL) return ...
- MAC OSXU盘会挂载目录
当U盘接到系统后,你可以在Terminal里输入df -lh.这时,硬盘的使用和分区情况会输出,你在Mounted on 这一列数据中可以找到你的U盘或新添加的硬盘的挂载路径.
- IDEA安装及破解
一.下载(IDEA 2019.1.2) 1.下载地址:https://www.jetbrains.com/idea/download/#section=windows 2.选择版本,并选择最终版(.e ...
- drawRect - 谈画图功能的内存优化
作者介绍 作者:毕洪博 ( @毕洪博 ),iOS 开发者,pop Art 追随者.现在正在鼓捣 AVFoundation,博客 bihongbo.com, 欢迎大家找我讨论技术. 作者已将本文在微信公 ...
- 有关fcrackzip的使用介绍(来自网络)
本文转自:http://longxiaz.blog.163.com/blog/static/131452420201282844545197/ 主要用到的工具是fcrackzip.别的工具没去测试,f ...
- day24 01 初识继承
day24 01 初识继承 面向对象的三大特性:继承,多态,封装 一.继承的概念 继承:是一种创建新类的方式,新建的类可以继承一个或者多个父类,父类又可称基类或超类,新建的类称为派生类或者子类 cla ...
- java web项目(spring项目)中集成webservice ,实现对外开放接口
什么是WebService?webService小示例 点此了解 下面进入正题: Javaweb项目(spring项目)中集成webservice ,实现对外开放接口步骤: 准备: 采用与spring ...
- navicat12.0.24破解方法,简单易操作,亲测可行
navicat12.0.24 32bit 链接:https://pan.baidu.com/s/1dakPje0AzwE86p6ZRHfnsQ 密码:f1ve 破解文件 链接:https://pan. ...