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 表格插件,通过简单 ...
随机推荐
- WinForm form属性
一.布局 Autostroll 控件内容大于可见区域是否自动显示滚动条 Maximumsize 窗体可调到最大尺寸 minimumsize 窗体可调到最小尺寸 size 窗体看到的尺寸 Sta ...
- js进阶之function对象
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Java 方法重载与引用数组类型
1.方法重载 1)方法的签名 方法的签名包含方法名和参数列表 一个类中,不可以有两个方法的签名完全相同,即一个类中不能有两个方法的方法名和参数列表都一样. public class Test{ pu ...
- python爬虫之路——Python的re模块及其方法
介绍常用的三种方法:search(),sub(),findall() search():匹配并提取第一个符合规律的内容,然后返回一个正则表达式的对象 #提取字符串中的第一个数字 import re a ...
- Codeforces 666E Forensic Examination SAM or SA+线段树合并
E. Forensic Examination http://codeforces.com/problemset/problem/666/E 题目大意:给模式串S以及m个特殊串,q个询问,询问S的子串 ...
- cv2.Canny 边缘检测
Canny边缘检测 Canny 的目标是找到一个最优的边缘检测算法,最优边缘检测的含义是: 好的检测 - 算法能够尽可能多地标识出图像中的实际边缘. 好的定位 - 标识出的边缘要尽可能与实际图像中 ...
- 百度site网址显示完整站点信息的分析
去年赛花红就发现百度site本博客网址,仅出现找到相关结果数约多少个,数字为估算值,网站管理员如需了解更准确的索引量,请使用百度站长平台等字样.但赛花红又发现有的网站却显示着完整的站点信息,当时以为是 ...
- IE下contentWindow对象与FF、Chrome下的区别
在ie中frame(iframe)标签通过name和id获取的对象是不同的. 通过name获取的本身就是contentWindow对象.所以 在ie中不用再找contentWindow了 例: let ...
- javaweb基础(19)_jsp标签
一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...
- 简单的cocos2dx笔试题
1.参数传递有几种方式?值传递.指针传递.引用传递 2.指针和引用有什么分别:如果传引用比传指针安全,为什么?如果我使用常量指针难道不行吗? 1.指针是一个变量,存储一个地址,指向内存的一个存储单元: ...