webservice的代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
/// <summary>
///WS 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WS : System.Web.Services.WebService {
public WS () {
//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string HelloWorld() {
return "Hello World";
}
[WebMethod(Description = "获得jobs表的数据,返回泛型集合")]
public List<Clsjob> getAllJjobs()
{
List<Clsjob> jobs = new List<Clsjob>();
SqlConnection myCnn = new SqlConnection("server=.\\sqlexpress;uid=sa;pwd=123456;database=pubs;");
SqlCommand myCmd=new SqlCommand("select * from jobs",myCnn);
//try
myCnn.Open();
SqlDataReader DR = myCmd.ExecuteReader();
while (DR.Read())
{
Clsjob job = new Clsjob();
job.Job_id = Convert.ToInt32( DR["job_id"] );
job.Job_desc = DR["job_desc"].ToString();
job.Min_lvl = Convert.ToInt32(DR["min_lvl"]);
job.Max_lvl = Convert.ToInt32(DR["max_lvl"]);
jobs.Add(job);
}
myCnn.Close();
return jobs;
}
[WebMethod(Description = "修改表数据")]
public void UpdateTable(int jid,string desc,int minlvl,int maxlvl)
{
SqlConnection myCnn = new SqlConnection("server=.\\sqlexpress;uid=sa;pwd=123456;database=pubs;");
string strCmd=string.Format("update jobs set job_desc='{0}',min_lvl={1},max_lvl={2} where job_id={3}",
desc,minlvl,maxlvl,jid);
SqlCommand myCmd = new SqlCommand(strCmd, myCnn);
//try
myCnn.Open();
myCmd.ExecuteNonQuery();
myCnn.Close();
}
}
实体类:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
///Clsjob 的摘要说明
/// </summary>
public class Clsjob
{
private int job_id;
public int Job_id
{
get { return job_id; }
set { job_id = value; }
}
private string job_desc;
public string Job_desc
{
get { return job_desc; }
set { job_desc = value; }
}
private int min_lvl;
public int Min_lvl
{
get { return min_lvl; }
set { min_lvl = value; }
}
private int max_lvl;
public int Max_lvl
{
get { return max_lvl; }
set { max_lvl = value; }
}
public Clsjob()
{
}
public Clsjob(int i)
{
job_id = i;
}
}
html:
<!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>
<title></title>
<style type="text/css">
tr.double
{
background-color: #fcdad5;
}
tr.over
{
background-color: #c9b5d4;
}
</style>
<script src="jquery-1.2.3-intellisense.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var str = ""; //获得表查询结果的所有数据
var sid = ""; //获得当前选中行的job_id的值
$("#btn0").click(function() {
$("#img1").ajaxStart(function() { $(this).show(2000); });
$("#img1").ajaxStop(function() { $(this).hide(1000); });
$.ajax({
type: "POST",
contentType: "application/json",
url: "WS.asmx/getAllJjobs",
data: "{}",
dataType: 'json',
success: function(res) {
var th = "<tr><th>ID</th><th>DESC</th><th>MIN</th><th>MAX</th></tr>";
$("#h1").html(th);
$(res.d).each(function() {
str += "<tr><td>" + this["Job_id"] + "</td><td>" + this["Job_desc"]
+ "</td><td>" + this["Min_lvl"] + "</td><td>" + this["Max_lvl"] + "</td></tr>";
});
$("#b1").html(str);
$("#b1 tr:odd").addClass("double");
$("#b1 tr").mouseover(function() { $(this).addClass("over"); });
$("#b1 tr").mouseout(function() { $(this).removeClass("over"); });
$("#b1 tr").click(function() {
$("#edit").show(1000);
$("#i1").html($(this).find("td:eq(0)").text());
$("#d1").val($(this).find("td:eq(1)").text());
$("#m1").val($(this).find("td:eq(2)").text());
$("#m2").val($(this).find("td:eq(3)").text());
//调整位置
var myoffset = $(this).offset();
var l = 320; //??
$("#edit").css("position", "absolute").css("left", l).css("top", myoffset.top);
});
$("#btn1").click(function() {
sid = $("#i1").html();
var d = $("#d1").val();
var min = $("#m1").val();
var max = $("#m2").val();
var strid = "{jid:" + sid + ",desc:'" + d + "',minlvl:" + min + ",maxlvl:" + max + "}";
alert(strid);
$.ajax({ type: "POST",
contentType: "application/json",
url: "WS.asmx/UpdateTable",
data: strid,
dataType: 'json',
success: function(res) {
// 验证,自行完成max的验证,desc的验证,注意 min必须小于max
var i = $("#i1").html();
i = eval(i + "-1");
var min1 = $("#m1").val();
var r1 = /[^\d1]/; //正则表达式
if (min1.length == 0) {
alert("不能为空!");
return;
}
if (r1.test(min1)) {
alert("必须是数字!");
return;
}
else if (min1.length < 2) {
alert("不能小于10");
}
else { //刷新当前html页面
$("#b1").find("tr:eq(" + i + ")").find("td:eq(1)").text($("#d1").val());
$("#b1").find("tr:eq(" + i + ")").find("td:eq(2)").text($("#m1").val());
$("#b1").find("tr:eq(" + i + ")").find("td:eq(3)").text($("#m2").val());
$("#edit").hide(1000);
}
}
});
});
$("#btn2").click(function() {
$("#edit").hide(1000);
});
//自行完成删除的操作
$("#btn3").click(function() {
if (confirm("确定删除吗?")) {
//自行添加Ajax
sid = $("#i1").html();
alert(sid);
$("#b1 tr td:first-child").filter(function() { ; return $(this).text() == sid; }).parent().remove();
$("#edit").hide(1000);
}
else {
return;
}
});
}
});
});
});
</script>
</head>
<body>
<input type="button" value="显示数据" id="btn0" />
<img id="img1" src="blueLoad.gif" alt="" style="display: none;" />
<div id="result">
</div>
<table id="datas" border="1">
<thead id="h1">
</thead>
<tbody id="b1">
</tbody>
</table>
<!--编辑-->
<div id="edit" style="display: none; background-color: #6699ed; width: 200px;">
id:<div id="i1" style="display: inline;">
</div>
<br />
desc:<input type="text" id="d1" /><br />
min:<input type="text" id="m1" />
<br />
max:<input type="text" id="m2" />
<input type="button" id="btn1" value="修改" />
<input type="button" id="btn2" value="取消修改" />
<input type="button" id="btn3" value="删除" />
</div>
</body>
</html>
资源连接地址:
待上传。。。