Jquery EasyUI +Ajax +Json +一般處理程式 實現資料的前臺與後臺的互動 --- 善良公社專案
阿新 • • 發佈：2018-12-24
經過上一篇部落格，本節主要是來看實現的功能是後臺的資料通過json資料傳過來，前臺修改的資料再傳回資料庫之後頁面再次更新table中的資料；
圖示：
例項：前臺的程式碼
<%--表格顯示區--%>
<table id="tt" " title="設定打分規則" class="easyui-datagrid" style="width: auto;
height: 400px;" idfield="itemid" pagination="true" iconcls=" icon-save" remoteSort="false"
data-options="rownumbers:true,
url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],
method:'get',toolbar:'#tb' ," fitcolumns="true" striped="true">
<%--url是獲取資料的地址--%>
<%--url:'JSON.ashx/ProcessRequest'--%>
<%-- 表格標題--%>
<thead >
<tr >
<th data-options="field:'ScoreStyleID',checkbox:true"> 打分專案類別ID</th>
<th data-options="field:'ScoreStyleName',width:100",sortable:"true">打分專案類別名稱</th>
<th data-options="field:'ScoreStyleState',width:120,align:'right'">打分專案類別描述</th>
<th data-options="field:'Score',width:120,align:'right'">打分專案單位分數</th>
<th data-options="field:'ScoreItem',width:100">打分專案單位</th>
<th data-options="field:'AdminID',width:100">管理員</th>
<th data-options="field:'PublishDate',width:100">釋出時間</th>
</tr>
</thead>
<%--表格內容--%>
<tbody>
</tbody>
</table>
上面主要是設定table的屬性，具體每個屬性大家可以詳細查中文文擋來深入學習
下面是關於增刪改查的程式碼：
var url;
//新增管理員
function newUser() {
$('#dlg').dialog('open').dialog('setTitle', '新增管理員');//設定表頭
$('#fm').form('clear');//清空窗體資料
document.getElementById("test").value = "add";//設定表示為後臺調不同方法資料提供介面
}
//修改管理員
function editUser() {
$('#fm').form('clear');
var row = $('#tt').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', '修改管理員');
//繫結資料列表
$('#firstname').val(row.ScoreStyleName);
$('#lastname').val(row.Score);
$('#unit').val(row.ScoreItem);
$('#message').val(row.ScoreStyleState);
$('#ID').val(row.ScoreStyleID);
document.getElementById("test").value = "modify";//設定表示為後臺調不同方法資料提供介面
$('#fm').form('load', row);
}
}
//儲存資訊
function saveUser() {
//獲取頁面中輸入的值
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
var test = document.getElementById("test").value;
var unit = document.getElementById("unit").value;;
var message = document.getElementById("message").value;
var ID = document.getElementById("ID").value;
//var t = "firstname=" + firstname + "&lastname=" + lastname + "&unit=" + unit + "&message=" + message + "&ID=" + ID;
$('#fm').form('submit', {
//設定地址與傳遞引數到後臺
url: "JSONData.ashx?firstname=" + firstname + "&lastname=" + lastname + "&unit=" + unit + "&message=" + message + "&test=" + test + "&ID=" + ID,
onSubmit: function () {
return $(this).form('validate');
},
//判斷結果是否正確
success: function (result) {
if (result.indexOf("T") == 0) {
alert('恭喜您，資訊新增成功！')
$('#dlg').dialog('close'); // 關閉視窗
$('#tt').datagrid('reload');
}
else {
alert('儲存失敗，請您核對！')
}
var result = eval('(' + result + ')');
if (result.success) {
$('#dlg').dialog('close'); // close the dialog
$('#tt').datagrid('reload');
$.message.alert('提示', '儲存成功！', 'info');
// reload the user data
} else {
//$.messager.show({
// title: 'Error',
// msg: result.msg
//});
}
}
});
}
//刪除管理員
function removeUser() {
document.getElementById("test").value = "delete";//設定表示為後臺調不同方法資料提供介面
var test = document.getElementById("test").value;
var row = $('#tt').datagrid('getSelected');
if (row) {
$.messager.confirm('提示', '你確定要刪除這條資訊嗎？', function (r) {
if (r) {
$('#fm').form('submit', {
url: "JSONData.ashx?ID=" + row.ScoreStyleID + "&test=" + test,
onSubmit: function () {
},
//判斷結果是否正確
success: function (result) {
if (result.indexOf("T") == 0) {
$('#dlg').dialog('close');
alert('恭喜您，資訊刪除成功！')
// close the dialog
$('#tt').datagrid('reload');
//$('#fm').form('submit');
}
else {
alert('新增失敗，請重新操作！')
}
var result = eval('(' + result + ')');
}
});
}
}
);
}
}
//查詢並把資料傳遞給後臺，陣列
function getQueryParams(queryParams) {
var StartTime = $("#StartTime").datebox("getValue");
var EndTime = $("#EndTime").datebox("getValue");
var KeyWord = document.getElementById("KeyWord").value;
var Category = $("#Category").combobox("getValue");
queryParams.StartTime = StartTime;
queryParams.EndTime = EndTime;
queryParams.KeyWord = KeyWord;
queryParams.Category = Category;
return queryParams;
}
//增加查詢引數，重新載入表格
function reloadgrid() {
//查詢引數直接新增在queryParams中
var queryParams = $('#tt').datagrid('options').queryParams;
getQueryParams(queryParams);
$('#tt').datagrid('options').queryParams = queryParams;//傳遞值
$("#tt").datagrid('reload');//重新載入table
}
接下來是後臺中的一般處理程式中的程式碼（主要是負責讀取資料庫中的資料）
首先是判斷前臺請求的是哪種方法：
/// <summary>
/// 條件查詢公告
/// </summary>
/// <param name="context"></param>
public void ProcessRequest(HttpContext context)//context中包含前臺與後臺來回傳遞的值
{//判斷前臺請求的是增刪改查的哪一個
string command = context.Request.QueryString["test"];//前臺傳的標示值
if (command == "add")
{//呼叫新增方法
Add(context);
}
else if (command == "delete")
{//呼叫刪除方法
Delete(context);
}
else if (command == "modify")
{//呼叫修改方法
Modify(context);
}
else
{//呼叫查詢方法
Query(context);
}
}
查詢中的方法：
//================================================================
//獲取分頁和排序資訊：頁大小，頁碼，排序方式，排序欄位
int pageRows, page;
pageRows = 10;
page = 1;
string order, sort, oderby; order = sort = oderby = "";
if (null != context.Request.QueryString["rows"])
{
pageRows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());
}
if (null != context.Request.QueryString["page"])
{
page = int.Parse(context.Request.QueryString["page"].ToString().Trim());
}
if (null != context.Request.QueryString["sort"])
{
order = context.Request.QueryString["sort"].ToString().Trim();
}
if (null != context.Request.QueryString["order"])
{
sort = context.Request.QueryString["order"].ToString().Trim();
}
//===================================================================
//組合查詢語句：條件+排序
StringBuilder strWhere = new StringBuilder();
if (key != "")
{
strWhere.AppendFormat(" ScoreStyleName like '%{0}%' and ", key);
}
if (category != "")
{
strWhere.AppendFormat(" AdminID= '{0}' and ", category);
}
if (startTime != "")
{
strWhere.AppendFormat(" PublishDate >= '{0}' and ", startTime);
}
if (endTime != "")
{
strWhere.AppendFormat(" PublishDate <= '{0}' and ", endTime);
}
//刪除多餘的and
int startindex = strWhere.ToString().LastIndexOf("and");//獲取最後一個and的位置
if (startindex >= 0)
{
strWhere.Remove(startindex, 3);//刪除多餘的and關鍵字
}
if (sort != "" && order != "")
{
//strWhere.AppendFormat(" order by {0} {1}", sort, order);//新增排序
oderby = order + " " + sort;
}
//DataSet ds = Bnotice.GetList(strWhere.ToString()); //呼叫不分頁的getlist
//呼叫分頁的GetList方法
DataSet ds = scorebll.GetListByPage(strWhere.ToString(), oderby, (page - 1) * pageRows + 1, page * pageRows);
int count = scorebll.GetRecordCount(strWhere.ToString());//獲取條數
string strJson = ToJson.Dataset2Json(ds, count);//DataSet資料轉化為Json資料
context.Response.Write(strJson);//返回給前臺頁面
context.Response.End();
這個過程很是漫長，在除錯的過程中，遇到了各種各樣的問題，主要是瀏覽器的快取問題耽誤了好長時間，龍哥給了大力的支援，通過實現此功能，對ajax，一般處理程式的理解深刻多了；框架的使用提高我們開發的效率；
Json+ajax資料介面不重新整理，頁面更加的貼近客戶的需求，查詢效率大大的提升。
接下來會給大家分享學習分頁（自己查詢資料中學習總結的知識），查詢資料的分頁的知識與例項。敬請期待……