您的位置:首页 > Web前端 > BootStrap

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('');
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: