BootStrap-tableのasp.netでの応用
29570 ワード
フロントUI:
jsonダイナミックペイントテーブル
バックグラウンド一般ハンドラ
公式ドキュメントインタフェース:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
<head>
<meta charset="utf-8" />
<title>title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
head>
<body>
<table id="table">table>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-success">
<span class="glyphicon glyphicon-plus" aria-hidden="true">span>
button>
<button id="btn_edit" type="button" class="btn btn-info">
<span class="glyphicon glyphicon-pencil" aria-hidden="true">span>
button>
<button id="btn_delete" type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-remove" aria-hidden="true">span>
button>
div>
<script src="scripts/jquery-1.11.1.min.js">script>
<script src="scripts/bootstrap.min.js">script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js">script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js">script>
body>
html>jsonダイナミックペイントテーブル
$('#table').bootstrapTable({
url: "test.ashx",
cache: false,//
method: "post",
toolbar: "#toolbar",
showRefresh: true,//
sortStable: true,//
contentType: "application/x-www-form-urlencoded",//post ，
pagination: true,//
sidePagination: "server",//
pageNumber: 1,// ， 1
pageSize: 10,// , 10
search: true,//
clickToSelect: true,//
queryParamsType: "",
queryParams: function (params) {
return {
pageSize: params.pageSize,//pageSize
pageNumber: params.pageNumber,//
sortName: params.sortName,//
sortOrder: params.sortOrder,// ,asc,desc
searchText: params.searchText//
};
},
formatLoadingMessage: function () {
return " ， ....";
},
formatNoMatches: function () {
return " .";
},
columns: [{
field: "select",
title: " ",
checkbox:true,
}, {
field: 'LAB_NO',
title: ' ',
sortable:true
}, {
field: 'LAB_NAME',
title: ' '
}, {
field: 'PHONE',
title: ' '
}, {
field: 'MAIL',
title: ' '
}, {
field: 'CONTACT',
title: ' '
}, {
field: 'USER_FUNC',
title: ' '
}]
});バックグラウンド一般ハンドラ
///
/// bootstrap
///
public class test : IHttpHandler
{
SQLDatabase db = new SQLDatabase();
private int pageSize = 10;//
private int pageNumber = 1;//
private string sortName = "";//
private string sortOrder = "1";//asc or desc
private string searchText = "";//
public void ProcessRequest(HttpContext context)
{
if (!string.IsNullOrEmpty(context.Request["pageSize"]))
pageSize = Convert.ToInt32(context.Request["pageSize"]);
if (!string.IsNullOrEmpty(context.Request["pageNumber"]))
pageNumber = Convert.ToInt32(context.Request["pageNumber"]);
if (!string.IsNullOrEmpty(context.Request["sortName"]))
sortName = (context.Request["sortName"]);
if (!string.IsNullOrEmpty(context.Request["sortOrder"]))
{
sortOrder = (context.Request["sortOrder"]);
if (sortOrder == "asc")
sortOrder = "1";
else if (sortOrder == "desc")
sortOrder = "0";
}
string strWhere = "";
if (!string.IsNullOrEmpty(context.Request["searchText"]))
{
searchText = (context.Request["searchText"]);
strWhere += string.Format(" (user_no like '%{0}%' or user_name like '%{0}%')", searchText);
}
string json = LoadTableByPagination("tb_user", "*", pageNumber, pageSize,Convert.ToInt32(sortOrder), strWhere, "user_no");
context.Response.Write(json);
context.Response.End();
}
///
/// ， table json
///
///
///
///
///
/// 0 ，1
///
///
///
/// DataTable json
///
/// DataTable
/// string, object>> list = new Liststring, object>>();
foreach (DataRow dr in dt.Rows)
{
Dictionary<string, object> result = new Dictionary<string, object>();
foreach (DataColumn dc in dt.Columns)
{
result.Add(dc.ColumnName, dr[dc]);
}
list.Add(result);
}
int recursionLimit = 100;
JavaScriptSerializer serialize = new JavaScriptSerializer();
serialize.RecursionLimit = recursionLimit;
serialize.MaxJsonLength = Int32.MaxValue;
return serialize.Serialize(list);
}
#endregion Json&DataTable
} Sql Server 存储过程
/* */
CREATE PROCEDURE [dbo].[PAGINATION]
@TABLE varchar(50),--
@FEILDS VARCHAR(1000),--
@PAGE_INDEX INT,--
@PAGE_SIZE INT,--
@ORDERTYPE BIT,-- 0 desc 1 asc
@ANDWHERE VARCHAR(1000)='',--where where
@ORDERFEILD VARCHAR(100) --
as
DECLARE @EXECSQL VARCHAR(2000)
DECLARE @ORDERSTR VARCHAR(100)
DECLARE @ORDERBY VARCHAR(100)
BEGIN
set NOCOUNT on
IF @ORDERTYPE = 1
BEGIN
SET @ORDERSTR = ' > ( SELECT MAX(['+@ORDERFEILD+'])'
SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' ASC'
END
ELSE
BEGIN
SET @ORDERSTR = ' < ( SELECT MIN(['+@ORDERFEILD+'])'
SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' DESC'
END
IF @PAGE_INDEX = 1 -- ，
BEGIN
IF @ANDWHERE=''
SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM ['+@TABLE+'] '+@ORDERBY
ELSE
SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM ['+@TABLE+'] WHERE '+@ANDWHERE+' '+ @ORDERBY
END
ELSE
BEGIN
IF @ANDWHERE=''
BEGIN --
SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM ['+@TABLE+'] WHERE '+@ORDERFEILD+
@ORDERSTR+' FROM (SELECT TOP '+STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '+@ORDERFEILD+
' FROM ['+@TABLE+'] '+@ORDERBY+') AS TEMP) '+ @ORDERBY
END
ELSE
BEGIN
SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM ['+@TABLE+'] WHERE '+@ORDERFEILD+
@ORDERSTR+' FROM (SELECT TOP '+ STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '+@ORDERFEILD+
' FROM ['+@TABLE+'] WHERE '+@ANDWHERE+' '+@ORDERBY+') AS TEMP) AND '+@ANDWHERE+' '+ @ORDERBY
END
END
-- table
IF @ANDWHERE=''
set @EXECSQL=@EXECSQL+'; select count(*) as total from ['+@TABLE+'] '
else
set @EXECSQL=@EXECSQL+'; select count(*) as total from ['+@TABLE+'] WHERE '+@ANDWHERE
EXEC (@EXECSQL)--
END
GO公式ドキュメントインタフェース:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/