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 表格插件,通过简单 ...
随机推荐
- Python中Numpy mat的使用
前面介绍过用dnarray来模拟,但mat更符合矩阵,这里的mat与Matlab中的很相似.(mat与matrix等同) 基本操作 >>> m= np.mat([1,2,3]) #创 ...
- python基础之基本数据类型
1.int 整数 2.bool 布尔 3.str 字符串,一般放小量数据 4.list 列表,可以存放大量的数据 5.dict字典,以key:value的形式存储数据 6.set集合(数学) 7.tu ...
- exportfs: /mnt/demo requires fsid= for NFS export
解决方法:/mnt/demo 10.0.1.57(fsid=0,rw,async) //加入fsid=0参数就可.
- 《毛毛虫组》【Alpha】Scrum meeting 1
第一天 日期:2019/6/14 1.1 今日完成任务情况以及遇到的问题. 今日完成任务情况: (1)根据数据库设计时的E-R图将创建的表进行检查确保功能的正确实现. (2)进行公共类的设计,设计出程 ...
- HTML5<footer>元素
HTML5中<footer>元素是用来描述文档中的底部信息,比如:版本,版权,作者,链接声明,联系信息,时间等等. 实例: <footer> <p>这是一个底部的信 ...
- Electron的介绍
1.1 Electron是什么? 引用官网的一句话: Build cross platform desktop apps with JavaScript, HTML, and CSS 1.2 诞生 技 ...
- 删除sqlserver管理器登录信息缓存
在Windows10下测试有效: C:\Users\<user>\AppData\Roaming\Microsoft\Microsoft SQL Server\100\Tools\Shel ...
- *运算和&运算
/* &:取地址运算符 *:指针运算符(或称为间接运算符),取指针所指向的对象的内容 */ int a,b; int *pointer_1, *pointer_2; pointer_1 = & ...
- webpack开始一个项目的步骤
这几天在学习Vue 用到了webpack打包工具 开始一个项目的时候 需要配置很多项 刚开始写的时候 配置文件总是缺什么再去配置什么 创建项目就用了半个小时 后来觉得应该有个步骤 这样 ...
- 【线性基合并 树链剖分】bzoj4568: [Scoi2016]幸运数字
板子题 Description A 国共有 n 座城市,这些城市由 n-1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个 幸运数字,以纪念碑的形式矗立在这座城市的正中心,作为城市 ...