详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak
説明:引用AjaxPro.2.dll来异步动态获取数据展示在页面上面,以Table表形式显示数据信息。
AjaxPro.2自行去网上下载,网址: http://www.ajaxpro.info/ ------->点击 Download latest version 7.7.31.1.下载
Jquery包可以自行去网上下载或者根据自己也可不适用Jquery
Jquery 下载地址:http://www.veryhuo.com/down/html/jquery-1.7.2.html
客户端:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
}
#fullbg {
background-color:gray;
left:0;
opacity:0.5;
position:absolute;
top:0;
z-index:3;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#dialog {
background-color:#fff;
border:5px solid rgba(0,0,0, 0.4);
height:400px;
left:50%;
margin:-200px 0 0 -200px;
padding:1px;
position:fixed !important; /* 浮动对话框 */
position:absolute;
top:50%;
width:400px;
z-index:5;
border-radius:5px;
display:none;
}
#dialog p {
margin:0 0 12px;
height:24px;
line-height:24px;
background:#CCCCCC;
}
#dialog p.close {
text-align:right;
padding-right:10px;
}
#dialog p.close a {
color:#fff;
text-decoration:none;
}
.did_22{width:0;height:0;position:fixed;left:50%;rigth:50%;top:50%;bottom:50%; }
.aaa{width:600px;height:220px;margin-left:-300px;margin-top:-110px;background-color:#666;color:#fff;font-size:40px;font-family:"Comic Sans MS", cursive;text-align:center;line-height:220px;}
</style>
<script src="Javascript/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//通过新增按钮来控制表格的显示与隐藏
var optionFlag = "save";
var updateRowIndex = -1;
var checkFlag = false; //默认为不显示
function show() {
var kd = document.body.scrollWidth;
var gd = document.body.scrollHeight;
if ((navigator.userAgent.indexOf('MSIE') >= 0)
&& (navigator.userAgent.indexOf('Opera') < 0)) {//iE浏览器
kd = window.screen.width;
gd = window.screen.height;
}
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height: gd,
width: kd,
display: "block"
});
$("#dialog").show();
optionFlag = "save";
var f = document.getElementById("did"); //获得id为did的 div
if (!checkFlag) {
f.style.visibility = "visible";
} else {
f.style.visibility = "hidden";
}
checkFlag = !checkFlag;
}
//通过保存按钮将数据添加到表格中
function insertRow_() {
switch (optionFlag) {
case "save":
insertRow_$save();
break;
case "update":
insertRow_$update();
break;
default:
alert("操作失败!!");
}
}
function getName() {
var name = WebApplication1.WebForm1.getName().value;
alert(name);
}
function getDataSet() {
var ds = WebApplication1.WebForm1.getDataSet().value;
if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
var s = new Array();
s[s.length] = "<table id='mytable' border = '1' cellspacing = '0'>";
s[s.length] = "<tr>";
s[s.length] = "<td>序号</td>";
s[s.length] = "<td>编号</td>";
s[s.length] = "<td>时间</td>";
s[s.length] = "<td>名称</td>";
s[s.length] = "<td colspan='2'>操作</td>";
s[s.length] = "</tr>";
for (var i = 0; i < ds.Tables[0].Rows.length; i++) {
s[s.length] = "<tr>";
s[s.length] = "<td>"+(parseInt(i)+1)+"</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].id + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].f_date + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].f_name + "</td>";
s[s.length] = "<td><span id='upid" + ds.Tables[0].Rows[i].id + "' style='display:none;'>" + ds.Tables[0].Rows[i].id + "</span><a id='upbtndelete" + ds.Tables[0].Rows[i].id + "' href='#' onclick= update('upid" + ds.Tables[0].Rows[i].id + "','upbtndelete" + ds.Tables[0].Rows[i].id + "',this.parentNode.parentNode); >编辑</a> <span id='id" + ds.Tables[0].Rows[i].id + "' style='display:none;'>" + ds.Tables[0].Rows[i].id + "</span><a id='btndelete" + ds.Tables[0].Rows[i].id + "' href='#' onclick= getDelete('id" + ds.Tables[0].Rows[i].id + "','btndelete" + ds.Tables[0].Rows[i].id + "',this.parentNode.parentNode); >删除</a></td>";
s[s.length] = "</tr>";
}
s[s.length] = "</table>";
document.getElementById("div1").innerHTML = s.join("");
}
else {
alert("调用Ajax接口函数错误!");
}
}
$(document).ready(function () {
getDataSet();
})
function getDelete(idd, btnidd,row) {
var id = document.getElementById(idd);
var bntid = document.getElementById(btnidd);
var ds = WebApplication1.WebForm1.getDelete(id.innerHTML).value;
var table = document.getElementById("mytable");
table.deleteRow(row.rowIndex);
refurbish_();
if (ds == "1") {
alert("删除成功!");
} else {
alert("删除失败!")
}
}
//刷新
function refurbish_() {
var table = document.getElementById("mytable");
//获得table的行数
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].cells[0].innerHTML = i;
}
}
//插入数据
function insertRow_$save() {
//通过id获得要添加数据的表格
var table = document.getElementById("mytable");
//将所输入的内容赋给定义的变量
var titleName = document.getElementById("title").value;
var digestName = document.getElementById("digest").value;
var authorName = document.getElementById("author").value;
//获取下拉框内的内容
//var selectIndex_ = document.getElementById("select");
//var option = selectIndex_.options[selectIndex_.selectedIndex];
//var selectName = option.text;
//获取编号的内容
var numberid = table.rows.length;
//在表尾添加一行数据
var row_ = table.insertRow(table.rows.length);
row_.insertCell(0).innerHTML = numberid;
row_.insertCell(1).innerHTML = titleName;
row_.insertCell(2).innerHTML = digestName;
row_.insertCell(3).innerHTML = authorName;
//row_.insertCell(4).innerHTML = selectName;
row_.insertCell(4).innerHTML = "<td><span id='upid" + titleName + "' style='display:none;'>" + titleName + "</span><a id='upbtndelete" + titleName + "' href='#' onclick= update('upid" + titleName + "','upbtndelete" + titleName + "',this.parentNode.parentNode); >编辑</a> <span id='id" + titleName + "' style='display:none;'>" + titleName + "</span><a id='btndelete" + titleName + "' href='#' onclick= getDelete('id" + titleName + "','btndelete" + titleName + "',this.parentNode.parentNode); >删除</a></td>";
var ds = WebApplication1.WebForm1.getInsert(titleName, digestName, authorName).value;
document.getElementById("title").value = "";
document.getElementById("digest").value = "";
document.getElementById("author").value = "";
//document.getElementById("select").options[0].selected = "true";
var f = document.getElementById("did");
f.style.visibility = "hidden";
if (ds == "1") {
alert("insert数据成功!!");
} else {
alert("新增失败"); }
}
//通修改按钮对table里的数据进行修改
function update(upid, upbtn, row) {
var kd = document.body.scrollWidth;
var gd = document.body.scrollHeight;
if ((navigator.userAgent.indexOf('MSIE') >= 0)
&& (navigator.userAgent.indexOf('Opera') < 0)) {//iE浏览器
kd = window.screen.width;
gd = window.screen.height;
}
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height: gd,
width: kd,
display: "block"
});
$("#dialog").show();
updateRowIndex = row.rowIndex;
optionFlag = "update";
//对table里的数据进行回显
document.getElementById("title").value = row.cells[1].innerHTML;
document.getElementById("digest").value = row.cells[2].innerHTML;
document.getElementById("author").value = row.cells[3].innerHTML;
// var selectText = row.cells[4].innerHTML;
// var sel = document.getElementById("select");
// var ops = sel.options;
// for (var i = 0; i < ops.length; i++) {
// if (selectText == ops[i].text) {
// sel.options[i].selected = "true";
// }
// }
var f = document.getElementById("did");
f.style.visibility = "visible";
}
//修改后的保存
var tr;
function insertRow_$update() {
var table = document.getElementById("mytable");
tr = table.rows[updateRowIndex];
var p = document.getElementById("title");
tr.cells[1].innerHTML = p.value;
var p1 = document.getElementById("digest");
tr.cells[2].innerHTML = p1.value;
var p2 = document.getElementById("author");
tr.cells[3].innerHTML = p2.value;
// p = document.getElementById("select");
// var Index_ = p.selectedIndex;
// var option = p.options[Index_];
// var selectName = option.text;
// tr.cells[4].innerHTML = selectName;
var ds = WebApplication1.WebForm1.getUpdate(p.value, p1.value, p2.value).value;
document.getElementById("title").value = "";
document.getElementById("digest").value = "";
document.getElementById("author").value = "";
//document.getElementById("select").options[0].selected = "true";
var f = document.getElementById("did");
f.style.visibility = "hidden";
if (ds == "1") {
alert("update数据成功!!");
}
else {
alert("修改失败"); }
}
</script>
<script type="text/javascript">
var pageSize = 15; //每页显示的记录条数
var curPage = 0; //当前页
var lastPage; //最后页
var direct = 0; //方向
var len; //总行数
var page; //总页数
var begin;
var end;
$(document).ready(function display() {
len = $("#mytable tr").length - 1; // 求这个表的总行数,剔除第一行介绍
page = len % pageSize == 0 ? len / pageSize : Math.floor(len / pageSize) + 1; //根据记录条数,计算页数
curPage = 1; // 设置当前为第一页
displayPage(1); //显示第一页
document.getElementById("btn0").innerHTML = "当前 " + curPage + "/" + page + " 页 每页 "; // 显示当前多少页
document.getElementById("sjzl").innerHTML = "数据总量 " + len + ""; // 显示数据量
document.getElementById("pageSize").value = pageSize;
$("#btn1").click(function firstPage() { // 首页
curPage = 1;
direct = 0;
displayPage();
});
$("#btn2").click(function frontPage() { // 上一页
direct = -1;
displayPage();
});
$("#btn3").click(function nextPage() { // 下一页
direct = 1;
displayPage();
});
$("#btn4").click(function lastPage() { // 尾页
curPage = page;
direct = 0;
displayPage();
});
$("#btn5").click(function changePage() { // 转页
curPage = document.getElementById("changePage").value * 1;
if (!/^[1-9]\d*$/.test(curPage)) {
alert("请输入正整数");
return;
}
if (curPage > page) {
alert("超出数据页面");
return;
}
direct = 0;
displayPage();
});
$("#pageSizeSet").click(function setPageSize() { // 设置每页显示多少条记录
pageSize = document.getElementById("pageSize").value; //每页显示的记录条数
if (!/^[1-9]\d*$/.test(pageSize)) {
alert("请输入正整数");
return;
}
alert("设置成功");
len = $("#mytable tr").length - 1;
page = len % pageSize == 0 ? len / pageSize : Math.floor(len / pageSize) + 1; //根据记录条数,计算页数
curPage = 1; //当前页
direct = 0; //方向
firstPage();
});
});
function displayPage() {
if (curPage <= 1 && direct == -1) {
direct = 0;
alert("已经是第一页了");
return;
} else if (curPage >= page && direct == 1) {
direct = 0;
alert("已经是最后一页了");
return;
}
lastPage = curPage;
// 修复当len=1时,curPage计算得0的bug
if (len > pageSize) {
curPage = ((curPage + direct + len) % len);
} else {
curPage = 1;
}
document.getElementById("btn0").innerHTML = "当前 " + curPage + "/" + page + " 页 每页 "; // 显示当前多少页
begin = (curPage - 1) * pageSize + 1; // 起始记录号
end = begin + 1 * pageSize - 1; // 末尾记录号
if (end > len) end = len;
$("#mytable tr").hide(); // 首先,设置这行为隐藏
$("#mytable tr").each(function (i) { // 然后,通过条件判断决定本行是否恢复显示
if ((i >= begin && i <= end) || i == 0)//显示begin<=x<=end的记录
$(this).show();
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="ddddddd" onclick="getDataSet()" />
<input type="button" value="新增" onclick="show()"></input>
<a id="btn0"></a>
<input id="pageSize" type="text" size="1" maxlength="2" value="getDefaultValue()"/><a> 条 </a> <a href="#" id="pageSizeSet">设置</a>
<a id="sjzl"></a>
<a href="#" id="btn1">首页</a>
<a href="#" id="btn2">上一页</a>
<a href="#" id="btn3">下一页</a>
<a href="#" id="btn4">尾页</a>
<a href="javascript:void()" onclick="" id="A1">尾页1</a>
<a>转到 </a>
<input id="changePage" type="text" size="1" maxlength="4"/>
<a>页 </a>
<a href="#" id="btn5">跳转</a>
<div id="div1"></div>
<span id="dd" onclick="getName()">get</span>
</div>
<div align="center" id="did" style="visibility:hidden;">
</div>
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height: bh,
width: bw,
display: "block"
});
$("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
<div id="main"><a href="javascript:showBg();">点击这里查看效果</a>
<div id="fullbg"></div>
<div id="dialog">
<p class="close"><a href="#" onclick="closeBg();">关闭</a></p>
<form action="">
<table>
<tr>
<td>编号:</td>
<td><input type="text" id="title"></input></td>
</tr><tr>
<td>时间:</td>
<td><input type="text" id="digest"></input></td>
</tr>
<tr>
<td>名称:</td>
<td><input type="text" id="author"></input></td>
</tr>
</table>
<br>
<center>
<input type="button" value="保存" onclick="insertRow_()"></input>
<input type="reset" value="重置"></input>
</center>
</form>
</div>
</div>
</form>
</body>
</html>
服务器端:
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(WebForm1));//注册ajaxtypeof(写引用的类或者写当前页面的名称)
}
[AjaxPro.AjaxMethod]
public string getName()
{
return "dddddddddddddd";
}
[AjaxPro.AjaxMethod]//必须要写
public DataSet getDataSet()
{
DataSet dt = new DataSet();
try
{
DataTable ds = new DataTable();
ds.Columns.Add(new DataColumn("id", typeof(Int32)));
ds.Columns.Add(new DataColumn("f_date", typeof(String)));
ds.Columns.Add(new DataColumn("f_name", typeof(String)));
DataRow dr = ds.NewRow();
dr["id"] = 1;
dr["f_date"] = "2016-09-09";
dr["f_name"] = "订购1000元的货物";
DataRow dr1 = ds.NewRow();
dr1["id"] = 2;
dr1["f_date"] = "2016-09-10";
dr1["f_name"] = "订购10000元的货物";
ds.Rows.Add(dr);
ds.Rows.Add(dr1);
for (int i = 0; i < 8000; i++)
{
DataRow dr2 = ds.NewRow();
dr2["id"] = i+3;
dr2["f_date"] = "2016-09-10";
dr2["f_name"] = "订购"+(i+2)*2+"元的货物";
ds.Rows.Add(dr2);
}
dt.Tables.Add(ds);
return dt;
}
catch
{
return null;
}
}
[AjaxPro.AjaxMethod]
public string getDelete(int id)
{
if (id == 6)
return "1";
else
return "0";
}
[AjaxPro.AjaxMethod]
public string getInsert(string id,string data,string name)
{
return "1";
}
[AjaxPro.AjaxMethod]
public string getUpdate(string id, string data, string name)
{
return "1";
}
}
}
web.config文件加入下面的内容即可
<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>
............................