EasyUI+Ajax+Json+一般处理程序实现数据的前台与后台的交互

  最近在进行组织部的项目，需要实现界面传值到后台，通过参数进行查询，并且将查询结果通过json数据传过来，最后显示到界面上。实现这样的功能需要EasyUI+Ajax+Json+一般处理程序之间的相互配合。下面简单说一下他们之间的交互过程。

要实现的功能

    首先说一下我要实现的功能，当点击姓名一列的时候会有弹出框，获取界面上的姓名，并且根据这个姓名的id去查找另一个数据表的考核结果和处分情况并显示到弹出框的界面上。

前台代码

    以下代码是表格部分的代码

[html] view plain copy

print ?

1. <span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"> <table id="dg" title="干部信息表" class="easyui-datagrid" style="width: 1090px; height: 320px" data-options="rownumbers:true,url:'CadresBaseRecord.ashx/ProcessRequest',pageSize:20,pageList:[10,20,30,50,100],method:'get',toolbar:'#toolbar', pagination:true,fitColumns:true,striped:true,singleSelect:true">  
2.         <thead>  
3.             <tr>  
4.                 <th field="CadresName" width="100px">姓名</th>  
5.                 <th field="Sex" width="75px">性别</th>  
6.                 <th field="Position" width="75p">职务</th>  
7.                 <th field="Unit" width="150px">所属单位</th>  
8.                 <th field="Name" width="150px">单位类别</th>  
9.                 <th field="Birthday" width="150px">出生日期</th>  
10.                 <th field="WorkYears" width="150px">参加工作时间</th>  
11.                 <th field="PartyYears" width="150px">入党时间</th>  
12.                 <th field="Education" width="100px">学历</th>  
13.                 <th field="Tel" width="100px">手机号码</th>  
14.                <th field="CadresExperience" <%--hidden="hidden"--%>>任职经历</th>         
15.                 <th field="CadresID" width="100px" hidden="hidden"></th>  
16.                 <th field="other4" hidden="hidden"></th>  
17.                 <th field="other5" hidden="hidden"></th>  
18.             </tr>  
19.         </thead>  
20.     </table></span></span>  

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"> <table id="dg" title="干部信息表" class="easyui-datagrid" style="width: 1090px; height: 320px" data-options="rownumbers:true,url:'CadresBaseRecord.ashx/ProcessRequest',pageSize:20,pageList:[10,20,30,50,100],method:'get',toolbar:'#toolbar', pagination:true,fitColumns:true,striped:true,singleSelect:true">
        <thead>
            <tr>
                <th field="CadresName" width="100px">姓名</th>
                <th field="Sex" width="75px">性别</th>
                <th field="Position" width="75p">职务</th>
                <th field="Unit" width="150px">所属单位</th>
                <th field="Name" width="150px">单位类别</th>
                <th field="Birthday" width="150px">出生日期</th>
                <th field="WorkYears" width="150px">参加工作时间</th>
                <th field="PartyYears" width="150px">入党时间</th>
                <th field="Education" width="100px">学历</th>
                <th field="Tel" width="100px">手机号码</th>
               <th field="CadresExperience" <%--hidden="hidden"--%>>任职经历</th>       
                <th field="CadresID" width="100px" hidden="hidden"></th>
                <th field="other4" hidden="hidden"></th>
                <th field="other5" hidden="hidden"></th>
            </tr>
        </thead>
    </table></span></span>

添加弹出框代码

[html] view plain copy

print ?

1. <span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"> <%--添加其他信息弹出框——韦文文2015年12月19日--%>  
2.      <div id="tooltip" class="easyui-dialog" style="width: 328px; left: 329px; top: 20px; height: 230px; padding: 10px 20px"  
3.         closed="true" buttons="#dlg-buttons">  
4.         <div class="ftitle">  
5.         <form id="ff" method="post" novalidate>  
6.             <div class="fitem">  
7.                 <label>姓名:</label>  
8.                 <input id="CadName" runat="server" name="CadresName" class="easyui" required="true" maxlength="25" style="height: 18px; width: 125px" />  
9.             </div>  
10.             <div class="fitem">  
11.                 <label>考核结果:</label>               
12.                 <input id="CadResult" runat="server" name="CadResult" class="easyui" required="true" maxlength="25" style="height: 18px; width: 125px" />  
13.             </div>              
14.              <div class="fitem"> <label>处分情况:</label>  
15.                 <textarea id="CadPunishment" runat="server" name="CadPunishment" class="=easyui"  style="margin: 2px; resize: none; width: 263px; height: 116px;" rows="2"></textarea>  
16.                  <br />  
17.                 </div>  
18.             </div></span></span>  

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"> <%--添加其他信息弹出框——韦文文2015年12月19日--%>
     <div id="tooltip" class="easyui-dialog" style="width: 328px; left: 329px; top: 20px; height: 230px; padding: 10px 20px"
        closed="true" buttons="#dlg-buttons">
        <div class="ftitle">
        <form id="ff" method="post" novalidate>
            <div class="fitem">
                <label>姓名:</label>
                <input id="CadName" runat="server" name="CadresName" class="easyui" required="true" maxlength="25" style="height: 18px; width: 125px" />
            </div>
            <div class="fitem">
                <label>考核结果:</label>             
                <input id="CadResult" runat="server" name="CadResult" class="easyui" required="true" maxlength="25" style="height: 18px; width: 125px" />
            </div>            
             <div class="fitem"> <label>处分情况:</label>
                <textarea id="CadPunishment" runat="server" name="CadPunishment" class="=easyui"  style="margin: 2px; resize: none; width: 263px; height: 116px;" rows="2"></textarea>
                 <br />
                </div>
            </div></span></span>

EasyUI+datagrid单击列事件，用js获取单击列所在行的id，通过ajax向后台传递，并返回结果复制给文本框。

[javascript] view plain copy

print ?

1. <span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">    //单击行弹出处分情况等信息的框-韦文文添加2015年12月23日  
2.    
3.     $('#dg').datagrid({         
4.         onClickCell: function (rowIndex, field, value) {  
5.             //通过js获取点击列所在行的id(行号是重点)  
6.             var CadresID = $(".datagrid-body").find("tr[id='datagrid-row-r3-2-" + rowIndex + "']").find('td[field=CadresID]').find('div').text()  
7.             $("CadresID").val(CadresID);  
8.             $("field").val(field);  
9.             $.ajax({   
10.                 url: 'CadresBaseInfo.ashx?test=CadresID' + "&CadresID=" + CadresID,//传参数到一般处理方法，并赋值  
11.                  
12.             type:"Post",  
13.                 dataType:"json",  
14.                 success: function (data) {//ajax请求完成时执行，data为返回的结果  
15.                     $("#CadResult").val(data[0].assessmentresult);//json值返回赋值，考核结果  
16.                     $("#CadPunishment").val(data[0].punishment);  //json值返回赋值，处分情况  
17.                 }  
18.             });  
19.             //当单击列为姓名时  
20.             if (field == "CadresName") {                
21.                 $('#CadName').val(value);  
22.                 $('#tooltip').dialog('open').dialog('setTitle', '其他信息');  
23.                 //弹出框到屏幕中央；  
24.                 $('#tooltip').window('center');  
25.                 return;  
26.             }  
27.                 //当单击列为任职情况时  
28.             else if (field == "CadresExperience") {  
29.                 $('#ExperenceDlg').dialog('open').dialog('setTitle', '任职情况');  
30.                 $('#Textarea1').val(value);  
31.                 //弹出框到屏幕中央；  
32.                 $('#ExperenceDlg').window('center');  
33.     }  
34.         }  
35.      });</span>  
36. </span>  

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">    //单击行弹出处分情况等信息的框-韦文文添加2015年12月23日
 
    $('#dg').datagrid({       
        onClickCell: function (rowIndex, field, value) {
            //通过js获取点击列所在行的id(行号是重点)
            var CadresID = $(".datagrid-body").find("tr[id='datagrid-row-r3-2-" + rowIndex + "']").find('td[field=CadresID]').find('div').text()
            $("CadresID").val(CadresID);
            $("field").val(field);
            $.ajax({ 
                url: 'CadresBaseInfo.ashx?test=CadresID' + "&CadresID=" + CadresID,//传参数到一般处理方法，并赋值
               
            type:"Post",
                dataType:"json",
                success: function (data) {//ajax请求完成时执行，data为返回的结果
                    $("#CadResult").val(data[0].assessmentresult);//json值返回赋值，考核结果
                    $("#CadPunishment").val(data[0].punishment);  //json值返回赋值，处分情况
                }
            });
            //当单击列为姓名时
            if (field == "CadresName") {              
                $('#CadName').val(value);
                $('#tooltip').dialog('open').dialog('setTitle', '其他信息');
                //弹出框到屏幕中央；
                $('#tooltip').window('center');
                return;
            }
                //当单击列为任职情况时
            else if (field == "CadresExperience") {
                $('#ExperenceDlg').dialog('open').dialog('setTitle', '任职情况');
                $('#Textarea1').val(value);
                //弹出框到屏幕中央；
                $('#ExperenceDlg').window('center');
    }
        }
     });</span>
</span>

一般处理方法：

[csharp] view plain copy

print ?

1. <span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"> #region 根据CadresID查询CadresRate表处分情况等信息-韦文文2015年12月23日  
2.         public void QueryByCadresID(HttpContext context)  
3.         {  
4.             //实例化B层类  
5.             CadresRateBLL cadresratebll = new CadresRateBLL();  
6.             //实例化一个ds数据集  
7.             DataSet ds = new DataSet();  
8.             string strWhere = context.Request.QueryString["CadresID"].ToString(); ;  
9.             //获取处分情况等信息  
10.             ds = cadresratebll.QueryByCadresID(strWhere);  
11.             string json = Dataset2Json(ds);  
12.             //前台返回json数据  
13.             context.Response.Write(json);  
14.             context.Response.End();  
15.         }  
16.         #endregion</span></span>  

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"> #region 根据CadresID查询CadresRate表处分情况等信息-韦文文2015年12月23日
        public void QueryByCadresID(HttpContext context)
        {
            //实例化B层类
            CadresRateBLL cadresratebll = new CadresRateBLL();
            //实例化一个ds数据集
            DataSet ds = new DataSet();
            string strWhere = context.Request.QueryString["CadresID"].ToString(); ;
            //获取处分情况等信息
            ds = cadresratebll.QueryByCadresID(strWhere);
            string json = Dataset2Json(ds);
            //前台返回json数据
            context.Response.Write(json);
            context.Response.End();
        }
        #endregion</span></span>

DataSet转换成Json格式，datgaTable转换成Json格式

[csharp] view plain copy

print ?

1. <span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"> #region DataSet转换成Json格式  
2.         /// <summary>  
3.         /// DataSet转换成Json格式    
4.         /// </summary>    
5.         /// <param name="ds">DataSet</param>   
6.         /// <returns></returns>    
7.         public static string Dataset2Json(DataSet ds, int total = -1)  
8.         {  
9.             StringBuilder json = new StringBuilder();  
10.   
11.             foreach (DataTable dt in ds.Tables)  
12.             {  
13.                 //删除列与行  
14.                 //json.Append("{\"total\":");  
15.                 //if (total == -1)  
16.                 //{  
17.                 //    json.Append(dt.Rows.Count);  
18.                 //}  
19.                 //{  
20.                 //    json.Append(total);  
21.                 //}  
22.                 //json.Append(",\"rows\":[");  
23.                 json.Append("[");  
24.                 json.Append(DataTable2Json(dt));  
25.                 json.Append("]");  
26.                 //json.Append("");  
27.             } return json.ToString();  
28.         }  
29.         #endregion  
30.         #region dataTable转换成Json格式  
31.         /// <summary>    
32.         /// dataTable转换成Json格式    
33.         /// </summary>    
34.         /// <param name="dt"></param>    
35.         /// <returns></returns>    
36.         public static string DataTable2Json(DataTable dt, int pid = -1)  
37.         {  
38.             StringBuilder jsonBuilder = new StringBuilder();  
39.   
40.             for (int i = 0; i < dt.Rows.Count; i++)  
41.             {  
42.                 jsonBuilder.Append("{");  
43.                 for (int j = 0; j < dt.Columns.Count; j++)  
44.                 {  
45.                     int id = pid;  
46.                     jsonBuilder.Append("\"");  
47.                     dt.Columns[j].ColumnName = dt.Columns[j].ColumnName.ToLower();  
48.                     if (dt.Columns[j].ColumnName == "Name") dt.Columns[j].ColumnName = "text";  
49.                     jsonBuilder.Append(dt.Columns[j].ColumnName);  
50.                     if (dt.Columns[j].ColumnName.ToLower() == "id" && id != -1)  
51.                     {  
52.                         jsonBuilder.Append("\":" + (id * 10 + Convert.ToInt32(dt.Rows[i][j])) + ",");  
53.                     }  
54.                     else  
55.                     {  
56.                         jsonBuilder.Append("\":\"" + dt.Rows[i][j].ToString() + "\",");  
57.                     }  
58.                 }  
59.   
60.                 if (dt.Columns.Count > 0)  
61.                 {  
62.                     jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
63.                 }  
64.                 jsonBuilder.Append("},");  
65.             }  
66.             if (dt.Rows.Count > 0)  
67.             {  
68.                 jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
69.             }  
70.             return jsonBuilder.ToString();  
71.         }  
72.         #endregion </span></span>  

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"> #region DataSet转换成Json格式
        /// <summary>
        /// DataSet转换成Json格式  
        /// </summary>  
        /// <param name="ds">DataSet</param> 
        /// <returns></returns>  
        public static string Dataset2Json(DataSet ds, int total = -1)
        {
            StringBuilder json = new StringBuilder();

            foreach (DataTable dt in ds.Tables)
            {
                //删除列与行
                //json.Append("{\"total\":");
                //if (total == -1)
                //{
                //    json.Append(dt.Rows.Count);
                //}
                //{
                //    json.Append(total);
                //}
                //json.Append(",\"rows\":[");
                json.Append("[");
                json.Append(DataTable2Json(dt));
                json.Append("]");
                //json.Append("");
            } return json.ToString();
        }
        #endregion
        #region dataTable转换成Json格式
        /// <summary>  
        /// dataTable转换成Json格式  
        /// </summary>  
        /// <param name="dt"></param>  
        /// <returns></returns>  
        public static string DataTable2Json(DataTable dt, int pid = -1)
        {
            StringBuilder jsonBuilder = new StringBuilder();

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    int id = pid;
                    jsonBuilder.Append("\"");
                    dt.Columns[j].ColumnName = dt.Columns[j].ColumnName.ToLower();
                    if (dt.Columns[j].ColumnName == "Name") dt.Columns[j].ColumnName = "text";
                    jsonBuilder.Append(dt.Columns[j].ColumnName);
                    if (dt.Columns[j].ColumnName.ToLower() == "id" && id != -1)
                    {
                        jsonBuilder.Append("\":" + (id * 10 + Convert.ToInt32(dt.Rows[i][j])) + ",");
                    }
                    else
                    {
                        jsonBuilder.Append("\":\"" + dt.Rows[i][j].ToString() + "\",");
                    }
                }

                if (dt.Columns.Count > 0)
                {
                    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                }
                jsonBuilder.Append("},");
            }
            if (dt.Rows.Count > 0)
            {
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            }
            return jsonBuilder.ToString();
        }
        #endregion </span></span>

剩下的就是B层和D层了，比较简单，代码就不一一展示了。

小结：

    一条线挺容易弄明白的，难的是前台和后台的交互，开始不知道怎么把前台的值传到后台，更重要的是怎么把后台已经获取到的json串赋值到相应的文本框 。赋值到下拉框会写，但是到文本框费了好大劲，做了很多种尝试，最后通过浏览器监控调试才试验成功。虽然费了好大劲，但是很有一种成就感，好开心~

    希望这篇博客会对您又帮助！如果有更好的建议欢迎指正。