这是一个关于如何使用C#和Bootstrap进行数据操作的示例。页面包含了初始化表格、分页、排序、搜索功能的代码，以及如何通过Handler处理程序获取和展示JSON数据。示例展示了如何动态加载数据，并提供了编辑和删除操作。
@{
Layout = null;
ViewBag.Title = "Home Page";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link href="~/Content/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap/bootstrap-table.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Content/bootstrap/bootstrap.min.js"></script>
<script src="~/Content/bootstrap/bootstrap-table.js"></script>
<script src="~/Content/bootstrap/bootstrap-table-zh-CN.js"></script>
@*<script>
function initTable() {
//先销毁表格
$('#table').bootstrapTable('destroy');
$("#table").bootstrapTable({
//请求方法
method: 'get',
//是否显示行间隔色
striped: true,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
cache: false,
//是否显示分页（*）
pagination: true,
//是否启用排序
sortable: true,
//排序方式
sortOrder: "asc",
//初始化加载第一页，默认第一页
pageNumber: 1,
//每页的记录行数（*）
pageSize: 10,
//可供选择的每页的行数（*）
pageList: [10, 20, 30, 40],
//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
url: "Handler1.ashx?action=GetJson",
//url: "/Home/getJsonDatainfo",
//默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
//queryParamsType:'',
//查询参数,每次调用是会带上这个参数，可自定义
queryParams: function (params) {
return {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order //排位命令（desc，asc）
};
},
//分页方式：client客户端分页，server服务端分页（*）
sidePagination: "server",
//是否显示搜索
search: false,
strictSearch: true,
idField: "id",
columns: [{
field: 'rownum',
title: '序号',
align: 'center'
}, {
field: 'dm',
title: '代码',
align: 'center'
}, {
field: 'xm',
title: '姓名',
align: 'center'
}, {
field: 'xb',
title: '性别',
align: 'center'
}, {
field: 'mid',
title: '操作',
align: 'center',
formatter: function (value, row, index) {
//通过formatter可以自定义列显示的内容
//value：当前field的值，即id
//row：当前行的数据
var a = '<a href="#" >编辑</a> ';
var b = '<a href="#" >删除</a>';
return a + b;
}
}, {
checkbox: true,
visible: true //是否显示复选框
}],
pagination: true
});
}
$(document).ready(function () {
initTable();
});
</script>*@
@*<div class="container">
<table id="table" class="table table-bordered"></table>
</div>*@
</head>
<body>
<div class="table-responsive" style="padding-top:0px;">
<div id="toolbar">
<table>
<tr>
<td>
<div class="pull-right" id="query-form" style="padding-top:10px;">
<input id="txt_Keyword" placeholder='请输入关键字' type="text" style="float:left;width:200px;margin-right:5px;" class="form-control">
<button id="search" type="button" class="btn btn-primary btn-space"> <span class="fa fa-search" aria-hidden="true"></span>查询</button>
<button id="button" type="button" class="btn btn-primary btn-space"> <span class="fa fa-search" aria-hidden="true"></span>插入新行</button>
<button id="getTableData" type="button" class="btn btn-primary btn-space"> <span class="fa fa-search" aria-hidden="true"></span>弹出joson</button>
</div>
</td>
</tr>
</table>
</div>
<table class="table text-nowrap" data-toggle="table" id="cusTable">
@*<thead>
<tr>
<th data-field="rownum" data-align="center">序号</th>
<th data-field="dm" data-align="center">代码</th>
<th data-field="xm" data-align="center">姓名</th>
<th data-field="xb" data-align="center">性别</th>
</tr>
</thead>*@
</table>
</div>
<script>
var searchKey = "";
function initTable() {
//先销毁表格
$('#cusTable').bootstrapTable('destroy');
//初始化表格,动态从服务器加载数据
//$("#cusTable").bootstrapTable({
// /* url: "Handler1.ashx", */ //请求后台的URL（*）
// url: "/Handle/Handler1.ashx?action=GetJson",
// method: 'GET', //请求方式（*）
// toolbar: '#toolbar', //工具按钮用哪个容器
// striped: true, //是否显示行间隔色
// cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
// pagination: true, //是否显示分页（*）
// sortable: true, //是否启用排序
// sortOrder: "asc", //排序方式
// sortName: "id",
// sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
// pageNumber: 1, //初始化加载第一页，默认第一页,并记录
// pageSize: 20, //每页的记录行数（*）
// pageList: [20, 40, 60], //可供选择的每页的行数（*）
// search: false, //是否显示表格搜索
// strictSearch: false,
// showColumns: false, //是否显示所有的列（选择显示的列）
// minimumCountColumns: 2, //最少允许的列数
// clickToSelect: false, //是否启用点击选中行
// showRefresh: false,
// height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
// uniqueId: "id", //每一行的唯一标识，一般为主键列
// showToggle: false, //是否显示详细视图和列表视图的切换按钮
// cardView: false, //是否显示详细视图
// detailView: false,
// smartDisplay: false,//是否显示父子表
// columns: [{
// title: '',
// align: 'left',
// width: 10,
// valign: 'bottom',
// formatter: function (value, row, index) {
// return index + 1;
// }
// }
// ],
// //得到查询的参数
// queryParams: function (params) {
// //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
// var temp = {
// rows: params.limit, //页面大小
// page: (params.offset / params.limit) + 1, //页码
// sortName: params.sort, //排序列名
// order: params.order, //排位命令（desc，asc）
// search: searchKey
// };
// return temp;
// },
// onLoadSuccess: function () { //加载成功时执行
// },
// onLoadError: function () { //加载失败时执行
// }
//});
$("#cusTable").bootstrapTable({
//请求方法
method: 'get',
//是否显示行间隔色
striped: true,
toolbar: '#toolbar', //工具按钮用哪个容器
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
cache: false,
//是否显示分页（*）
pagination: true,
//是否启用排序
sortable: true,
//排序方式
sortOrder: "asc",
//初始化加载第一页，默认第一页
pageNumber: 1,
//每页的记录行数（*）
pageSize: 2,
//可供选择的每页的行数（*）
pageList: [10, 20, 30, 40],
//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
url: "/Handle/Handler1.ashx?action=GetJson",
//url: "/Home/getJsonDatainfo",
//默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
//queryParamsType:'',
//查询参数,每次调用是会带上这个参数，可自定义
queryParams: function (params) {
return {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order, //排位命令（desc，asc）
search: searchKey
};
},
//分页方式：client客户端分页，server服务端分页（*）
sidePagination: "server",
//是否显示搜索
search: false,
strictSearch: true,
//showToggle: true, //是否显示详细视图和列表视图的切换按钮
//cardView: true, //是否显示详细视图
//clickToSelect: true, //是否启用点击选中行
idField: "id",
columns: [{
field: 'rownum',
title: '序号',
align: 'center'
}, {
field: 'dm',
title: '代码',
align: 'center'
}, {
field: 'xm',
title: '姓名',
align: 'center'
}, {
field: 'xb',
title: '性别',
align: 'center'
},
{
field: 'mid',
title: '操作',
align: 'center',
formatter: function (value, row, index) {
//通过formatter可以自定义列显示的内容
//value：当前field的值，即id
//row：当前行的数据
//alert(row.id);
//alert(value);
var a = '<a href="#" >编辑</a> ';
var b = '<a href="#" >删除</a>';
return a + b;
}
},
//{
//checkbox: true,
//visible: true //是否显示复选框
//}
],
onClickCell: function (field, value, row, $element) {
$element.attr('contenteditable', true);
$element.blur(function () {
var index = $element.parent().data('index');
var tdValue = $element.html();
//alert(index);
//alert(tdValue);
saveData(index, field, tdValue);
})
},
pagination: true
});
}
$(document).ready(function () {
//searchKey = $('#txt_Keyword').val();
initTable();
//插入新行
$('#button').on('click', function () {
$('#cusTable').bootstrapTable('insertRow', { index: 0, row: { id: '', dm: '', xm: '', xb: '', mid: '' } });
});
function saveData(index, field, value) {
$('#cusTable').bootstrapTable('updateCell', {
index: index, //行索引
field: field, //列名
value: value //cell值
})
}
$('#getTableData').click(function () {
alert(JSON.stringify($('#cusTable').bootstrapTable('getData')));
});
//查询
$('#search').on('click', function () {
searchKey = $('#txt_Keyword').val();
initTable();
});
});
</script>
</body>
</html>
2.处理程序代码
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Web;
using System.Data.SqlClient;
namespace WebApplication4.Handle
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string output = "";
string action = context.Request["action"].ToString(); switch (action)
{
case "GetJson":
DataTable dt = getData(context);
string str = DataTableToJsonWithStringBuilder(dt);
output = "{\"total\":" + getCout(context) + ",\"rows\":" + str + "}";
break;
default:
break;
}
context.Response.ContentType = "text/plain";
context.Response.Write(output);
}
public string GetJson(HttpContext context)
{
DataTable dt = getData(context);
return DataTableToJsonWithStringBuilder(dt);
}
public DataSet GetDataset(string sql)
{
SqlConnection conn = new SqlConnection("Server=LX-PC\\SQLEXPRESS;Initial Catalog=admspronew;User ID=sa;Password=wanglei ");
conn.Open();
SqlDataAdapter sda = new SqlDataAdapter(sql, conn);
DataSet ds = new DataSet();
sda.Fill(ds);
return ds;
}
public DataTable getData(HttpContext context)
{
int rows = Convert.ToInt32(context.Request["rows"]);//显示行数
int page = Convert.ToInt32(context.Request["page"]);//页码
int starNum = rows * page - rows + 1;//开始行数
int endNum = rows * page;//结束行数
string keywords = context.Request.Params["search"];
string sql = "select * from (select row_number() over(order by @@servername) as rownum,* from yhgl)a where rownum between " + starNum + " and " + endNum + "";
if (keywords != "") {
sql += " and xm like '%"+keywords+"%'";
}
//DataSet ds = pub.GetDataset(sql, "xinxi");
DataSet ds = GetDataset(sql);
return ds.Tables[0];
}
public int getCout(HttpContext context)
{
string sql = "select count(*) count from yhgl";
string keywords = context.Request.Params["search"];
if (keywords != "")
{
sql += " where xm like '%" + keywords + "%'";
}
DataSet ds = GetDataset(sql);
return Convert.ToInt32(ds.Tables[0].Rows[0]["count"]);
}
public string DataTableToJsonWithStringBuilder(DataTable table)
{
var jsonString = new StringBuilder();
if (table.Rows.Count > 0)
{
jsonString.Append("[");
for (int i = 0; i < table.Rows.Count; i++)
{
jsonString.Append("{");
for (int j = 0; j < table.Columns.Count; j++)
{
if (j < table.Columns.Count - 1)
{
jsonString.Append("\"" + table.Columns[j].ColumnName.ToString()
+ "\":" + "\""
+ table.Rows[i][j].ToString() + "\",");
}
else if (j == table.Columns.Count - 1)
{
jsonString.Append("\"" + table.Columns[j].ColumnName.ToString()
+ "\":" + "\""
+ table.Rows[i][j].ToString() + "\"");
}
}
if (i == table.Rows.Count - 1)
{
jsonString.Append("}");
}
else
{
jsonString.Append("},");
}
}
jsonString.Append("]");
}
return jsonString.ToString();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
3.页面效果截图
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
