步步为营-78-新闻展示(Ajax+Json+easyUI)
Json:JavaScript Object Notation
1.1 Json对象的接收处理
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//方法1
$('#test1').click(function () {
//$.post("01Json接收处理的4种方法.ashx", {}, function (data) { alert("阿斯蒂芬"); });
$.post("01Json接收处理的4种方法.ashx", {}, function (data) { alert( data.name); },"json");
});
//方法2
$('#test2').click(function () {
$.post("01Json接收处理的4种方法.ashx", {}, function (data) {
var stJson = $.parseJSON(data);
alert(stJson.Age);
});
});
//方法3
$('#test3').click(function () {
$.getJSON("01Json接收处理的4种方法.ashx", {}, function (data) {
alert(data.name);
});
});
//方法4
$('#test4').click(function () { $.ajax({
type: "post",
url: "01Json接收处理的4种方法.ashx",
data: {},
success: function (msg) {
alert(msg.Age);
},
dataType:"json",
});
}); });
</script>
</head>
<body>
<input type="button" id="test1" value="姓名" />
<input type="button" id="test2" value="年龄" />
<input type="button" id="test3" value="姓名" />
<input type="button" id="test4" value="年龄"/>
</body>
</html>
html
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace JsonTest
{
/// <summary>
/// _01Json接收处理的4种方法 的摘要说明
/// </summary>
public class _01Json接收处理的4种方法 : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
string strJson=@"{""name"":""张三"",""Age"":""18""}";
context.Response.Write(strJson);
} public bool IsReusable
{
get
{
return false;
}
}
}
}
ashx
2.1 列表展示:主要是后台获取数据=>传递给前台转成json对象=>拼接成HTML代码附加到table表中
需要注意两点:
//1 专门实现序列化和和反序列化,很方便
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
string str = js.Serialize(newsList);
//2 将序列化成json格式后日期(毫秒数)转成日期格式
function ChangeDateFormat(cellval) {
var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate;
}
using NewsBLL;
using NewsModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization; namespace JsonTest
{
/// <summary>
/// _02_01新闻展示 的摘要说明
/// </summary>
public class _02_01新闻展示 : IHttpHandler
{
//创建Bll层对象
NewsInfoBll bll = new NewsInfoBll();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
List<NewsInfoModel> newsList = bll.GetNewsInfo();
//很重要的一行代码
JavaScriptSerializer js = new JavaScriptSerializer();
string str = js.Serialize(newsList);
context.Response.Write(str);
} public bool IsReusable
{
get
{
return false;
}
}
}
}
ashx.cs
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function () {
pageLoad();
}); function pageLoad() {
$.post("02-01新闻展示.ashx", {},
function (data) {
var stJson = $.parseJSON(data);//其结果为Json数组
//获取后台发来的Json对象
var len = stJson.length;
if (len > ) {
for (var i = ; i < len; i++) {
$("<tr><td>" + stJson[i].NewsId + "</td><td>" + stJson[i].NewsTitle + "</td><td>" + stJson[i].NewsContent + "</td><td>" +ChangeDateFormat( stJson[i].SubTime )+ "</td></tr>").appendTo("#tableList");
}
} else {
$("<tr><td>没有数据</td></tr>").appendTo("#tableList");
} });
//将序列化成json格式后日期(毫秒数)转成日期格式
function ChangeDateFormat(cellval) {
var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), ));
var month = date.getMonth() + < ? "" + (date.getMonth() + ) : date.getMonth() + ;
var currentDate = date.getDate() < ? "" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate;
} } </script>
</head>
<body> <table id="tableList">
<thead>
<th>新闻Id</th> <th>新闻标题</th> <th>新闻内容</th> <th>发布时间</th>
</thead>
</table>
</body>
</html>
新闻展示.html
运行效果
2.2 详细信息:设置隐藏的dialog对话框=>为信息添加链接=>显示对话框和并附上相应的值
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Css/tableStyle.css" rel="stylesheet" />
<link href="Css/themes/default/easyui.css" rel="stylesheet" />
<link href="Css/themes/icon.css" rel="stylesheet" /> <script src="JQuery/jquery-1.7.1.js"></script>
<script src="JQuery/jquery.easyui.min.js"></script>
<script src="JQuery/easyui-lang-zh_CN.js"></script> <script>
$(function () {
//01 页面加载
pageLoad();
// 将详细信息div隐藏
$("#detailDiv").css("display", "none");
});
//01 页面加载
function pageLoad() {
$.post("02-01新闻展示.ashx", {},
function (data) {
var stJson = $.parseJSON(data);//其结果为Json数组
//获取后台发来的Json对象
var len = stJson.length;
if (len > ) {
for (var i = ; i < len; i++) {
$("<tr><td>" + stJson[i].NewsId + "</td><td>" + stJson[i].NewsTitle + "</td><td>" + stJson[i].NewsContent + "</td><td>" +ChangeDateFormat( stJson[i].SubTime )+ "</td> <td><a href='javascript:void(0)' class='deletes' dId='"+stJson[i].NewsId+"'>删除</a></td> <td><a href='javascript:void(0)' class='details' nId='"+stJson[i].NewsId+"'>详细</a></td> <td><a href='javascript:void(0)' class='edits' eId='"+stJson[i].NewsId+"'>编辑</a></td> </tr>").appendTo("#tableList");
//03 详细信息
bindDetailClick();
}
} else {
$("<tr><td>没有数据</td></tr>").appendTo("#tableList");
}
}); }
//02 将序列化成json格式后日期(毫秒数)转成日期格式
function ChangeDateFormat(cellval) {
var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), ));
var month = date.getMonth() + < ? "" + (date.getMonth() + ) : date.getMonth() + ;
var currentDate = date.getDate() < ? "" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate;
}
//03 详细信息
function bindDetailClick() {
//03-01 添加单击事件
$(".details").click(function () {
var id = $(this).attr("nId");
$.post("02-02新闻详细.ashx", { "id": id }, function (data) {
var strJson = $.parseJSON(data);
//为文本框赋值
$("#NewId").text(strJson[].NewsId);
$("#SubBy").text(strJson[].SubBy);
$("#TypeId").text(strJson[].TypeId);
//显示div
$("#detailDiv").css("display", "block");
//以对话框的形式弹出
$('#detailDiv').dialog({
width: ,
height: ,
title: "用户详细信息",
collapsible: true,
maximizable: true,
resizable: true,
modal: true,
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
alert('ok');
}
}, {
text: 'Cancel',
handler: function () {
$('#detailDiv').dialog('close');
}
}]
});
});
});
} </script>
</head>
<body> <table id="tableList">
<thead>
<th>新闻Id</th> <th>新闻标题</th> <th>新闻内容</th> <th>发布时间</th> <th>删除</th> <th>详细</th> <th>编辑</th>
</thead>
</table> <!------------03详细信息------------------>
<div id="detailDiv">
<table>
<tr>
<td>新闻Id</td>
<td><span id="NewId"></span></td>
</tr>
<tr>
<td>上传者</td>
<td><span id="SubBy"></span></td>
</tr>
<tr>
<td>所属类型</td>
<td><span id="TypeId"></span></td>
</tr>
</table>
</div>
<!------------详细信息------------------> </body>
</html>
HTML---03
using NewsBLL;
using NewsModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization; namespace JsonTest
{
/// <summary>
/// _02_02新闻详细 的摘要说明
/// </summary>
public class _02_02新闻详细 : IHttpHandler
{
//创建Bll层对象
NewsInfoBll bll = new NewsInfoBll();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
//01 获取新闻id
if (context.Request["id"] != null)
{
int newsId = Convert.ToInt32(context.Request["id"]);
List<NewsInfoModel> newsList = bll.GetNewsInfo(newsId);
JavaScriptSerializer jss = new JavaScriptSerializer();
string str = jss.Serialize(newsList);
context.Response.Write(str);
} } public bool IsReusable
{
get
{
return false;
}
}
}
}
ashx
2.3 删除 对应04
2.4 添加 对应05
2.5 编辑 对应06
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Css/tableStyle.css" rel="stylesheet" />
<link href="Css/themes/default/easyui.css" rel="stylesheet" />
<link href="Css/themes/icon.css" rel="stylesheet" /> <script src="JQuery/jquery-1.7.1.js"></script>
<script src="JQuery/jquery.easyui.min.js"></script>
<script src="JQuery/easyui-lang-zh_CN.js"></script> <script>
$(function () {
//01 页面加载
pageLoad();
// 03将详细信息div隐藏
$("#detailDiv").css("display", "none");
//05将添加新闻div隐藏
$("#addDiv").css("display", "none");
//06将编辑新闻div隐藏
$("#editDiv").css("display", "none"); });
//01 页面加载
function pageLoad() {
$.post("02-01新闻展示.ashx", {},
function (data) {
var stJson = $.parseJSON(data);//其结果为Json数组
//获取后台发来的Json对象
var len = stJson.length;
if (len > ) {
for (var i = ; i < len; i++) {
$("<tr><td>" + stJson[i].NewsId + "</td><td>" + stJson[i].NewsTitle + "</td><td>" + stJson[i].NewsContent + "</td><td>" +ChangeDateFormat( stJson[i].SubTime )+ "</td> <td><a href='javascript:void(0)' class='deletes' dId='"+stJson[i].NewsId+"'>删除</a></td> <td><a href='javascript:void(0)' class='details' nId='"+stJson[i].NewsId+"'>详细</a></td> <td><a href='javascript:void(0)' class='edits' eId='"+stJson[i].NewsId+"'>编辑</a></td> </tr>").appendTo("#tableList");
//03 详细信息
bindDetailClick();
//04 删除信息
bindDeleteClick();
//06 编辑信息
bindEditClick();
}
} else {
$("<tr><td>没有数据</td></tr>").appendTo("#tableList");
}
}); }
//02 将序列化成json格式后日期(毫秒数)转成日期格式
function ChangeDateFormat(cellval) {
var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), ));
var month = date.getMonth() + < ? "" + (date.getMonth() + ) : date.getMonth() + ;
var currentDate = date.getDate() < ? "" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate;
}
//03 详细信息
function bindDetailClick() {
//03-01 添加单击事件
$(".details").click(function () {
var id = $(this).attr("nId");
$.post("02-02新闻详细.ashx", { "id": id }, function (data) {
var strJson = $.parseJSON(data);
//为文本框赋值
$("#NewId").text(strJson[].NewsId);
$("#SubBy").text(strJson[].SubBy);
$("#TypeId").text(strJson[].TypeId);
//显示div
$("#detailDiv").css("display", "block");
//以对话框的形式弹出
$('#detailDiv').dialog({
width: ,
height: ,
title: "新闻详细信息",
collapsible: true,
maximizable: true,
resizable: true,
modal: true,
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
alert('ok');
}
}, {
text: 'Cancel',
handler: function () {
$('#detailDiv').dialog('close');
}
}]
});
});
});
}
//04 删除信息
function bindDeleteClick() {
$(".deletes").click(function () {
var id = $(this).attr("dId");
$.messager.confirm("删除提示", "确认删除选中记录吗?", function (r) {
if (r) {
$.post("02-03新闻删除.ashx", { "id": id }, function (data) {
if (data == "ok") {
//清空原有数据
$("#tableList tr:gt(0)").remove();
//重新加载
pageLoad();
$.messager.show({
title: "提示",
msg: "删除成功!",
showType:"show"
});
} else {
$.messager.alert("提示","删除失败","error");
}
});
}
});
});
}
//05 添加新闻
function bindAddClick() {
//05-01 显示div
$("#addDiv").css("display", "block");
//05-02 以对话框形式弹出
$('#addDiv').dialog({
width: ,
height: ,
title: "添加新闻信息",
collapsible: true,
maximizable: true,
resizable: true,
modal: true,
buttons: [{
text: '添加',
iconCls: 'icon-ok',
handler: function () {
$.post("02-04新闻添加.ashx", { "title": $("#AddNewsTitle").val(), "content": $("#AddNewsContent").val() },
function (data) {
if (data == "ok") {
//清空原有数据
$("#tableList tr:gt(0)").remove();
//重新加载
pageLoad();
$.messager.show({
title: "提示",
msg: "添加成功!",
showType: "show"
});
//关闭对话框
$('#addDiv').dialog('close');
} else {
$.messager.alert("提示", "添加失败", "error");
}
});
}
}, {
text: 'Cancel',
handler: function () {
$('#detailDiv').dialog('close');
}
}]
}); }
//06 编辑信息
function bindEditClick() {
//06-01 添加单击事件
$(".edits").click(function () {
var id = $(this).attr("eId");
$.post("02-02新闻详细.ashx", { "id": id }, function (data) {
var strJson = $.parseJSON(data);
//为文本框赋值
$("#editNewsId").val(strJson[].NewsId);
$("#eidtNewsTitle").val(strJson[].NewsTitle);
$("#editNewsContent").val(strJson[].NewsContent);
$("#editTypeId").val(strJson[].TypeId);
//显示div
$("#editDiv").css("display", "block");
//以对话框的形式弹出
$('#editDiv').dialog({
width: ,
height: ,
title: "新闻详细信息",
collapsible: true,
maximizable: true,
resizable: true,
modal: true,
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
//完成数据更新
editNewsInfo();
}
}, {
text: 'Cancel',
handler: function () {
$('#detailDiv').dialog('close');
}
}]
});
});
});
}
//06-02 完成数据的更新
function editNewsInfo() {
//01 获取表单中的数据,并将其序列化
var pars = $("#editForm").serializeArray();
$.post("02-05新闻编辑.ashx", pars, function (data) {
if (data == "ok") {
//清空原有数据
$("#tableList tr:gt(0)").remove();
//重新加载
pageLoad();
$.messager.show({
title: "提示",
msg: "修改成功!",
showType: "show"
});
//关闭对话框
$('#editDiv').dialog('close');
} else {
$.messager.alert("提示", "修改失败", "error");
}
});
} </script>
</head>
<body>
<input type="button" id="btnAddNewsInfo" value="添加新闻" onclick="bindAddClick()"/>
<table id="tableList">
<thead>
<th>新闻Id</th> <th>新闻标题</th> <th>新闻内容</th> <th>发布时间</th> <th>删除</th> <th>详细</th> <th>编辑</th>
</thead>
</table> <!------------03详细信息-Start----------------->
<div id="detailDiv">
<table>
<tr>
<td>新闻Id</td>
<td><span id="NewId"></span></td>
</tr>
<tr>
<td>上传者</td>
<td><span id="SubBy"></span></td>
</tr>
<tr>
<td>所属类型</td>
<td><span id="TypeId"></span></td>
</tr>
</table>
</div>
<!------------03详细信息-End----------------->
<!------------04删除信息-start---End-----------------> <!------------05添加信息-Start----------------->
<div id="addDiv">
<table>
<tr>
<td>新闻标题</td>
<td><input type="text" id="AddNewsTitle" /> </td>
</tr>
<tr>
<td>新闻内容</td>
<td><input type="text" id="AddNewsContent" /> </td>
</tr> </table>
</div>
<!------------05添加信息-End----------------->
<!------------06编辑信息-Start----------------->
<div id="editDiv">
<form id="editForm">
<input type="hidden" name="txtEditNewsId" id="editNewsId" />
<table>
<tr><td>新闻标题</td><td><input type="text" name="txtEditNewsTitle" id="eidtNewsTitle" /></td></tr>
<tr><td>新闻内容</td><td><input type="text" name="txtEditNewsContent" id="editNewsContent" /></td></tr>
<tr><td>新闻类型</td><td><input type="text" name="txtEditTypeId" id="editTypeId" /></td></tr>
</table>
</form>
</div>
<!------------06编辑信息-End-----------------> </body>
</html>
2.6 分页
2.6.1 先改后台代码
using NewsBLL;
using NewsModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization; namespace JsonTest
{
/// <summary>
/// _02_01新闻展示 的摘要说明
/// </summary>
public class _02_01新闻展示 : IHttpHandler
{
//创建Bll层对象
NewsInfoBll bll = new NewsInfoBll();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
List<NewsInfoModel> newsList = bll.GetNewsInfo();
//很重要的一行代码
JavaScriptSerializer js = new JavaScriptSerializer();
string str = js.Serialize(newsList);
context.Response.Write(str);
} public bool IsReusable
{
get
{
return false;
}
}
}
}
修改前
using NewsBLL;
using NewsCommon;
using NewsModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization; namespace JsonTest
{
/// <summary>
/// _02_01新闻展示 的摘要说明
/// </summary>
public class _02_01新闻展示 : IHttpHandler
{
//创建Bll层对象
NewsInfoBll bll = new NewsInfoBll();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
//01 设置每一页显示条数
int pageSize = ;
//02 设置当前页数
int pageIndex;
if (!int.TryParse(context.Request["pageIndex"], out pageIndex))
{
pageIndex = ;
}
//03 获取总的页数
int pageCount = bll.GetNewsInfoPageCount(pageSize);
//04 判断当前页数和总页数的关系
pageIndex = pageIndex < ? : pageIndex;
pageIndex = pageIndex > pageCount ? pageCount : pageIndex;
//05获取显示数据
List<NewsInfoModel> newsInfoList = bll.GetNewsInfoPage(pageIndex, pageSize);
//06 获取页码条
string pageBarStr = PageBarHelper.GetPageBar(pageIndex, pageCount, );
//很重要的一行代码
JavaScriptSerializer js = new JavaScriptSerializer();
//07
string str = js.Serialize(new { UList = newsInfoList, pageStr = pageBarStr });
context.Response.Write(str);
} public bool IsReusable
{
get
{
return false;
}
}
}
}
修改后
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title> <link href="http://localhost:60660/style/style.css" rel="stylesheet" /> <link href="Css/tableStyle.css" rel="stylesheet" />
<link href="Css/themes/default/easyui.css" rel="stylesheet" />
<link href="Css/themes/icon.css" rel="stylesheet" /> <link href="http://localhost:60660/style/PageBarStyle.css" rel="stylesheet" /> <script src="JQuery/jquery-1.7.1.js"></script>
<script src="JQuery/jquery.easyui.min.js"></script>
<script src="JQuery/easyui-lang-zh_CN.js"></script> <script>
$(function () {
//01 页面加载
pageLoad();
// 03将详细信息div隐藏
$("#detailDiv").css("display", "none");
//05将添加新闻div隐藏
$("#addDiv").css("display", "none");
//06将编辑新闻div隐藏
$("#editDiv").css("display", "none"); });
//01 页面加载
function pageLoad(pageIndex) {
$.post("02-01新闻展示.ashx", {"pageIndex":pageIndex},
function (data) {
var stJson = $.parseJSON(data);//其结果为Json数组
//获取后台发来的Json对象
var len = stJson.UList.length;
if (len > ) {
for (var i = ; i < len; i++) {
$("<tr><td>" + stJson.UList[i].NewsId + "</td><td>" + stJson.UList[i].NewsTitle + "</td><td>" + stJson.UList[i].NewsContent + "</td><td>" + ChangeDateFormat(stJson.UList[i].SubTime) + "</td> <td><a href='javascript:void(0)' class='deletes' dId='" + stJson.UList[i].NewsId + "'>删除</a></td> <td><a href='javascript:void(0)' class='details' nId='" + stJson.UList[i].NewsId + "'>详细</a></td> <td><a href='javascript:void(0)' class='edits' eId='" + stJson.UList[i].NewsId + "'>编辑</a></td> </tr>").appendTo("#tableList"); //07显示页码条
$("#pageBarDiv").html(stJson.pageStr);
//08 为页码条添加click事件
bindPageBarClick();
//03 详细信息
bindDetailClick();
//04 删除信息
bindDeleteClick();
//06 编辑信息
bindEditClick();
}
} else {
$("<tr><td>没有数据</td></tr>").appendTo("#tableList");
}
}); }
//02 将序列化成json格式后日期(毫秒数)转成日期格式
function ChangeDateFormat(cellval) {
var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), ));
var month = date.getMonth() + < ? "" + (date.getMonth() + ) : date.getMonth() + ;
var currentDate = date.getDate() < ? "" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate;
}
//03 详细信息
function bindDetailClick() {
//03-01 添加单击事件
$(".details").click(function () {
var id = $(this).attr("nId");
$.post("02-02新闻详细.ashx", { "id": id }, function (data) {
var strJson = $.parseJSON(data);
//为文本框赋值
$("#NewId").text(strJson[].NewsId);
$("#SubBy").text(strJson[].SubBy);
$("#TypeId").text(strJson[].TypeId);
//显示div
$("#detailDiv").css("display", "block");
//以对话框的形式弹出
$('#detailDiv').dialog({
width: ,
height: ,
title: "新闻详细信息",
collapsible: true,
maximizable: true,
resizable: true,
modal: true,
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
alert('ok');
}
}, {
text: 'Cancel',
handler: function () {
$('#detailDiv').dialog('close');
}
}]
});
});
});
}
//04 删除信息
function bindDeleteClick() {
$(".deletes").click(function () {
var id = $(this).attr("dId");
$.messager.confirm("删除提示", "确认删除选中记录吗?", function (r) {
if (r) {
$.post("02-03新闻删除.ashx", { "id": id }, function (data) {
if (data == "ok") {
//清空原有数据
$("#tableList tr:gt(0)").remove();
//重新加载
pageLoad();
$.messager.show({
title: "提示",
msg: "删除成功!",
showType:"show"
});
} else {
$.messager.alert("提示","删除失败","error");
}
});
}
});
});
}
//05 添加新闻
function bindAddClick() {
//05-01 显示div
$("#addDiv").css("display", "block");
//05-02 以对话框形式弹出
$('#addDiv').dialog({
width: ,
height: ,
title: "添加新闻信息",
collapsible: true,
maximizable: true,
resizable: true,
modal: true,
buttons: [{
text: '添加',
iconCls: 'icon-ok',
handler: function () {
$.post("02-04新闻添加.ashx", { "title": $("#AddNewsTitle").val(), "content": $("#AddNewsContent").val() },
function (data) {
if (data == "ok") {
//清空原有数据
$("#tableList tr:gt(0)").remove();
//重新加载
pageLoad();
$.messager.show({
title: "提示",
msg: "添加成功!",
showType: "show"
});
//关闭对话框
$('#addDiv').dialog('close');
} else {
$.messager.alert("提示", "添加失败", "error");
}
});
}
}, {
text: 'Cancel',
handler: function () {
$('#detailDiv').dialog('close');
}
}]
}); }
//06 编辑信息
function bindEditClick() {
//06-01 添加单击事件
$(".edits").click(function () {
var id = $(this).attr("eId");
$.post("02-02新闻详细.ashx", { "id": id }, function (data) {
var strJson = $.parseJSON(data);
//为文本框赋值
$("#editNewsId").val(strJson[].NewsId);
$("#eidtNewsTitle").val(strJson[].NewsTitle);
$("#editNewsContent").val(strJson[].NewsContent);
$("#editTypeId").val(strJson[].TypeId);
//显示div
$("#editDiv").css("display", "block");
//以对话框的形式弹出
$('#editDiv').dialog({
width: ,
height: ,
title: "新闻详细信息",
collapsible: true,
maximizable: true,
resizable: true,
modal: true,
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
//完成数据更新
editNewsInfo();
}
}, {
text: 'Cancel',
handler: function () {
$('#detailDiv').dialog('close');
}
}]
});
});
});
}
//06-02 完成数据的更新
function editNewsInfo() {
//01 获取表单中的数据,并将其序列化
var pars = $("#editForm").serializeArray();
$.post("02-05新闻编辑.ashx", pars, function (data) {
if (data == "ok") {
//清空原有数据
$("#tableList tr:gt(0)").remove();
//重新加载
pageLoad();
$.messager.show({
title: "提示",
msg: "修改成功!",
showType: "show"
});
//关闭对话框
$('#editDiv').dialog('close');
} else {
$.messager.alert("提示", "修改失败", "error");
}
});
}
//08 为页码条添加单击事件
function bindPageBarClick() {
$(".pageBar").click(function () {
var pageIndex = $(this).attr('href').split("=")[];
//清空原有数据
$("#tableList tr:gt(0)").remove();
pageLoad(pageIndex);
return false;
});
} </script>
</head>
<body>
<input type="button" id="btnAddNewsInfo" value="添加新闻" onclick="bindAddClick()"/>
<table id="tableList">
<thead>
<th>新闻Id</th> <th>新闻标题</th> <th>新闻内容</th> <th>发布时间</th> <th>删除</th> <th>详细</th> <th>编辑</th>
</thead>
</table>
<div id="pageBarDiv" class="page_nav"> </div>
<!------------03详细信息-Start----------------->
<div id="detailDiv">
<table>
<tr>
<td>新闻Id</td>
<td><span id="NewId"></span></td>
</tr>
<tr>
<td>上传者</td>
<td><span id="SubBy"></span></td>
</tr>
<tr>
<td>所属类型</td>
<td><span id="TypeId"></span></td>
</tr>
</table>
</div>
<!------------03详细信息-End----------------->
<!------------04删除信息-start---End-----------------> <!------------05添加信息-Start----------------->
<div id="addDiv">
<table>
<tr>
<td>新闻标题</td>
<td><input type="text" id="AddNewsTitle" /> </td>
</tr>
<tr>
<td>新闻内容</td>
<td><input type="text" id="AddNewsContent" /> </td>
</tr> </table>
</div>
<!------------05添加信息-End----------------->
<!------------06编辑信息-Start----------------->
<div id="editDiv">
<form id="editForm">
<input type="hidden" name="txtEditNewsId" id="editNewsId" />
<table>
<tr><td>新闻标题</td><td><input type="text" name="txtEditNewsTitle" id="eidtNewsTitle" /></td></tr>
<tr><td>新闻内容</td><td><input type="text" name="txtEditNewsContent" id="editNewsContent" /></td></tr>
<tr><td>新闻类型</td><td><input type="text" name="txtEditTypeId" id="editTypeId" /></td></tr>
</table>
</form>
</div>
<!------------06编辑信息-End-----------------> </body>
</html>
html
步步为营-78-新闻展示(Ajax+Json+easyUI)的更多相关文章
- ajax+json模态框中分页(spring+struts+mybatis+easyui分页插件)
0.业务需求: 点击每个数字的时候可以显示每个对应的详细记录.也就是得点击11的时候拿着开采部与C级去查询.
- JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表
本篇的思想:对HDFS获取的数据进行两种不同的可视化图表处理方式.第一种JFreeChar可视化处理生成图片文件查看.第二种AJAX+JSON+ECharts实现可视化图表,并呈现于浏览器上. 对 ...
- AJAX,JSON搜索智能提示
效果 开发结构参考AJAX,JSON用户校验 主要有两个核心文件 1,处理输入字符,进行后台搜索的servlet Suggest.java package org.guangsoft.servlet; ...
- 基于Jquery+Ajax+Json+存储过程 高效分页
在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...
- Django 之Ajax&Json&CORS&同源策略&Jsonp用法
什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集 ...
- struts2 + ajax + json的结合使用,实例讲解
struts2用response怎么将json值返回到页面javascript解析,这里介绍一个struts2与json整合后包的用法. 1.准备工作 ①ajax使用Jquery:jquery-1.4 ...
- php ajax json jquery 记录
php+jquery+ajax+json简单小例子 <html> <title>php+jquery+ajax+json简单小例子</title> <?php ...
- 练习 jquery+Ajax+Json 绑定数据 分类: asp.net 练习 jquery+Ajax+Json 绑定数据 分类: asp.net
练习 jquery+Ajax+Json 绑定数据
- Jquery+ajax+json+servlet原理和Demo
Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...
随机推荐
- ubuntu安装和分区方案
方案引用 Swap(相当于电脑内存):逻辑分区.大小设置为电脑内存大小,2G,4G: /boot(引导分区):主分区:大小设置为480M: /home(用户存储数据用):逻辑分区,要尽可能大,100G ...
- 常用的Character方法
- Fragment和FragmentActivity的使用方法
认识:首先我们知道Fragment是我们在单个Activity上要切换多个UI界面,显示不同内容.模块化这些UI面板以便提供给其他Acitivity使用便利.同时我们显示的Fragment也会受到当前 ...
- MySql DDL语言(数据库和数据表的管理)
数据定义语言,负责数据库和数据表的管理 ⒈数据库的管理 1.创建数据库 create database if not exists DatabaseName; #if not exists可以省略 2 ...
- 解决ubuntu的gedit编辑器中文乱码的问题
hello,本人 sky 又和大家见面了很多人在使用ubuntu系统时发现打开windows系统下面写的文档的话会发现乱码,是因为编码格式的问题windows系统下面是用GB2312等编码格式进行中文 ...
- Saltstack自动化操作记录(1)-环境部署
早期运维工作中用过稍微复杂的Puppet,下面介绍下更为简单实用的Saltstack自动化运维的使用. Saltstack知多少Saltstack是一种全新的基础设施管理方式,是一个服务器基础架构集中 ...
- python序列化模块的速度比较
# -*- coding: utf-8 -*- # @Time : 2019-04-01 17:41 # @Author : cxa # @File : dictest.py # @Software: ...
- Windows PowerShell 入門(8)-関数編3
この連載では.Microsoftが提供している新しいシェル.Windows PowerShellの使い方を解説します.今回は.フィルタ.スクリプトブロック.変数のスコープについて取り上げます. はじめ ...
- 用WMI监控IIS
参考网站:http://blog.chinaunix.net/uid-7910284-id-5774420.html 参考官方文档:https://docs.microsoft.com/en-us/p ...
- 利用 git format-patch 和 git send-email 把修改的 patch 文件发送给 ffmpeg-devel
1. 下载源码git clone https://git.ffmpeg.org/ffmpeg.git 2. 设置 git 用户的邮箱和姓名git config --global user.email ...