BootstrapTable自定义ajax方法

bootstrapTable可以自定义ajax方法，通过ajax请求获得数据返回展示在bootstrapTable表格中，这种方式我自认为比较简单常用。本篇还加了简单增删改操作，获得表格选中的数据，以及按钮可用与否。这些比较常用。

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>bootstrap-table-demo</title><!-- 引入bootstrap样式 --><link rel="stylesheet" href="css/bootstrap.min.css" /><!-- 引入bootstrap-table样式 --><link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" /><!-- layer --><link rel="stylesheet" href="js/plugins/layer/skin/layer.css" /><style type="text/css">.form-inline .form-group input[type=text], .form-inline .form-group select{width:120px;}</style></head><body style="width: 90%;margin: 0 auto;"><h2>bootstrap-table</h2><form id="form1" action="" method="get" class="form-inline"><div class="form-group"><label class="control-label ">ID：</label><input type="text" id="id" class="form-control" name="id" /></div><div class="form-group"><label class="control-label ">Name：</label><input type="text" id="name" class="form-control" name="name" /></div><div class="form-group"><label class="control-label ">Price：</label><!--<input type="text" id="price" class="form-control" name="price" />--><select class="form-control" id="price" name="price"><option value="0">请选择</option><option value="1">$1</option><option value="2">$2</option><option value="3">$3</option><option value="4">$4</option></select></div><input type="submit" class="btn btn-primary" value="搜索"/></form><br/><div id="toolbar" class="btn-group"><button class="btn btn-success" id="add">新增</button><button class="btn btn-warning" id="edit">编辑</button><button class="btn btn-info" id="look">查看</button><button class="btn btn-danger" id="delete">删除</button><button class="btn btn-primary" id="refresh">刷新</button></div>   <!--bootstrap-table表格--><table id="table" data-toolbar="#toolbar"data-toggle="table"  data-ajax="ajaxRequest"   data-search="false"     data-side-pagination="server" data-pagination="true" data-click-to-select="true" data-single-select="true"data-page-size= "10"><thead style="background:#efefef;"><tr><th data-checkbox="true"></th><th data-field="id">ID</th><th data-field="name">Name</th><th data-field="price">Price</th></tr></thead></table><!-- jquery --><script type="text/javascript" src="js/jquery.min.js" ></script><!-- bootstrap --><script type="text/javascript" src="js/bootstrap.min.js" ></script><!-- bootstrap-table --><script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script><!-- 引入中文语言包 --><script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script><!-- layer --><script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script><script type="text/javascript">//自定义ajax方法function ajaxRequest(params){//debugger;$.ajax({url: "/bootstrap-table/data4.json",type: "POST",dataType: "json",success: function(rs){console.log(rs)var message = rs.array;params.success({ //注意，必须返回参数 paramstotal: rs.total,rows: message});//debugger;},error: function(rs){console.log(rs)}});}var $table = $("#table"),$add = $("#add"),$edit = $("#edit"),$look = $("#look"),$delete = $("#delete"),$refresh = $("#refresh");//按钮可用与否$edit.prop('disabled', true);$look.prop('disabled', true);$delete.prop('disabled', true);$table.on('check.bs.table uncheck.bs.table ' +'check-all.bs.table uncheck-all.bs.table',function() {var bool = !($table.bootstrapTable('getSelections').length && $table.bootstrapTable('getSelections').length == 1);$edit.prop('disabled', bool);$look.prop('disabled', bool);$delete.prop('disabled', bool);});/*** 获得选中的数据，为一个对象数组*/function getSelections() {return $.map($table.bootstrapTable('getSelections'), function(row) {return row; });}//刷新$refresh.on('click', function(){$table.bootstrapTable('refresh');});//添加$add.on('click', function(){layer.open({type: 2,title: '添加商品',shadeClose: false,shade: 0.8,area: ['50%', '60%'],content: 'add.html'});});    //查看$look.on('click', function(){var row = getSelections()[0]; var id = row.id; var name = row.name;var price = row.price; //debugger;layer.open({type: 2,title: '查看商品',shadeClose: false,shade: 0.8,area: ['50%', '60%'],content: 'edit.html?id=' + id + '&name=' + name + '&price='+ price +'&type=look'});});//编辑$edit.on('click', function(){var row = getSelections()[0]; var id = row.id; var name = row.name;var price = row.price;layer.open({type: 2,title: '编辑商品',shadeClose: false,shade: 0.8,area: ['50%', '60%'],content: 'edit.html?id=' + id + '&name=' + name + '&price='+ price ,end: function () { //最后执行reloadlocation.reload();}});});//删除$delete.on('click', function(){var ids = getSelections();layer.confirm('您是否要删除当前 ' + ids.length + '条数据？', {btn: ['是', '否']}, function() {delServer(ids);});});//删除function delServer(ids){layer.msg('删除成功');}</script></body>
</html>

data4.json

{
"code": 0,
"total": 1314,
"message": "success",
"array" :
[
{
"id": 0,
"name": "Item 0",
"price": "$1"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$1"
},
{
"id": 5,
"name": "Item 5",
"price": "$1"
},
{
"id": 6,
"name": "Item 6",
"price": "$1"
},
{
"id": 7,
"name": "Item 7",
"price": "$1"
},
{
"id": 8,
"name": "Item 8",
"price": "$1"
},
{
"id": 9,
"name": "Item 9",
"price": "$1"
}
]
}

edit.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>编辑</title><!-- 引入bootstrap样式 --><link rel="stylesheet" href="css/bootstrap.min.css" /><!-- 引入bootstrap-table样式 --><link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" /><!-- layer --><link rel="stylesheet" href="js/plugins/layer/skin/layer.css" /><style type="text/css">.form-group{width:90%;margin: 15px auto;}</style></head><body><div><form id="form1" action="" method="get" class=""><div class="form-group"><label class="control-label ">ID：</label><input type="text" id="id" class="form-control" name="id" /></div><div class="form-group"><label class="control-label ">Name：</label><input type="text" id="name" class="form-control" name="name" /></div><div class="form-group"><label class="control-label ">Price：</label><!--<input type="text" id="price" class="form-control" name="price" />--><select class="form-control" id="price" name="price"><option value="$0">请选择</option><option value="$1">$1</option><option value="$2">$2</option><option value="$3">$3</option><option value="$4">$4</option></select></div><div class="form-group"><input type="button" id="submit" class="btn btn-primary" style="width: 25%;" value="修改"/><input type="button" id="close" class="btn btn-danger" style="width: 25%;" value="关闭"/></div></form></div> <!-- jquery --><script type="text/javascript" src="js/jquery.min.js" ></script><script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script><!-- layer --><script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script><script type="text/javascript">//给jq扩展方法(function ($) {$.getUrlParam = function (name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]); return null;}})(jQuery);//alert($.getUrlParam('id'));var index = parent.layer.getFrameIndex(window.name);$("#close").on('click', function(){ parent.layer.close(index);});//var typelook = $.getUrlParam("type");//初始化数据initData();if(typelook){$("#submit").hide();$("input").attr('disabled',true);$("select").attr('disabled',true);$('#close').attr('disabled', false);}function initData(){var id = $.getUrlParam('id');var name = $.getUrlParam('name');var price = $.getUrlParam('price');$('#id').val(id);$('#name').val(name);$('#price').val(price);}$("#submit").click(function(){layer.msg("修改成功");setTimeout(function (){parent.layer.close(index);}, 1000);});</script></body>
</html>

BootstrapTable自定义ajax方法相关推荐

Cookie获取问题：ajax方法后端只获取到一个Cookie，Request无法获取到自定义的Cookie
需求登录时的账号生成Cookie传值到新的页面,新的页面里存在ajax方法会向后台传值与Cookie,后台获取值和Cookie. 问题将Cookie值传到前台后,F12看页面有Cookie值,但是 ...
Fastadmin 等一些thinkphp5 larval的后台框架程序 bootstraptable 自定义js 实现动态列的实现方法1 ，通过nginx apache rewrite 重定向
Fastadmin 等一些thinkphp5 larval的后台框架程序 bootstraptable 自定义js 实现动态列的实现方法1 ,通过nginx apache rewrite 重定向需 ...
用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
ajax远程调用,jquery中的ajax方法怎样通过JSONP进行远程调用
关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用首先介绍下$.ajax的参数 type:请求方式 GET/ ...
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
MVC Razor：自定义Helper方法
在使用自定义Helper方法时,开始我试了很多次都不成功一直报错"找不到WebMatrix.WebData.dll.WebMatrix.Data.dll". 应该是一个bug,估计 ...
何时使用自定义HTTP 方法
何时使用自定义HTTP 方法问题描述您想知道使用自定义HTTP 方法的影响. 解决方案避免使用非标准的自定义HTTP 方法,因为引入新方法后,就不能依赖那些只了解标准HTTP 方法的现有软件了. ...
各种AJAX方法的使用比较
阅读目录开始第一代技术:生成客户端代理脚本调用服务端新技术的改进方向第二代技术:jQuery直接调用WebService 第三代技术:更简单的数据格式第四代技术:直接提交表单多submit ...
jQuery的Ajax方法实现注册邮箱时用户名查询
利用jQuery实现邮箱注册时的重复用户名查询 Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可 ...

BootstrapTable自定义ajax方法

BootstrapTable自定义ajax方法相关推荐

最新文章

热门文章