鑑於最近有人詢問Bootstrap-Table的自定義條件查詢如何實現，今天特在此說明。首先展示一下效果：
默認查詢
條件查詢
測試數據
前端代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<script src="lib/bootstrap/js/jquery-1.9.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/bootstrap-table/bootstrap-table.min.js"></script>
<script src="lib/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div style="margin-left:200px;margin-top:100px;width:1000px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">條件查詢</h3>
</div>
<div class="panel-body">
<div style="display:inline-block;">
<div style="float:left;padding:6px;">
<span>姓名：</span>
</div>
<div style="float:left;">
<input id="name" class="form-control" style="width:200px;" placeholder="請輸入姓名" />
</div>
<div style="float:left;padding:6px;">
<span>性別：</span>
</div>
<div style="float:left;">
<select id="gender" class="form-control" style="width:200px;">
<option value="">請選擇</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div style="float:left;margin-left:20px;">
<button id="query" class="btn btn-primary">查詢</button>
</div>
</div>
</div>
</div>
<table id="table"></table>
</div>
<script>
$(document).ready(function () {
// 初始化bootstrap-table
$('#table').bootstrapTable({
url: "ashx/GetRecordsHandler.ashx", // URL
method: "post", // 請求類型
contentType: "application/x-www-form-urlencoded", // post請求必須要有，否則後臺接受不到參數
sidePagination: "server", // 設置在服務端還是客戶端分頁
showRefresh: false, // 是否刷新按鈕
sortStable: true, // 是否支持排序
cache: false, // 是否使用緩存
pagination: true, // 是否顯示分頁
search: false, // 是否有搜索框
clickToSelect: true, // 是否點擊選中行
pageNumber: 1, // 首頁頁碼，默認爲1
pageSize: 5, // 頁面數據條數
pageList: [5, 10, 20, 30],
queryParamsType: "",
queryParams: function (params) {
return {
pageSize: params.pageSize, // 每頁記錄條數
pageNumber: params.pageNumber, // 當前頁索引
name: $('#name').val(), // 姓名
gender: $('#gender').val() // 性別
};
},
formatLoadingMessage: function () {
return "請稍後，正在加載....";
},
formatNoMatches: function () {
return "暫無匹配數據.";
},
columns: [{
field: "select",
title: "全選",
align: "center",
halign: "center",
checkbox: true,
},
{
field: 'Id',
title: '編號',
align: "center",
halign: "center",
sortable: true
},
{
field: 'Name',
title: '姓名',
align: "center",
halign: "center"
},
{
field: 'Gender',
title: '性別',
align: "center",
halign: "center"
},
{
field: 'Age',
title: '年齡',
align: "center",
halign: "center"
}]
})
// 查詢按鈕
$('#query').click(function () {
$('#table').bootstrapTable('refresh')
})
});
</script>
</body>
</html>
其實很簡單，在queryParams屬性裏綁定表單元素的值，最後刷新表格即可。
後臺代碼
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using Newtonsoft.Json;
namespace WebApplication1.ashx
{
/// <summary>
/// GetRecordsHandler 的摘要說明
/// </summary>
public class GetRecordsHandler : IHttpHandler
{
/// <summary>
/// 連接字符串
/// </summary>
private static string ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 獲取分頁參數
int pageSize = int.Parse(context.Request["pageSize"].ToString());
int pageNumber = int.Parse(context.Request["pageNumber"].ToString());
// 獲取自定義參數
string name = context.Request["name"].ToString();
string gender = context.Request["gender"].ToString();
// 記錄總數
int total = GetRecordsCount(name, gender);
DataTable dataTable = GetRecords(pageSize, pageNumber, name, gender);
// 格式化數據
var data = new { total = total, rows = dataTable };
context.Response.Write(JsonConvert.SerializeObject(data));
}
public bool IsReusable
{
get
{
return false;
}
}
// 獲取記錄總數
private int GetRecordsCount(string name, string gender)
{
// 查詢語句
StringBuilder sql = new StringBuilder("select count(*) from [TPerson] ");
if (!string.IsNullOrWhiteSpace(name) && !string.IsNullOrWhiteSpace(gender))
{
sql.Append("where Name=@Name and Gender=@Gender");
}
else if (!string.IsNullOrWhiteSpace(name) && string.IsNullOrWhiteSpace(gender))
{
sql.Append("where Name=@Name");
}
else if (string.IsNullOrWhiteSpace(name) && !string.IsNullOrWhiteSpace(gender))
{
sql.Append("where Gender=@Gender");
}
else
{
sql.Append("");
}
// 查詢參數
List<SqlParameter> parameters = new List<SqlParameter>();
if (!string.IsNullOrWhiteSpace(name))
{
parameters.Add(new SqlParameter("@Name", name));
}
if (!string.IsNullOrWhiteSpace(gender))
{
parameters.Add(new SqlParameter("@Gender", gender));
}
// 查詢總數
using (SqlConnection connection = new SqlConnection(ConnectionString))
{
SqlCommand command = new SqlCommand(sql.ToString(), connection);
if (parameters.Count > 0)
{
command.Parameters.AddRange(parameters.ToArray());
}
try
{
connection.Open();
return Convert.ToInt32(command.ExecuteScalar());
}
catch
{
return -1;
}
}
}
// 分頁查詢數據
private DataTable GetRecords(int pageSize, int pageNumber, string name, string gender)
{
// 查詢語句
StringBuilder sql = new StringBuilder("select * from(select row_number() over(order by Id) as RowId, *from TPerson ");
if (!string.IsNullOrWhiteSpace(name) && !string.IsNullOrWhiteSpace(gender))
{
sql.Append("where Name=@Name and Gender=@Gender) ");
}
else if (!string.IsNullOrWhiteSpace(name) && string.IsNullOrWhiteSpace(gender))
{
sql.Append("where Name=@Name) ");
}
else if (string.IsNullOrWhiteSpace(name) && !string.IsNullOrWhiteSpace(gender))
{
sql.Append("where Gender=@Gender) ");
}
else
{
sql.Append(") ");
}
sql.Append("as b where b.Id between (@pageNumber - 1) * @pageSize + 1 and @pageNumber * @pageSize order by Id");
// 查詢參數
List<SqlParameter> parameters = new List<SqlParameter>();
parameters.Add(new SqlParameter("@pageSize", pageSize));
parameters.Add(new SqlParameter("@pageNumber", pageNumber));
if (!string.IsNullOrWhiteSpace(name))
{
parameters.Add(new SqlParameter("@Name", name));
}
if (!string.IsNullOrWhiteSpace(gender))
{
parameters.Add(new SqlParameter("@Gender", gender));
}
// 查詢數據
DataTable dataTable = new DataTable();
using (SqlDataAdapter adapter = new SqlDataAdapter(sql.ToString(), ConnectionString))
{
adapter.SelectCommand.Parameters.AddRange(parameters.ToArray());
adapter.Fill(dataTable);
}
return dataTable;
}
}
}
到此爲止，Bootstrap-Table的自定義條件查詢就實現了。