Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 善良公社项目

经过上一篇博客,本节主要是来看实现的功能是后台的数据通过json数据传过来,前台修改的数据再传回数据库之后页面再次更新table中的数据;

 图示:

Jquery EasyUI +Ajax +Json +一般处理程序      实现数据的前台与后台的交互  善良公社项目

 

实例:前台的代码

   <%--表格显示区--%>
    <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数据界面不刷新,页面更加的贴近客户的需求,查询效率大大的提升。

 

  接下来会给大家分享学习分页(自己查找资料中学习总结的知识),查询数据的分页的知识与实例。敬请期待……

 

更多相关文章
  • 似乎任何职业都会给从业人员带来这样那样的习惯.国外某网站上有位朋友(应该也是程序员)想了解其他程序员在投身堆码事业后有什么样的坏习惯.结果一呼百应,很多程序员纷纷自爆自己的坏习惯和糗人糗事.编程无国界,相信国内堆码界的朋友,也会有同感. 1. 编程已给我带来很多坏习惯,编程也每天在继续给我新增更多的 ...
  • 一.卸载系统自带的openjdk 1.查询系统内置的jdk,使用命令如下: rpm -qa grep java 此时会列出系统中存在的jdk,如果存在就进行卸载,不存在就直接进行安装. 2.进行卸载,使用命令如下: rpm -e --nodeps jdk相关名称 卸载之后可进行jdk安装,相关查询与 ...
  • 我对大型系统的理解,从数量上面来讲,源代码超过百万行以上,系统有超过300个以上的功能,从质量上来讲系统应该具备良好的可扩展性和可维护性,系统中的功能紧密关联.除去业务上的复杂性,如何设计这样的一个协作良好的系统,搭建开发人员基础平台,一直是我研究的方向. SouceCounter(版本3.3.91 ...
  • 样式代码如下:   对于博客园将文章移除首页的做法:我就迁移了.文章已经迁移:http://www.ayjs.net/post/75.html   由于例子比较简单,你只要指定Style即可,难点,透明区域的外边框阴影,因为阴影会覆盖透明内容下,导致透明色不对,这里我使用了9宫格的小方式解决了 效果 ...
  • 同Windows一样,Ubuntu Linux系统包含两类环境变量:系统环境变量和用户环境变量.系统环境变量对所有系统用户都有效,用户环境变量仅仅对当前的用户有效. Ubuntu Linux 环境变量 用户环境变量通常被存储在下面的文件中: ~/.profile ~/.bash_profile 或者 ...
  • 前言:有没有想过,如何将对象进行“加密”后写入磁盘?序列化帮你实现! 1.概念 序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写入到临时或持久性存储区.以后,可以通过从存储区中读取或反序列化对象的状态,重新创建该对象. 2.反序 ...
一周排行
  • 易网科技讯 8月11日消息,阿里巴巴(1688.HK)今日下午发布第二季度及半年度中期财报.财报数据显示,上半年总营业收入同比增长22%至人民币31.56亿元,净利润同比增加32%至人民币9.17亿元,现金及银行存款 ...
  • 记得自己当初最早使用Ansible的时候,网上搜到的中文资料的都是零零散散的,后来只能硬着头皮看官方的英文文档.发现好多事情都没有什么捷径可走,最好的资料还是官方的文档.最近又抽时间按照官方文档对Ansible做了一 ...
  • Win2000设置技巧 许多设置涉及到注册表,请小心操作,注意备份! 对象为Windows 2000 Professional. 内存性能优化: HKEY_LOCAL_MACHINE\System\CurrentCo ...
  • 对于网站开发来说,如果你有“规划URL”的想法,说明你是一个有经验的网站设计者,最起码也是一个饱尝教训的网站维护者. 对于网站开发人员来说,规划URL的第一个好处就是理清了整个网站的结构.众所周知,网站结构的主体是树 ...
  • CoreData 数据模型的版本控制 在项目中选择数据模型,然后选择Editor Add Model Version   通过属性栏的ModelVersion current 选项进行版本的选择控制. 在新的版本中可 ...
  • 作者:易网科技专栏作家 师北宸(微博)在第一次有媒体传言Google推出云存储服务的六年后,Google Drive终于出来了.在Google Drive发布之前,我一直都颇期待Google的云存储服务.--没有比G ...
  • 通过: xmlhttp.onreadystatechange= function(){xx(123)}; or  xmlhttp.onreadystatechange= new Function("xx(1 ...
  • fstream用来进行输入/输出文件的操作.   fstream file1; 定义了fstream类的一个对象file1file1.open("filename",...) 打开名为filena ...
  • CREATE PROC [email protected],@PageIndex  INT,@PageSize  INT,@RecordCount  INTASDECLA ...
  •   (226)基于Xilinx Kintex-7 FPGA K7 XC7K325T PCIeX8 四路光纤卡    (227)基于Xilinx Kintex-7 FPGA K7 XC7K325T的FMC USB 3. ...