1. 程式人生 > >Jquery EasyUI +Ajax +Json +一般處理程式 實現資料的前臺與後臺的互動 --- 善良公社專案

Jquery EasyUI +Ajax +Json +一般處理程式 實現資料的前臺與後臺的互動 --- 善良公社專案

經過上一篇部落格,本節主要是來看實現的功能是後臺的資料通過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資料介面不重新整理,頁面更加的貼近客戶的需求,查詢效率大大的提升。

  接下來會給大家分享學習分頁(自己查詢資料中學習總結的知識),查詢資料的分頁的知識與例項。敬請期待……