步步为营-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 ...
随机推荐
- 【转】python操作excel表格(xlrd/xlwt)
[转]python操作excel表格(xlrd/xlwt) 最近遇到一个情景,就是定期生成并发送服务器使用情况报表,按照不同维度统计,涉及python对excel的操作,上网搜罗了一番,大多大同小异, ...
- Python3-高阶函数、闭包
一.高阶函数 满足下列条件之一为高阶函数 1.某一函数当作参数传入另一个函数中 2.函数的返回值包含n个函数,n>0 高阶函数示范: def bar(): print 'in the bar ...
- k64 datasheet学习笔记52---Universal Asynchronous Receiver/Transmitter (UART)
1.前言 UART实现与外设或CPU的通信 2. UART概述 2.1基本特性 (1)Full-duplex operation (2)Standard mark/space non-return-t ...
- 定制化rpm包及本地yum仓库搭建
为方便本地yum的管理,一般都是在公司局域网内搭建本地yum仓库,实现公司内部快速安装常用软件. 步骤如下: 1.搭建要实现本地yum管理的软件,测试该软件搭建成功与否: 2.定制rpm包及其相关依赖 ...
- 设计模式C++学习笔记之十六（Observer观察者模式）
16.1.解释 概念:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. main(), IObservable,被观察者接口 CHanFei ...
- boost::function 介绍
本片文章主要介绍boost::function的用法. boost::function 就是一个函数的包装器(function wrapper),用来定义函数对象. 1. 介绍 Boost.Func ...
- 题解-PKUWC2018 随机算法
Problem loj2540 题意简述:给定\(n\)个点的无向图,给定求最大独立集的近似算法:随机排列\(1\cdots n\),按照该排列顺序贪心构造最大独立集(即对每个点能加入独立集就加),求 ...
- （常用）os模块
os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cdos.curdi ...
- Select2日常操作集合
1.获得多选值 var arraySelected = $('#carTypes').select2("data"); var carTypesDesc = ''; for (va ...
- springcloud-4：服务注册（hello-service）
服务端 请见 http://www.cnblogs.com/huiy/p/8668005.html 客户端: 主启动类 import org.springframework.boot.SpringAp ...