UserList.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>
<!--html是静态页面,不能执行C#代码,则不能用<% %>来执行C#代码,若想执行,则是用JQuery-->
<title></title>
<link rel="stylesheet" type="text/css" href="../css/tableStyle.css" />
<script src="../js/jquery-1.7.1.js" type="text/javascript"></script>
<!--主题引用-->
<link href="../js/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet"
type="text/css" />
<!-- 图标引用-->
<link href="../js/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" type="text/css" />
<!-- 一下三条jquary顺序不能颠倒-->
<script src="../js/jquery-easyui-1.3.1/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../js/jquery-easyui-1.3.1/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../js/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="../js/datapattern.js" type="text/javascript"></script><!--日期转换-->
<script type="text/javascript">
$(function () {
initTableList();
// (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s.S");
$("#showDetail").css("display", "none");
$("#editDiv").css("display", "none");
$("#addDiv").css("display", "none");
});
//提交添加新闻表单到后台
function subAddFrom() {
//把整个表单序列化成JSON ARRAY
var formData = $("#frmAdd").serializeArray();
var sendData = { txtTitle: $("#txtTitle").val(), txtPeople: $("#txtPeople").val() };
//表单提交
// $.post("Add.ashx", formData, function (data) {
// if (data == "OK") {
// //关闭对话框刷新列表
// $("#addDiv").dialog("close");
// //刷新表格
// initTableList();
// }
// });
//$.get
//$.post
//$.getJSON
$.ajax({
url: "Add.ashx",
type: "POST",
data: fromData,
async: true, //true时为异步请求,默认是true
cache: false, //解决缓存问题
success: function (data) {
if (data == "OK") {
//关闭对话框刷新列表
$("#addDiv").dialog("close");
//刷新表格
initTableList();
}
else {
alert(data);
}
}
});
}
function BindAddEvent(){
$("#btnAdd").click(function () {
$("#addDiv").css("display", "block");
$("#addDiv").dialog({
title: "对话框",
model: true,
width: 300,
height: 300,
collapsible: true,
minimizable: true,
maxmizable: true,
resizable: true,
button: [{
text: "添加",
id: 'btnAdd',
iconCls: 'icon-add',
handler: function () {
subAddFrom
// //把整个表单序列化成JSON ARRAY
// var temp = $("#frmAdd").serializeArray();
// var temp2 = { txtTitle: $("#txtTitle").val(), txtPeople: $("#txtPeople").val() };
// //表单提交
// $.post("AddMain.ashx", temp, function () {
// });
}
}, {
text: "关闭",
id: 'btnClose',
iconCls: 'icon-cancel', //图标
handler: function () {//按钮被点击时 执行此方法
$("#addDiv").dialog("close");
}
}]
});
});
}
function initTableList() {
$.getJSON("LoadAllNews.ashx", {}, function (data) {
$("#tbData").html("");
for (var key in data) {//加载表格的数据
var main = data[key];
$("#tbData").append("<tr><td>" + main.ID + "</td><td>" + main.title + "</td><td>" + (eval(main.Date.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s.S") + "</td><td><a href='#' class='detail' nId='" + mian.ID + "'>详情</a> <a class='editLink' href='javascript:void(0)' uId='" + main.ID + "'>修改</a> <a class='deleteLink' href='#'>删除</a></td></tr>");
bindDetailEvent();
bindDeleteEvent();
BindAddEvent();
bindEditEvent();
}
});
function bindEditEvent()
{
$(".editLink").click(function () {
var id=$(this).attr("uId");
//弹出对话框之前,对文本赋值
$.ajax({
url:"GetNewsById.ashx",
data:{newId:id},
type:"Post",
dataType:"json",
success:function(data){
var editId=data.ID;
$("#hidId").val(editId);
var title=data.title;
$("#txtEditTitle").val(title);
var people=data.people;
$("#txtEditPeople").val(people);
}
});
//弹出一个修改的对话框});
$("#editDiv").css("display","block");
$("#editDiv").dialog({
title: "对话框",
model: true,
width: 300,
height: 300,
collapsible: true,
minimizable: true,
maxmizable: true,
resizable: true,
button: [{
text: "修改",
id: 'btnEdit',
iconCls: 'icon-add',
handler: function () {
subEditFrom
// //把整个表单序列化成JSON ARRAY
// var temp = $("#frmAdd").serializeArray();
// var temp2 = { txtTitle: $("#txtTitle").val(), txtPeople: $("#txtPeople").val() };
// //表单提交
// $.post("AddMain.ashx", temp, function () {
// });
}
}, {
text: "关闭",
id: 'btnClose',
iconCls: 'icon-cancel', //图标
handler: function () {//按钮被点击时 执行此方法
$("#editDiv").dialog("close");
}
}]
});
});
}
//提交修改的表单
function subEditFrom(){
//将修改的表单提交到后台
var editFrmData=$("#editFrm").serializeArray();
$.post("Edit.ashx",editFrmData,function(data){
if(data=="OK")
{
//如果后台返回成功
//关闭对话框
$("#editDiv").dialog("close");
//刷新列表
initTableList();
}
else
{
alert(data);
}
});
}
function bindDetailEvent() {
//详情的点击事件,必须在加载完成之后
$(".detail").click(function () {
//通过当前的ID把数据再查一遍
$.getJSON("GetNewsById.ashx", { id: $(this).attr("nId") }, function () {
$("#title").text(data.title);
$("#people").text(data.people);
$("#Date").text(data.Date);
$("#content").text(data.content);
});
//弹出对话框
//先隐藏一个div
$("#showDetail").css("display", "block");
$("#showDetail").dialog({
title: "对话框",
model: true,
width: 300,
height: 300,
collapsible: true,
minimizable: true,
maxmizable: true,
resizable: true,
button: [{
text: "确定",
id: 'btnOK',
iconCls: 'icon-add',
handler: function () {
alert("确定被点击了");
}
}, {
text: "关闭",
id: 'btnClose',
iconCls: 'icon-cancel', //图标
handler: function () {//按钮被点击时 执行此方法
alert("取消被点击了");
}
}]
});
function bindDeleteEvent() {
//删除方法1
// $("#tbData a:contains('删除')").click(function () {
// if (confirm("您会删除吗")) {
// //发送异步请求,把Id发送到后台,后台删除这条数据
// //删除成功之后
// $(this).parent().hide(2000); // $(this).parent().hide("slow").remove();
// }
// });
//删除方法2:
$(".deleteLink").click(function(){
var id=$(this).attr("uId");
var trDom=$(this).parent().parent();
// $.messager.alert("提醒消息","提醒的内容");
$.messager.confirm("提醒的消息","您会删除吗?",function(r){
if (r){
$.get("Delete.ashx",{id:id},function(data){
if (data=="ok")
{
trDom.hide(1500);
}
else
{
$.messager.alert("提醒消息标题","删除败了");
}
});
}
});
});
}
</script>
</head>
<body>
<a id="btnAdd" href="javascript:void(0)">添加</a>
<!--表格数据的 开始-->
<table>
<thead>
<tr>
<th>编号</th>
<th>新闻标题</th>
<th>新闻发布时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbData">
<tr>
</tr>
</tbody>
</table>
<!--表格数据的结束-->
<!--弹出的详情对话框-->
<div id="showDetail">
<h3>我是弹出来的对话框</h3>
<table>
<tr>
<td>新闻标题</td><td><span id="title"></span></td>
</tr>
<tr>
<td>新闻发布人</td><td><span id="people"></span></td>
</tr>
<tr>
<td>新闻发布时间</td><td><span id="Date"></span></td>
</tr>
<tr>
<td>新闻内容</td><td><span id="content"></span></td>
</tr>
</table>
</div>
<!--弹出的详情对话框的结束-->
<!--弹出的添加对话框开始-->
<div id="addDiv">
<h3>我是弹出来的对话框</h3>
<form id="frmAdd">
<table>
<tr>
<td>新闻标题</td><td><input type="text" name="txtTitle" id="txtTitle"/></td>
</tr>
<tr>
<td>新闻发布人</td><td><input type="text" name="txtPeople" id="txtPeople"/></td>
</tr>
</table>
</form>
</div>
<!--弹出的添加对话框结束-->
<!--弹出的修改对话框开始-->
<div id="editDiv">
<h3>修改的表单</h3>
<form id="editFrm">
<input type="hidden" value="" id="hidId" name="hidId"/>
<table>
<tr>
<td>新闻标题</td><td><input type="text" name="txtEditTitle" id="txtEditTitle"/></td>
</tr>
<tr>
<td>新闻发布人</td><td><input type="text" name="txtEditPeople" id="txtEditPeople"/></td>
</tr>
</table>
</form>
</div>
<!--弹出的修改对话框结束-->
</body>
</html>